Dynamic Content: Display and Navigation Options for Collection Records

There are various display and navigation options available for showcasing collection records (for more information on collections, see Dynamic Content: Collections (cross reference)). Whether you're using dynamic pages to generate multiple pages from a collection or simply displaying records, these options help make your content accessible to site visitors.

Dynamic Content: Dynamic Pages can be added to the site’s navigation or displayed with Collection Display Widgets to ensure they are easy to find.

If individual pages aren't necessary, collection records can still be displayed in a more streamlined way, without the need for dynamic pages.

Site Navigation and Dynamic Records

Note

  • Each parent navigation page may only contain information from one dynamic page. That is, multiple dynamic pages may not be linked to a single parent navigation page. Additionally, you may have up to 150 page items. However, it is not recommended you reach this limit.

  • If a navigation item contains a dynamic page and a regular page, the dynamic page items will always be displayed last, regardless of the order of the actions.

Tip

A dynamic page record can be added to navigation widgets using the Custom links option in the navigation widget. Note that only one record can be added per custom link. For information on the Custom links option, see Widgets: Navigation Links.

Add Dynamic Page Records to the Site Navigation

To add the dynamic page to the navigation:

  1. In the side panel, click Pages, then click the settings (settings-icon.png) icon for the desired dynamic page.

  2. Click Hide/Show in Navigation, and then select Show on all.

  3. In the Add to Navigation popup:

    • Select a parent navigation page from the Add page items as subpages drop down.

    • Select the field to display from the Select Field to display in navigation drop down.

  4. Click Save Details.

Hide or Edit Record Availability (in the Site Navigation)

To adjust the availability of records in the site navigation:

  1. In the side panel, click Pages, then click the settings (settings-icon.png) icon for the desired dynamic page.

  2. Click Hide/Show in Navigation.

  3. Select where you would like to hide it from the navigation or click Set nav details to edit the details.

Collection Display Widgets

Collection Display Widgets are elements that list and display the records of a collection. They can be used to allow visitors to navigate to the records of a dynamic page or simply to showcase a collection's data. These widgets also offer options to filter and sort the records. Additionally, when added to a dynamic page, they provide a dynamic filtering option for greater flexibility.

  • List

  • Photo Gallery

  • Media Slider

  • Tabs

  • Accordion

  • Table (display only, direct linking is not available)

Manage Connection to a Collection Display Widget
Connect to a Collection Display Widget

To connect a collection to a Collection Display Widget:

  1. Add a Collection Display Widget to the page of your site on which you want it to exist. For more information, see Add Widgets.

  2. Right-click on the widget to open the settings menu, and click Connect to Data.

  3. Select the desired collection from the Connect to drop down menu. Select the desired collection from the Connect to drop down menu. If you are connecting to a table widget, complete the following:

    1. After connecting to a collection, select the required fields from the Fields to display drop down. The columns will be ordered in the same order they were selected.

    2. click Done.

    After connecting successfully to the data, your Table widget will be marked with a blue Connected Data (connected-data-icon.png) icon.

  4. For all other widgets, map the fields in the collection to the elements in the widget you want to display.

  5. (Optional) If you have created a dynamic page for the collection you have connected and would like to connect the widget to iit, under Connect Link, select the dynamic page from the drop down list (this is what creates the link between the widget and your Dynamic Pages).

  6. Click Done.

Disconnect Data
Filter & Sort

When connecting widgets to a collection, you can filter and sort the collection to display only what you want. This feature allows you to control the number of rows the widget displays, filter according to specific text fields, and sort the list in ascending or descending order.

To add filters and sort:

  1. If the desired Collection Display Widget is not already placed on the site, add it to the page where you want it to exist. For more information, see Add Widgets.

  2. Right-click on the widget to open the settings menu, and click Connect to Data.

    • If the widget already exists: right-click on the widget, hover over Connected Data, and select Change Connection.

  3. Select the collection from the Connect to drop-down menu. (Skip this step if the widget already exists.)

  4. Click on the Filter & Sort tab. You will have the following options:

    • Display. Select the number of items you want to display (for example, All, or 2).

    • + Add sort.

      Note

      For numbers to be sorted correctly, the field must be numeric.

    • Fixed Filters. The fixed filter will display the records from the connected connection with the exact term entered.

      Note

      Filtering works according to exact values, and you may filter according to multiple values per field.

    • Dynamic Filters (only available when widget is on a dynamic page.) The dynamic filter links fields from two separate collections: one from the collection associated with the current dynamic page and another from the collection connected to the widget, displaying records with matching values dynamically. For detailed information, see the section Dynamic Filters.

Tip

If you are having difficulty filtering and sorting correctly, check if the field is rich text. It is possible there is formatting on the text, even if you cannot see it. It is recommended you convert the field to plain text.

Dynamic Filters

The dynamic filter links fields from two separate collections: one from the collection associated with the current dynamic page and another from the collection connected to the widget, displaying records with matching values dynamically. This allows you to display only the content that is relevant to a page item.

To use Dynamic filters, follow the steps below or watch our video:

Set up and use Dynamic filters
Step 1: Create and/or Configure the Collections

Create and configure 2 collections:

  • A primary collection. This is the collection that will contain the bulk of the information and includes a column for categories. An example would be a collection for a list of stores in a mall. In this example, the categories column would contain the store's categories. In step 9 this collection is referenced as Collection A.

  • A collection for the categories. This collection should have a column for the categories and each category from the primary collection should have a row/record. In step 9 this collection is referenced as Collection B.

Any type of collection can be used (Internal, Airtable, Google Sheets, and External Collections).

If you would like to use internal collections, to create them:

  1. In the side panel, click Content, then click Collections.

  2. Click +Create Collection.

Step 2: Create and/or Configure the Dynamic Pages
  1. In the editor, In the side panel, click Pages, then click + Add Page.

  2. Create a Dynamic Page from each collection you created in step 2 (one for the primary collection and one for the category collection).

    Note

    if a dynamic page is already configured and connected to the primary collection, only 1 additional dynamic page will need to be created OR if the data in the primary collection will just be displayed.

  3. Navigate to the category's Dynamic Page and in the side panel, click Widgets, then drag and drop a Collection Display Widget onto the page.

    Note

    The available widgets are:

    • List

    • Photo Gallery

    • Media Slider

    • Tabs

    • Accordion

    • Table (display only, direct linking to the primary collection's dynamic page is not available)

  4. Right-click on the Collection Display Widget that was just added to open the settings menu, and click Connect to Data. Connect it to Primary Collection. Before closing the Connected Data popup, open the Filter & Sort tab and in the Dynamic Filter section click +Add Filter.

  5. Map between the category name field in the data collection (Collection A) and the category name field in the categories collection (Collection B).

Step 3: Make the Category's Page Accessible
  1. Navigate to a regular page of your choice and in the side panel, click Widgets, then drag and drop the Gallery widget onto the page.

  2. Right-click the Gallery widget to open the settings menu, and click Connect to Data. Connect it to the categories collection you created in step 2. Map the link field to its Dynamic Page.