Mapping Data from an XM Data Source to a Component

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

1. Add an element to the component, or select an existing element.
2. 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.
3. Select Mapped to open the Data collection dialog.
   
   
   
   
   
   
   
4. In the Source step of the dialog, choose the appropriate XM data source from the drop-down list.
   
   
   
   
   
   
   
5. 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.
   
   
   
   
   
   
6. 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:

1. Go to the Data Sources tab and click Add Data Source.
2. Enter a unique name and description for the data source.
3. 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.

4. 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.
5. 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:

1. In the Content Editor, navigate to the Settings folder of the site where you want to add the data source.
2. 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:

1. Add a new element to the component, or select an existing element.
2. 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.
3. Click Mapped to open the Data collection dialog.
4. In the Source step of the dialog, select the relevant data source from the drop-down menu.
   
   
   
   
   
   
5. 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.
   
   
   
   
6. 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.

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:

1. In the Components builder, select the attribute you want to assign a fallback to.

2. In the Content section on the right pane, click Fallback.

3. 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.

4. 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:

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

To create different renderings for various screen sizes, you need to create a new version for each size. You can speed up this process by duplicating an existing version. Any adjustments made to a specific version will apply across all the selected breakpoint sizes.

Steps to Create a Version for a Defined Breakpoint or Group of Breakpoints:

1. In the Components Builder, duplicate the component by clicking Duplicate version as many times as needed to create the required versions.
2. For each version, click Breakpoint settings.
3. Select the breakpoint(s) you want to assign to that version. You must choose at least one breakpoint from the drop-down menu. For example, you can create a version called Mobile devices for the extra small and small breakpoints, one called Tablets for the medium breakpoint, and one called Desktops for the large, extra large, and extra extra large breakpoints.

Default Breakpoints Available:

• Extra Extra Large: More than 1400 px
• Extra Large: 1200 px to 1400 px
• Large: 992 px to 1199 px
• Medium: 768 px to 991 px
• Small: 576 px to 767 px
• Extra Small: Less than 576 px

Responsive bundles

1. Once you have completed the designs, click Stage above each version you wish to include in the bundle. Alternatively, to stage all versions of the component at once, click outside of the versions to open the Overview pane on the right-hand side, then select Stage all.
   
   
   
   
   
   
2. To ensure the correct breakpoints are assigned to the right versions, go to the Overview pane and click Default bundle in the Responsive bundles section. If necessary, you can assign different versions to specific breakpoints by selecting the appropriate version from the drop-down list. Note that only staged versions designed for the relevant breakpoints will be available to select.
   
   
   
   
   
   
   
3. If you want specific versions to be available as stand-alone components in Pages (without using a responsive bundle), go to the Overview pane. In the Specific versions section, click Available versions in Pages, then select Allow to use as a specific version.
4. To use the responsive bundle or a specific version in a webpage, go to Pages and drag the component into the desired placeholder. In the right-hand pane, select either the responsive bundle or the specific version you want to use. If you are using a custom page builder, you can also click Get the embedding code to use the component.
   
   
   
   
   
   

Customizing an Element

Elements are assigned one or more styles in the Styles library. When used in a component, the element is styled based on the theme selected for that component. However, you can change the default style by selecting a different style from the Styles library or other available styles.

Customizing a Style

To customize a style by modifying one or more features:

1. In the Components builder, select the element you want to style by either clicking it on the canvas or using the context toolbar in the bottom-left corner of the component.
2. At the top of the right-hand pane, under the Style section, click the tile to open the Styles picker and select the style you want to customize.
3. To modify a specific feature of the style (e.g., Typography or Spacing), click the relevant option.
4. Enable the "Show all available styles" option to view all styles built in the Styles builder. You can choose from additional styles assigned to the element or select any style from the library, even if not originally assigned. Note that using extra options will detach the style from the original element, indicated by a warning icon.

Creating a One-Off Customization of a Style

To create a one-off customization by configuring one or more features of a style:

1. In the Components builder, select the element you want to style by clicking it on the canvas or using the context toolbar in the bottom-left corner.
2. At the top of the right-hand pane, under the Style section, click the tile to open the Styles picker and choose the style you wish to customize.
3. Select the feature of the style you want to modify (e.g., Typography or Spacing).
4. Click the options menu (three dots) and choose Custom.
5. The right-hand pane will display the configuration settings from the Styles builder, allowing you to create a one-off custom design.

