Posts

Showing posts from October, 2024

Exploring XM Cloud Component Builder: Show Dynamic Content

Image
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 mul

Exploring XM Cloud Component Builder: Create Versions

Image
  In my previous  blog , I discussed  how to style a component, modify elements, and customize themes. In this post, I'll focus on creating different versions of a component. In XM Cloud Components, a component can have multiple visual representations, known as component versions. These versions allow us to personalize components for specific audiences in Pages. Additionally, versions and breakpoints can be used to create responsive bundles, enabling components to adjust their appearance based on screen width. Adding a Version to a Component To add a new version to a component: In the Components Builder, scroll to the bottom of the page and click Add version . If this version is intended for responsive design, specify the breakpoints at which it should be displayed. Duplicating a Component Version Once you've styled and configured a component, you can duplicate it to easily create versions with different layouts without starting from scratch. To duplicate a component version: I