Over 10 years we help companies reach their financial and branding goals. Engitech is a values-driven technology agency dedicated.

Gallery

Contacts

411 University St, Seattle, USA

engitech@oceanthemes.net

+1 -800-456-478-23

Sitecore (Koushik) Technology
XM Cloud Component Builder

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.

XM Cloud tools menu with Components
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.

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

Creating sample components

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

Creating new component interface
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-

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

Component selection menu
Step 7: Now click on Append Insight Section

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

Card layout with image

XM Cloud text and inline elements
Step 9: Add some text to the Rich text element, you can assign stile from right panel

Card with text and image
Step 10: Now select the Image element and add the image source from right panel
Image with text and mountain scenery

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

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

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

References:   Building components | Sitecore Documentation

×