Content Fragment Display

This component allows you to curate a page using individual or multiple fields sourced from a specific Content Fragment. The fragment can be determined dynamically by a slug passed into the page URL or selected statically in the component dialog(s). The goal of this component is to help build reusable dynamic page(s) that surface Content Fragment-driven data.

Think of it as a Master/Detail view: you create the "master" list using components such as a Content Fragment List or Content Fragment Data Table control, and then link to a dynamic "details" page containing one or more of these components to display the full details of a specific record.

How It Differs

Unlike a Content Fragment List or DataTable component, which displays multiple fragments in a condensed format, this component focuses on presenting an in-depth, comprehensive view of a single fragment. This allows you to show detailed information and additional fields that wouldn’t be practical in a list/table view. You also have full control over:

• Which fields from the fragment are displayed
• How each field is formatted for presentation

Flexible Layout

You can use a single instance of this component for a linear detail view or place multiple instances on a page to create a highly customized layout tailored to your design needs. For example, you can use all the normal container, columns, and other layout related controls on the page along with multiple instances of the Content Fragment Display Components to create a ornate page layout to showcase a individual record entry as a personnel bio page or product page.

Example Use Case

An agency wants to display a listing of licensed vendors. Each vendor has a Content Fragment Model containing details such as address, phone number, website, products, and board members. Instead of creating individual pages for every vendor, you can:

1. Build your Content Fragment Model
2. Create Content Fragments with all your vendors, populating fields for each vendor.
3. Build a directory listing page with a Content Fragment DataTable with minimal info (e.g., name, city, county), but with filtering and searching capabilities to aid in user searching.
4. Link each name to a dynamic page where you have a standard custom layout for the directory details page for the vendor. This can show the vendors NAme as a H1, Address as "small" and short bio of the company as a standard paragraph tag, followed by a seperator and then the phone number, email, etc..

This approach ensures consistency in branding and presentation while reducing maintenance overhead of creating a page per vendor.

Prerequisites

Before using this component, ensure you have:

• A Content Fragment Model defined for your data structure. This has to be done by EAS Web Services at this time.
• Content Fragments created and published based on that model.
• (Optional) A dynamic page configured to accept a slug parameter for fragment selection.

See also guides for Content Fragment Data List, Content Fragment Data Tables, Content Fragment Container, Content Fragment Models

Once you have placed your content fragment on a page, configure the Content Fragment Properties.

• Content Fragment: point to the content fragment you would like to display
• Select whether you want a Specific Content Fragment or a Dynamic Content Fragment.
  • Specific fragments will always show the selected fragment.
  • Dynamic fragments will use the selected fragment's Model and Path to determine the list of fragments that will be able to be displayed dynamically on page load. These are known as Dynamic Pages.
• Content Fragment Name Styling: If you would like to display the name of your content fragment, select a CSS style. If you don't want to display the Title select "hidden."
• 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.
      • Show label if value is blank?: When checked, the field and label will still be rendered instead of hidden when blank.
      • 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.
    • Experience Fragment:
      • Set the Label and Value Styling. Paragraph is forced for the Element Value Styling.
      • Show label if value is blank?: When checked, the field and label will still be rendered instead of hidden when blank.
    • Link List:
      • Set the Label and Value Styling. Paragraph is forced for the Element Value Styling.
      • Show label if value is blank?: When checked, the field and label will still be rendered instead of hidden when blank.
    • 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.

In the following example, we have pointed to a specific puppy within our custom content fragment model "Puppies."

We've added the elements "Image" and "Description" to the display.