Configure directory component for Job template
In this guide, we'll walk you through step by step on how to set up the directory component used in Job templates and components.
Table of contents:
Configure directory component
Configure dynamic page
1. Create your spreadsheet
- Make a copy of the spreadsheet available at the following link:
https://docs.google.com/spreadsheets/d/1V6SkXwq49Nk6HpSlss0MZZxVTy1y-fEIYEbDe1T-Wao/edit?usp=sharing
2. Get a link to the spreadsheet
- Publish your new spreadsheet as a .csv file and copy the resulting link:
3. Replace the link
- Go to the Directory component settings:
- and replace the link in the CMS URL section:
At this stage, the setup of the dynamic component is complete and we can move on to configuring the dynamic page.
4. Add dynamic data source URL
- The template has one dynamic page named /tools
- And we need to select this page, then go to the page settings and add the Google Sheet link in .csv (which we previously added for the dynamic component) into the Dynamic data source URL section.
🏁 Setup complete!
You can now start editing your Google Drive spreadsheet by adding your information.
All the changes you make will be automatically updated in the component on your website within a few minutes after the modifications are made.
Additional information
An example of displaying information from a Google Sheet in a card on the website.
The spreadsheet contains the following information
Title and Text - provide purely informational content.
URL - the complete link to the website to which the user will be redirected after clicking the card.
In spreadsheet the link should start with https://
Category - determines in which tab of the switcher the card will be displayed.
You can add categories to the spreadsheet while preserving punctuation, i.e., by adding a symbol " ; " after the category name.
Hide - if you select "Visible if hide is FALSE" in the component settings under "Item visibility", the card for which this checkbox is set will not be displayed on the page.
Rank - determines the card's position when displayed on the page - the higher the rating, the higher the card will appear.
imgUrl - the direct link to the image should include the file extension at the end, such as .jpg, .png, etc.
How to get a direct link to an image
If you are using a component without images, you can leave this field empty.
Component settings
Search bar
- Placeholder - text for the search bar. Use
{{amount}}
to display the total number of items in the directory. Leave empty to hide the search bar.
Filters
- Source column - allows you to select a column from Google Sheets that will be used for filtering.
- Label - allows you to specify the name of the filter.
- Sorting - indicates the order of sorting.
- Show items by filters - keep only selected filters. The filters bar is hidden if only 1 filter is selected. Switch "All" and "Any" to change the logic for multiple filters.
- Multiselect - allows you to choose multiple filters at the same time.
- Hide filters - allows you to hide specific filter.
Show more
- Item limit - sets the maximum number of items to display initially. Additional items will be accessible via a "Show all" button.
- Button text - the text displayed on the button that reveals all items when clicked. Leave empty to hide the button.
No results
- Text - text displayed when no items are matching search or filters.
Sorting
- Sort by column - specify the column to sort the items by. Select ascending order to display the items from A to Z or from 0 to 9. Select descending order to display the items from Z to A or from 9 to 0.
Item visibility
- Show by columns - display items only if they match certain conditions. The value is considered FALSE if it's empty or 'false'. Otherwise, it's TRUE. Switch "All" and "Any" to change the logic for multiple conditions.
Items on click
- Item URLs - Specify which URLs will be opened when you click on the directory items. Choose the field in your CMS that contains the URL. Add a prefix to open a dynamic page (e.g. /tools/unicornplatform).
Updated on: 16/10/2024
Thank you!