Defining graphics in the Styles Library ensures that all visual assets, such as logos and icons, are used consistently across your website. This helps maintain User Experience, Brand Consistency, and Optimized Graphics.

It is highly recommended to create collections and organize graphics within them for better management.

To create a new graphic collection:

1. Navigate to the Graphics tab in the left Styles menu.
2. Click Add collection at the top right corner of the page.
3. Name your new graphic collection and click Save.

To add a graphic to a collection:

1. In the desired graphic collection, click Create.
2. Assign the graphic a unique name and confirm which collection it belongs to.
3. Paste the image or icon URL.
4. Click Save.

Breakpoints:

You can create custom breakpoints for your website and organize them into collections. Breakpoints are sorted from the largest to the smallest within each collection, helping you manage Responsive Design and User Experience effectively.

To create a new breakpoint collection:

1. In the Styles builder, click Breakpoints in the left pane.
2. Click Add collection.
3. Assign a unique name to your collection.
4. Click Save.

To add a breakpoint to a collection:

1. In the desired breakpoint collection, click Create.
2. Name the breakpoint (e.g., Large for big screens, Medium for tablets, or Small for mobiles).
3. From the drop-down menu, select the collection the breakpoint belongs to.
4. Enter the pixel values for when the breakpoint starts and ends. Ensure that breakpoints do not overlap, as this can cause issues with responsive components on a webpage.
5. Click Save.

In Sitecore XM Cloud Components, you can build style rules to extend design primitives and apply them to elements. Rules such as Typographies, Decorations, Fills, and Spacing utilize the basics (fonts and colors) you've previously added to the Styles library. You can also incorporate custom CSS styles into these rules.

Typographies:

Typographies are extensions of fonts with defined sizing for each font type.

To create a new typography collection:

1. In the Styles builder, click Typographies in the left pane.
2. Click Add collection.
3. Assign a unique name to your collection.
4. Click Save.

To add a new typography:

1. In the desired typography collection, click Create (+ icon).
2. Enter a name for the typography (e.g., Article headline).
3. On the Font type tab, select a font (only Google fonts are available).
4. On the Settings tab, configure values for font size, line height, letter spacing, paragraph spacing, icon size, and case style. Set these values independently for different breakpoints.
   
   
   
   
   
   
5. Click Save to add the typography to the Styles library.

Decorations:

Decorations allow you to add visual accents like borders and drop shadows to elements and blocks.

To create a new decoration collection:

1. In the Styles builder, click Decorations in the left pane.
2. Click Add collection.
3. Assign a unique name to your collection.
4. Click Save.

To add a new decoration:

1. In the desired decoration collection, click Create (+ icon).
2. Enter a name for the decoration.
3. On the Corner radius tab, define rounded corners for elements and blocks.
4. On the Drop shadow tab, configure shadows for elements and blocks.
5. On the Border tab, add borders or border shadows to elements and blocks.
6. Click Save to add the decoration to the Styles library.

Fills:

Fills allow you to add background colors or gradients to cards, buttons, or sections.

To create a new fill collection:

1. In the Styles builder, click Fills in the left pane.
2. Click Add collection.
3. Assign a unique name to your collection.
4. Click Save.

To add a new fill:

1. In the desired fill collection, click Create (+ icon).
2. Enter a name for the fill and select the collection it belongs to.
3. On the Color tab, choose a previously defined color or create a gradient with options for the gradient angle and color opacity.
4. On the Effects tab, set the blur intensity and opacity for the fill.
5. Click Save to add the fill to the Styles library.

Spacing:

Spacing defines grid arrangements such as padding and gaps for layout components.

To create a new spacing collection:

1. In the Styles builder, click Spacing in the left pane.
2. Click Add collection.
3. Assign a unique name to your collection.
4. Click Save.

To add a new spacing rule:

1. In the desired spacing collection, click Create (+ icon).
2. Enter a name for the spacing.
3. On the Spacing tab, define padding and gap values in pixels, percentages, em, or rem. Choose from the following options:
   • Sync: Makes all padding and gap values the same.
   • Sides (Vertical/Horizontal): Combines top and bottom or horizontal padding values.
   • All custom: Customizes padding and gap values for top, right, bottom, left, vertical, and horizontal spaces.
4. It’s best practice to set values for all three configurations to easily choose the one you need in the Components builder.
5. Optionally, add custom CSS.
6. Click Save to add the spacing rule to the Styles library.