Content Fragment List

The Content Fragment List allows authors to place lists on a page built from an array of content fragments.  

To display a Content Fragment List, place the element on your page, and then configure the Properties and Elements settings.

This is where you adjust settings for how the content fragment list will display on your page.

• Model: Select a Content Fragment Model on which to build your list.
• Parent Path: Choose the parent path which contains your content fragments.
• Tags: Select any tags to match against for filtering initial display of the list.
• Match: When tags are used, choose to match against Any tag listed, or All tags.
• Dynamic Page Link: Optionally set a page for links in this component to go to. 
  • If an Element uses a link with the Dynamic Page Link, links will go to the page and append the content fragment name in the URL to pass that fragment to the page. This functionality is used for Dynamic Pages.

• Display Header: Choose if you want a header to group items in your list.
  • Group By: Set the grouping to be Alphabetical, Tag, Date, or Option.
  • Element Field: Select the field to use from the Content Fragment model for the grouping.
  • Header Styling: Select the text style to use for the header; H2-H6, Paragraph, Legal, or Small.
  • Sort By: Choose the default sorting to be Ascending or Descending.
• Show Sort on Page: If you want users to be able to change sorting behavior.
• Show Search on Page: When checked, enables the Search bar and Search functionality.
• Enable Columns: This allows you to display each item in your list in a series of columns.
  • (Radio): Select 2, 3, or 4 column layout.
  • Max Number of Rows per Column Before Pagination: Sets the number of _full_ rows returned for pagination functionality.
  • Content Direction:  Either Horizontal or Vertical. Content sorting flows in the direction set.
  • Exclude header from column view: When checked, header items will be full-width, taking up their own space separate from the layout of individual items.
• Paginate after (Desktop/Mobile): Determine how many items should display before pagination occurs, for both Mobile and Desktop.
• Max Items (Desktop/Mobile): Determine if there should be a maximum number of items to display in your list, for both Mobile and Desktop.
  
• Order By: Choose the element in your content fragment you would like to use to set the default order.
  • In addition to the elements within your Content Fragment, "Most Popular" is also an option which will allow you to sort items by the most popular Content Fragments based on analytics data.  
  • Duration: If Most Popular is the option selected, users will need to set a range of days from the dropdown, selecting between Past 7, 30, 60, 90 days, or All Time.
• Sort Order: Select either Ascending or Descending order.
  
• List Item Background Color: Setting a color will give each returned item in the list its own background color. 
• Error/No Results Message: RTE field that allows users to display a custom message when the Content Fragment List either returns no results or has an error.
• ID & Class: Set an ID and/or Class to the component for CSS targeting.

Here you will set up which properties will show up for each item in your list, and determine if and how each list item will link.

• Link Entire Content Fragment Item: Select this if the entire list items should hyperlink. Please note, that if you have linked any individual element within your Content Fragment List, then this option will not be selectable. 
  
  • Element Field Name: Select the content fragment element which contains the linking data which will be applied to the full listing.
    
  • Open in New Tab: Will open link in a new browser window.
  • This is an Email Address: Will open item as a new email using the users default email software

  • This is a Phone Number: Will open the item as a tel: hyperlink.

• Elements: Select (a) field(s) from the Content Fragment model to display in the results.
  • Element: Select a field from the Content Fragment model to use.
  • Element Type: Select the column type this column is. Choose between Asset, Date, Image, Link List, Tag, or Text. The element type you choose should match the Element field and can impact how this element displays options or sorts in your list.  
    • Asset:
      • Show Asset Icon: When checked, will display an icon to the left of the asset title matching the type of asset.
      • Open in New Tab: When checked, will open the linked item in a new tab.
    • Date:
      • Date Display Format: Display dates as either Date only, Date/Time, or Time only.
      • Display Results: Displays results from either Future Dates, Past Dates, Before (Now), After (Now), or by Date Ranges.
      • Start Date/End Date: When using Date Range, users need to specify Start Date and End Date ranges.
      • Show Date as Icon: When checked, the date-related element will display as an Event/Calendar-styled element. Only 1 Date element may be checked at a time.
    • Tag:
      • Column Tags: Allows users to set the root path of tags that are allowed to be inserted.
      • Match: Match against Any or All tags listed.
    • Text:
      • Search Operator: Determines the logic used for comparing text for matching results. Includes Contains, Is Equal To, or Is Not Equal To.
      • Keyword: Supply a keyword to match against with the Search Operator field above.
    • Element Field Name Label Styling: If you want a label to display for this element, then select the correct CSS styling. Set to "hidden" if you do not need a display label.
    • Element Value Styling: Set the style you would like to use for your element's display.
    • Enable Filter: For supported Element Types, when checked, enables a visible Filter for this element at the top of the component.
    • Link Element: Select this if you want the element to link.
      • Link Field: Select an element to use for the Link Field source. Users may also use the Dynamic Page Link for creating dynamic pages.
      • Open in New Tab: For these linked Elements only (not Link Entire Item). When checked, opens links in a new tab instead of the same tab.
      • This is an Email Address: When checked, links are prepended with "mailto:" so when links are clicked, email applications are opened on the user's local device.
      • This is a Phone Number: When checked, links are prepended with "tel:" so when links are clicked, phone/calling applications are opened on the user's local device.
    • Element Label Class Name: Allows the user to specify a specific class name for this element's label for CSS targeting.
    • Element Value Class Name: Allows the user to specify a specific class name for this element's value for CSS targeting.

Below is an example of a Content Fragment List built by listing the Services within the Department of Aging.  Set to a single column listed alphabetically, with sorting turned on.

Each element in the list displays the "Title" of the agency which links through to the "Site Link" set in the Content Fragment.  A "Description" is also set to display, but with no linking applied.

Below is an example of a Content Fragment List built by content fragments within a parent folder.  The list is set to a 3-column layout.  

In properties, the content fragment list is configured with Headers based on the an Option field titled "Is your puppy a boy or a girl" which arranges the puppies by gender.

In the Elements tab, we have set the list to "Link Entire Element" which causes each element in the content fragment to act as a hyperlink.