Exploring XM Cloud Component Builder: A Comprehensive Guide to Building Your First Component

 

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.
Location: Kolkata, West Bengal, India

Comments

Post a Comment

Popular posts from this blog

Setup New Project in Sitecore XMCloud – Part 1

Image
In my previous blog , I discussed about the XMCloud Introduction and features of XMCloud. In this blog I will show, how to create a new Project and environments in the Sitecore XM cloud. In the next blog, I will show how easily you can set up your local app development for XM Cloud and run the Sitecore XM Cloud project on your development machine. Prerequisites: • You must have one Organization account in Sitecore portal ( https://portal.sitecorecloud.io/ ) which has access to XMCloud.  And your account should be associated with that Organization account with admin access.  • Organization must have proper Sitecore licensing to run the XMCloud site in local docker environments. • Create your own Github account to link with XMCloud project. Steps to setup your project 1. Click on “Manage My projects” menu to open https://deploy.sitecorecloud.io/projects.io/projects site to Create a new project or manage existing one. 2. Then click on “Create New Project” button to cr...
Read more

Step by Step installation of Sitecore 10.3 on Docker

Image
  In this document, we will learn how to setup Sitecore 10.3 on docker desktop in Windows 11. We shall briefly cover the step-by-step process and overview of Sitecore 10.3 setup. While doing the installation in my windows, I followed Installation Guide for Developer Workstation with Containers . Thanks, Sitecore Team! Prerequisites - To setup Sitecore 10.3 on docker, we shall need the following - Docker Desktop Installed on Windows Desktop Docker Desktop support for windows containers 16 GB of RAM Approximately 50GB of free disk space for Sitecore container images. SSD storage is highly recommended. The default Sitecore container configuration uses specific ports. To avoid any conflicts, we should ensure the following ports are not being used by another process: 443, 8079, 8081, 8984, and 14330 To check the prerequisites for Sitecore 10.3 installation, please check the below link - Support Information - Sitecore compatibility table for Sitecore XP 9.0 and later Setup Files - Docker...
Read more

Step by Step installation of Sitecore 10.3 on Azure PaaS

Image
  In this document we will learn how to setup Sitecore 10.3 XP on Azure PaaS. We shall briefly cover the step by step process and overview of Sitecore 10.3 XP setup. While doing the installation, I follow Deploying a new Sitecore environment to the Microsoft Azure App service . Thanks, Sitecore Team! Prerequisites: To setup Sitecore 10.3 on Azure PaaS, we shall need the following: Check PowerShellGet Module. If not found please install PowerShell Gallery Install the Azure Az PowerShell module. Download Sitecore Azure Toolkit 2.8.0 . This will provide a zip file that can be extracted and used for setup.  Deployment Topologies We will do the setup for Sitecore 10.3 XP. Sitecore XP product edition is the full Sitecore Experience Platform, which includes all Sitecore roles and services, including xConnect. This is a Sitecore Experience Platform configuration that runs: Three Sitecore roles: Content Delivery, Content Management, and Processing, as a single WebA...
Read more