Adding dynamic content to a component
Dynamic content allows components to be flexible and re-usable in different contexts. Text, images, videos, and links can be populated from a data source, like a CMS or a database, as long as the data source has an API and has been added to the Data Sources library of Components.
Components are built with elements: for example, a Button, a Card, or another Component.
Elements contain one or more attributes which affect what the element displays: for example, a Variable is defined by the attribute Text, but an Image element has several attributes such as Image source, Caption, Alt text.
For each attribute, you can choose to add content according to the following options:
-
None – Add no content to an attribute, for example, you can choose to not have any Alt text for an Image.
-
Static - You can define specific content for the attribute, for example enter a text for the attribute Alt text of an Image, or upload an image from your computer for a Background image attribute.
-
Mapped – You can choose to map the attribute with text, image, or link from a data source that was previously added to your XM Cloud environment. You can use dynamic content multiple times within a single element, even using different data sources. You can also mix static and dynamic text inside one text element by combining regular text with the variables, such as Price: {price}USD or By {author} in {category}.
When using mapped data, you can select:
-
A unique property from the data tree. That property is a content item if the data source is external. However, that property corresponds to a template if you are using a XM data source, and you have first to stage the component to the page builder and insert it in a webpage to assign the content item that fits the template.
-
An object (a parent folder that contains several properties) when you want to repeat the element according to the number of properties included in the object.