Working with Component Builder in Sitecore XM Cloud

In my previous blog, I have guided to setup Next.js app in Sitecore XM Cloud instance. In this blog, I wanted to explain how you can connect your cloned Nextjs App with your XM Cloud instance.

BUT I thought as we have not built any component yet for site home page or any page and it will look odd to see a blank page after configuring and running on the local machine. So, I thought building a component using XM Cloud Component Builder first and then will checkout configuring Nextjs app in next blog.

Creating Component using Component Builder

Step 1: Login into your Sitecore XM Cloud account and click on your app.

On the right pane, click on Open app button.

Step 2: On the menu bar, click on Components

Step 3: Create Component Collection

This is the group of component under a single collection. This collection will be visible in Page builder and it become easy to search from categorised the components based on their nature or type.

Step 4: Choose a name to collection

Step 5: Add component in the collection, Click on Create new component.

Step 6: Give a name to component.

Step 7: Using canvas to create elements. This section is actually called component builder.

Step 8: Adding elements to the grid.

Step 9: Selecting card element and occupying the space

While building your component you can checkout the properties on left side pane. You can change the basic styles and other properties based on the element.

Step 10: Publish Component 

So till now your component is ready to be applied on some page.

Step 11: Home page item is by default and under that i have create a new page item called about-me.

In this step we will be applying the our newly created component to main container.

Step 12: Applying Component from Collection

You can preview the page at anytime to see the changes.

Step 13: Using Out-of-the-box XM Cloud Components. For header, i wanted to use in built component.

I will use Link List and will create a new Data Source

Step 14: Creating Data Source Item

Step 15: Editing list item

Adding link items and navigating to Content editor from page builder directly.

Step 16: Working on Content Editor

Basically we have created a data source item, which Link List component will consume. We can re-use the same data source item for other pages as well.

Step 17: Publish Changes

Step 18: Using Preview option to view the page

Step 19: Creating another page item

Below is the glimpse of Component collections and other available components

Conclusion:

In the blog, I have create 2 components using XM Cloud Component builder and out-of-the-box component list with data source item. Both the components are applied on page using Page Builder. The idea was to ready our pages so that when we run the local nextjs app, then we can see them on local machine. In the next blog i will configure the next.js app with xm cloud. 


Comments

Post a Comment

Popular posts from this blog

Working with Device Detection Module in Sitecore

Image
  What is Device Detection in Sitecore? Sitecore has an in-built feature called Device Detection which helps to detect at which device the content is shown into. When I say in-built that means its included as a standard feature in Sitecore XP 9.0 and later. This feature is also present in Sitecore XM Cloud , hence you do not need to buy a separate add-on or module to utilize device detection features.   The information gather from Device Detection Module can help content makers, allowing them to tailor the website experience based on the device type they are accessing it with, such as by displaying different layouts or content depending on screen size and capabilities. For Example, An iPhone and Android users might be looking at different content on same page.   Moreover, developers uses the same mechanism to personalize the components based on the device specific audience. They can setup Device Layout based on specific device parameters or can use the in-built rules...
Read more

Setup A/B Testing in Sitecore - Part 1

Image
  Setup A/B Testing in Sitecore - Part 1 In this article we will understand What is A/B Testing, Types of Testing in Sitecore, Actual Use Case and later we will see how we can setup A/B Testing in Sitecore XP solution with Rendering having different data source items.   Before we go further, lets understand WHAT IS A/B Testing ? A/B testing, also known as split testing, is a method used in marketing and product development to compare two versions of something to determine which one performs better. In an A/B test, two versions, A and B, are created, with one varying element between them. This element could be anything from the wording of an email subject line, the design of a web page, the placement of a button, or even the pricing of a product.   The versions, A and B, are then randomly  shown to similar audiences or users, and their responses are measured and compared. The version that performs better in terms of predefined metrics (such as click-through rate, conv...
Read more

Resolving: Failed to start service Sitecore Marketing Automation Engine Error

Image
  Description: In this blog, I will try to show you that how you can solve the common issue you might face while installing Sitecore 10.4 version XP Single On Premises. Sitecore Download Link: https://developers.sitecore.com/downloads/Sitecore_Experience_Platform/104/Sitecore_Experience_Platform_104 During installation of Sitecore 10.4 on my new device I got below error:   Misconceptions : Since the installation gets interrupted and we get only one option to close the Sitecore Install Assistance tool, The common mis conception arises while re-installing the Sitecore is that should I provide new Solr service name again? And/or should I provide new Sitecore instance name? The answer is NO . You can simply skip Install Solr Service Step: Then on next window provide the same Sitecore prefix or instance name which you provided earlier: Sitecore will override new files on previously created folders or services. Point to remember: Before you re-start you...
Read more