Build Your First Component | XM Cloud Builder Guide

In my previous blog, I discussed the out-of-the-box (OOTB) components of Sitecore XM Cloud. In this blog, we will explore the XM Cloud Component Builder.

XM Cloud Component Builder, currently in early access, is the recommended approach for building components for your XM Cloud applications. This Frontend as a Service (FEaaS) allows you to create your brand’s style guide and develop visual components using a WYSIWYG editor.

With the Component Builder, you can create a component from scratch or import existing ones for further customization and styling. You can map dynamic data to your components or create responsive components that adapt to different device types.

The XM Cloud Component Builder provides:

• A low-code, visual method to create new components for Sitecore.
• The ability to map content/data into these components from any source with an endpoint. It supports three methods for fetching data for Sitecore Components:
  • Static JSON: Copy and paste JSON for data mockups or hard-coded content, maintaining a separation between layers.
  • REST: An HTTP request supporting methods, URLs, and headers to access most available APIs.
  • GraphQL: A queryable API that allows specific requests for information from endpoints.

Below are the steps to create the component using component builder

 Step 1: Click on Tool in app section, and you will get option to manage component.

Step 2: You will get options to create components, style, Data Source, Publishing and Settings. In this blog we will only discuss about Components, rest options we will discuss in next blog post.

Step 3: Click on Add Collection to add your custom collection. Provide collection name and description.

Step 4: Now click on Add Component under the collection you add. Provide component Name, Description as applicable.

Step 5: Here you can style and arrange the layout, add new elements, and specify data sources. We will discuss this in detail in our upcoming blog post-

 Step 6: You can add predefined html elements for the component. I’ll add one image and a Rich text

Step 7: Now click on Append Insight Section

Step 8: Repeat same and add Rich Text as below. First add a Card and then add Rich Text Element

Step 9: Add some text to the Rich text element, you can assign stile from right panel

Step 10: Now select the Image element and add the image source from right panel

Step 11: Once done, you can stage and publish the component for use

Step 12: Finally, you can add this component to the page.

In my upcoming blog, I’ll discuss about the Component styling, Datasource , Embedded code, Versioning.

References:   Building components | Sitecore Documentation