Dynamic Related List

The Dynamic Related List component allows authors to display a list of related content fragments based on a single tag property that matches between two different lists of content fragments that may have the same or different models. Observe the example below, and consult with the DoIT WCM team to ensure content fragment models are set up with the necessary properties.

The the Dynamic Related List component can be set up on a dynamic page without any other components if needed. In order to best demonstrate this feature, the Content Fragment Display component is used on the same sample page in the examples below.

Step 1 section (source)

• Model: point to the source content fragment you would like the target content fragment list to be compared to.
• Root Path: point to the parent path of the source content fragments (using the same model as above).
• Model Property to Match Related List: select the property of the source content fragment to compare with the target content fragment list. The dropdown allows for selecting only tag properties.
• Match: Choose "Any tag" to match any tags between the source content fragment and the target content fragment list. Choose "All tags" to require that all tags defined in the source content fragment matches exactly with the target content fragment list.

Step 2: Related List Configuration (target content fragment list)

• Build Related List using: Choose "Content Fragment".
• Model of Related List: Choose the second content fragment model, that can differ from the content fragment model chosen in step 1 above.  The content fragments using this model will be displayed in the target content fragment list on the page.
• Root Path: Enter the parent path that contains the content fragments that use the content fragment model set in "Model of Related List" field.
• Step 2 Model Property to Compare with Step 1 Model Property: select the property of the target content fragments to compare with the source content fragment. The dropdown allows for selecting only tag properties. The tag property must use the same tag set as the content fragment model chosen in step 1 above.

Additonal Display Settings (optional)

• Display Header, Paginate, Max Items, Order by, Sort Order, Error/No Results Message are optional settings that can be authored to display list item results

Elements Tab

• Elements: Select which elements from the content fragment you would like to display.
  • Element Field Name: Authoring settings will vary based on the variables which define the Content Fragment.
  • Element Type: Will determine how this field will display. Depending on Element Type, authoring settings will vary:
    • Text
      • Field Name Label Styling. Select CSS style or select "hidden" if you do not want to display the label
        • If you choose to display the label, it will not display unless there is a value for this particular element. However, the option to "Show Label if Value is Blank" if you prefer.  
      • Element Value Styling: Choose CSS Style
      • Paragraphs: Determine if you want to use all paragraphs, or limit to a range. For instance '1; 3-5; 7; 9-*' to include the 1st and 7th paragraphs, the 3rd to 5th ones, and from the 9th to the end.
      • Link Element: If selected you will pick which Content Fragment element contains the linking data.
    • Image
      • Label Styling: Select CSS display rule or select "hidden" if you don't need to display the Label.
        • If you choose to display the label, it will not display unless there is a value for this particular element. However, the option to "Show Label if Value is Blank" if you prefer.  
      • Link Element: If you would like the image to link, select a Content Fragment field that contains the URL, email, phone, or other linking data.
    • Asset
      • Set the Field Name Label Styling or select Hidden if you don't want to display.
        • If you choose to display the label, it will not display unless there is a value for this particular element. However, the option to "Show Label if Value is Blank" if you prefer.  
      • Set the Element's Value Styling
      • Asset Icon: Check this box if you would like an asset icon to appear next to this element.
      • Open in New Tab. Since this is an Asset, when displayed, this element will link to download the asset. Check this box if you would like the download to start in a new tab.
    • Date:
      • Set the Label and Value Styling.
        • If you choose to display the label, it will not display unless there is a value for this particular element. However, the option to "Show Label if Value is Blank" if you prefer.  
      • Chick the "Link Element" box if you would like the image to link, then select a Content Fragment field that contains the URL, email, phone, or other linking data.
      • Date Display Format: You have the option to choose how you want the date to display:
        • Date Only: Will display the Day of the week and Date.
        • Date and Time: Will display the Day of the Week, Date, and Time.
        • Time Only: Will only display time.
          
          
    • Tag:
      • Set the Label and Value Styling.
      • Chick the "Link Element" box if you would like the image to link, then select a Content Fragment field that contains the URL, email, phone, or other linking data.

See live example on the DoIT agency site. Products use different content fragment models, but share similar tag properties, which allow for the Dynamic Related List to display related items on the right-hand side.

DoIT Related Products Example

See link below for example of dynamic page using Content Fragment Display component to render a puppy using the "Puppies" content fragment model. At the bottom of the example page, there is a list of related wolf puppies that use a different content fragment model, "Wolves". The two content fragment models contain the same "Puppies qualities" tag field, which contain the same tag set to choose from. 

The Puffy Puppy content fragment rendered on the page contains the "Cute" and "Furry" tag. While the "Ralpf Wolf" content fragment renders in the Dynamic Related List component because it contains the same "Cute" tag. The "Rama Wolf" content fragment also renders in the list, due to it containing "Cute" and "Fluffy" tag that matches Puffy Puppy. Notice how the third wolf, "Big Bad Wolf" does not render in the list on the example page, because that content fragment has the "Playful" tag, and does not match to any of the Puffy Puppy content fragment tags.

Dog and Wolf Puppies Example