Exploring XM Cloud Component Builder: Show Dynamic Content

_ October 25, 2024_ Koushik Mukherjee

In my previous blogs on XM Cloud, I covered how to create and display static data using the component builder, as well as how to style and build different versions of a component. In this post, I’ll focus on creating a dynamic data source for components.

Dynamic content enables components to be flexible and reusable across different contexts. Content such as text, images, videos, and links can be populated from various sources, like CMS content, APIs, or a GraphQL URL.

Components are composed of elements such as buttons, cards, or other components, and each element can have a data source assigned to it. There are two primary options for displaying content within a component:

Static – You can define static content for an attribute, such as entering alt text for an image or uploading an image directly.
Mapped – You can map the attribute to dynamic content (text, image, or link) from a data source previously added to your XM Cloud environment. This dynamic content can be used multiple times within a single element, even from different sources. It’s also possible to mix static and dynamic text within one text element by combining regular text with variables.

Creating Data Source Content for a Component

When using an XM data source within a component, rather than defining a specific content item to map data, you create a template representing the data you want to insert into the Sitecore component. Later, once your component is staged and used in the page builder, you can assign a compatible content item based on this template.

Steps to Prepare an XM Data Source in Components

Open the Content Editor.
Create a new template, for example, in Templates/Feature/Webinar.
In the content tree on the left pane, navigate to sitecore/Content/Site name/Site name/Settings.
In the Site configuration section, locate FEAAS component data source templates and select the template(s) you want to add to the component builder, making them appear in the right-hand field.
Click on the templates in the Content Editor to make them available as data sources within Components.
Click Save.
Go to Components, and on the Data sources tab, you’ll see the new XM data source listed among the available data sources.

Mapping Data from an XM Data Source to a Component

To map data from an XM data source to a component:

Add an element to the component, or select an existing element.
In the right-hand pane, go to the Content section, and click the attribute you want to configure for the selected element. For example, with an Image element, you can configure attributes such as Image source, Caption, Alternative text, or Link using mapped data.
Select Mapped to open the Data collection dialog.
In the Source step of the dialog, choose the appropriate XM data source from the drop-down list.
In the Path step, the data tree will show relevant properties that can serve as values for the attribute. Click the desired property for the attribute.
Click Complete to finish the mapping process.

Adding an External Data Source in XM Cloud Components

In the Components builder, mapping data to a component helps the component recognize the structure of an external data source. By using a sample JSON structure, you can teach components to interpret data accurately.

To add an external data source to XM Cloud Components:

Go to the Data Sources tab and click Add Data Source.
Enter a unique name and description for the data source.
To populate the data source field with structured sample data, choose one of the following options:
- Paste raw JSON: Paste raw JSON data directly.
- Fetch from URL: Enter the URL endpoint from which to retrieve the data and click Fetch.
- GraphQL: Enter the GraphQL endpoint URL and click Fetch.
The data will be retrieved along with any key-value pairs in Params, Header, or Body sections and displayed as a tree on the right.
Once the data tree reflects the correct structure and fields, click Save to complete adding the data source.

Adding a Data Source in XM Cloud Components via the Content Editor

You can also use the Content Editor to add a data source in XM Cloud Components.

To add a data source:

In the Content Editor, navigate to the Settings folder of the site where you want to add the data source.
In the editor view, under Site Configuration, locate the FEaaS component editor script URL field and paste the URL of your data source.

Mapping Data from an External Data Source to a Component

To map data from an external source to a component:

Add a new element to the component, or select an existing element.
In the Content section of the right-hand pane, choose the attribute you want to configure for the selected element. For instance, an Image element can be mapped to attributes like Image source, Caption, Alternative text, or Link.
Click Mapped to open the Data collection dialog.
In the Source step of the dialog, select the relevant data source from the drop-down menu.
In the Path step, the data tree will display the available properties that can serve as values for the attribute. Select the appropriate property for the attribute.
When the data source contains multiple records of the same object and Data scope > Data collection is set to Mapped, the dialog will include a third step called Items. Here, you can specify how the data should be repeated when setting up a repeater for the element:

- All: Repeat the element for every item in the data source collection.
- Limit: Repeat the element only for the first items in the collection.
- Specify: Choose specific items to repeat based on their position in the list.

7. After setting up the repetition, you can preview in the component’s canvas to see how it will appear based on the selected data source.

8. Finally, click Complete to finish the mapping.

Below are the two important practice you should do-

Defining a Fallback for Missing Mapped Data

You can set a fallback strategy for cases when the data source mapped to an attribute is unavailable. Follow below steps to define fallback data:

In the Components builder, select the attribute you want to assign a fallback to.
In the Content section on the right pane, click Fallback.
Based on your fallback strategy, choose one of the following options:
- Nothing – Leaves the element visible, even with the missing attribute.
- Hide – Hides the entire element.
- Show fallback – Displays specified static text, an image, or a link in place of the missing data.
If you select a fallback option, enter the fallback content in the designated field. For images, specify a default image URL.

Updating a Data Source

When a remote data source is updated, the version added to XM Cloud Components does not automatically fetch these updates. If the data source has changed, you’ll be prompted to fetch the latest data. To update a data source:

Go to the Data Sources tab and select the data source that needs updating.
In the JSON section, click Fetch.

References: Adding dynamic content to a component