Creating Component in XM Cloud using Component Builder

Hello everyone, in this blog we will see how we can build a Aricle Block Card Element in XM Cloud using Component Builder feature.This blog assume, you have created a project in XM Cloud portal.

Step 1: Login to XM Cloud Portal. Once logged in, navigate to XM CLoud Deploy APP. Select your Project-->Environment-->Click the latest deployment Date Created-->Deployment logs page open ups.--> Click Go to XM Cloud-->You will see a page with List of Sites created.

.

Step 2:Click Tools-->Components-->This will open component builder page.Here we will create our component.

Step 3:Click Add collection(this will contain our custom components which is created).This will open a dialog as shown below. Fill your details by giving a meaningful name to collection.

Step 4:Inside your collection, there will be an option to ADD Component.Give a meaningful name to your component and save.Just click on that.Follow below screenshot.

Step 5:Now we can see your component is shown in Component builder page. Just click Edit Component. You will get below screen. In this screen, it will come up with predefined section element of Html.Click this section, we will see the element which can be used to build you components. In this section, we will add our custom HTML element and will create the Article Block Component

You can change the padding of section element also.Select the section, in right side, you will get all options regarding that Html element. Just click spacing and you are good to go. Just refer below screenshot.

Step 6: We will be using Card,Header,Link,Paragraph and Image element to build Article Block Component.In Section, just add card component. Our Grid is 5(rows) by 12(column). We will divide the section into two half section. On Right side, we will add Card element. On Left Side, we will add Image element.The Card element will have a Header element,paragraph element and Link element.The Image element will hold our image.Follow below screenshot for your reference.

Step 7:Click on Section element. You will get Add element option. Click on it and select Card.Then select Append inside Section button.Once Card element is added, just resize the component to support right section. You can also change the padding of card element as mentioned above for section element.

Step 8: Now select Card element and add the other element required shown below. Just check befor adding any element, where it is getting added. In our case, we are adding under Card element. Section-->Card-->(h5,paragrapg,Link)

For Link, just use link property in right side to give a specific link. Ideally this will come from template but for now we will use static link.

Step 9:Now in left section add Image element from add element option. Follow below screenshot for reference.

For Image, just use Image Source property in right side to give a specific image. Ideally this will come from template but for now we will use static link.

Step 10:Once our component is completed, just stage the component and publish the component. Once published it will show up in available components to be used in Pages available. Follow the below screenshot for your reference.

Also, we can create different variation for different devices. For current development, we have restricted the above component to not show on small devices.

Step 11: Publish your page and you will be able to see your changes on the page.

Thanks for reading and hope this blog provide you some clarification how we can go and build the components. In next blog, we will see how we can change our static data to data coming from Sitecore template.

You can check my other blogs too if interested. Blog Website