Sitecore XM Cloud - 5 ways to create No code web site components with XM Cloud Component Builder

Hi People,

First of all congratulations to all 2024 MVPs, Last year has been a community year where we saw lot of new MVPs and lot of new content coming from lot of people, Good learnings.

I wanted to share some articles on the real discoveries and headless implementation we did and journey we had and what all things were involved in it etc. but i will bring that later on.

Today i am going to talk about "Component Builder", Amazing tool of Sitecore XM Cloud, Last year i did lot of research and hands on to "XM Cloud Component Builder", Very powerful futuristic tooling provided by Sitecore.

At that time it was still in "Early Access" phase, but now the offering is fully available, i wanted to revisit and provide almost all the info related to it and will also show, How to create fully functional website without writing any code, yes "It is low code / no code".

Last year i presented at SUGCON-2023-India on "FeaaS - Front End As A Service" which talked on the same line, but this blog will cover all what you can do with the component builder, So many possibilities and a new ways of working

You can find the video of the SUGCON presentation on this link here 

 If you are a podcast lover, You can also see the podcast here too

You can find everything related to component builder and the what / why / how on my PPT here 

I will highly encourage to go through the PPT too, because it covers lot of research about component builder.

Let's start with what all you can do with it and possibilities are endless.

How many ways you can create Components in XM Cloud Component Builder?

There are majorly 5 possibilities in three distinct categories using which you can create components, Sitecore has not bifurcated xm cloud components in these three categories, it is just me breaking them down into these three categories for better understanding.

1) Static Components - By using elements available to be dragged & dropped onto the canvas

Static components means, very quick and dirty way to create a component, basically you just use the component builder canvas and start drawing different elements like inline or block elements ex. H1, H2 or paragraph, cards etc. and start putting contents into it, You can even copy and paste contents from existing site and it will try to adopt its styling too.

When you stage it or publish it it gets stored as azure blob as a web components, it will have its own HTML tag and everything will be wrapped under that html tag, (Read more in my PPT about all these)

In the example below, I took https://www.sugcon.events/ site as an example, if i want to quickly just create simple component out of it by using static components approach

The moment i "Stage" the component, it will be available for me to use it on pages, all these information.

2) Dynamic Components - By using external data sources and mapping them to elements, Here before creating a component, first what you do is "Create a datasource", And to do that you go to "Data Sources" tab and start adding data sources of your choice,  In below image you can see i have three types of data source created

All these three are explained below.

• Using Static JSON and map fields with elements

Here, use case can be if you have a service which is behind the fire wall, and you can only hit it once to get the response and you only have that JSON, Or take example of sugcon speaker list, that JSON is static once speaker are locked and it will not change, so in this scenario, you can just take that JSON and paste it in the "Paste JSON" tab option while creating a data source like following 

 

• Consuming an API which provides JSON and map the schema with elements

You can actually make a call to your REST APIs or any APIs, which returns you the JSON results, and make use of that.

• Using GQL by reading external services

Use cases for GQL are many, any content which is out there on experience edge or edge network or anywhere which supports GQL query, you can use that to retrieve data map it with your component, in below example, I am getting featured blogs from the context item, which is returning me the JSON schema.

 

• By using a standard Sitecore data source and use those fields to map it to elements, this being detailed one, I have a separate blog for it, I will update the link once the blog is out.

3) BYOC (Bring Your Own Code/Components)

BYOC is the way developers can Bring Their Own Code into XM Cloud Component Builder, that means if you have your react or NextJS component library already created, you can actually use them straight into Pages in XM Cloud.

This is one of the powerful feature where your existing library can be included with simple steps and you will get that ROI (Return On Investment) because your existing code will be still reusable

I have blogged in detail about how to create and use BYOC in XM Cloud, I will also link that blog here once it is published.

I hope it gives you idea about the power of component builder.