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: add tags to filter your list
  • Match: Choose whether to filter your list by items which contain any tag, or all tags
• Dynamic Page Link: if items in your content list should link through to a dynamic page, specify that page here.
• Display Header: Choose if you want a header to group items in your list
  • Group By: Depending on the content fragment list model selected, you will have the ability to group items alphabetically, by date, tag or by option fields listed in ascending or descending order.
  • Element Field: Based on how you want to group items, you will need to select an element since content fragments can have multiple elements of the same type.  Here are some examples: 
    • Grouping Alphabetically: you will need to select which text field in your content fragment to alphabetize.  
    • Group by Tags: since you can have multiple tag fields in a content fragment, you must select which tag field in your content fragment from which you want to pull tags.  
    • Group by Option: Select from which option fields in your content fragment 
      
      If you opt to Group by an element that is not included in your Content Fragment model, not options will exist in this setting. 
  • Header Styling: Select the CSS style you want to style your headers
  • Sort: Choose if you want 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: If you want users to be able to search your list.
• Enable Columns: This allows you to display each item in your list in a series of columns
  • Select 2, 3, or 4 column layout
  • Max Number of Rows per Column Before Pagination
  • Content Direction: Determines if the sort order on your list sorts horizontally or vertically.
     
• Determine how many items should display before pagination for both Mobile and Desktop.
• Determine if you want 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.
  
  One option, in addition to the elements within your Content Fragment, will be "Most Popular" which will allow you to sort items by the most popular Content Fragments based on analytics data.  If this option is selected you will also be able to set a range from which to measure the content fragments popularity: 
  • Past 7 Days
    
  • Past 30 Days
  • Past 60 Days
  • Past 90 Days
  • All Time
     
• Sort Order: Elect Ascending or Descending Order
  
  
• List Item Background Color: Setting a color will frame each item in your list with its own background color block. 

Here you will set up which properites 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: Use this block to add elements to your listing display
  • ADD: will add a new element to your list display
    • Element: Select an element to display
    • Element Type: Select what type of display this should use.
      • The element type you choose should match the Element field and can impact how this element sorts in your list.  For example, in the "Puppy" example below.  If you set the "Puppy Birthday" to text, the list will sort alphabetically which is not optimal.  Instead, set the element type to "Date" so that when you sort, the list will display in chronological order instead.  
        
        
      • Take care to choose an Element Type that corresponds to the Element Selected.  For example, selecting an item type of "Date" on a Tag Element may not have any impact. 
         
    • 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: Select if you want users to be able to control filtering for this element
    • Link Element: Select this if you want the element to link.
      • Link Field: Select the content fragment field to use for linking. This is different than the element you are displaying. For example you may want the "Title" of a content fragment to link through to the official "Page URL" of the content fragment
      • 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.
    • Element Label Class Name: Allows the user to specify a specific class name for this element's label.
    • Element Value Class Name: Allows the user to specify a specific class name for this element's value.

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.