XMCloud Sitecore Components - Visual Component builder

-

 Sitecore XMCloud introduced a new way of creating composable components.    

Sitecore Components help us to create composable components easily with less code, these components can be reused and we can able to mix and match the datasource in the component ie) 

Each field in the component can get data from different sources like API, CMS, or any system which provide properly structured data.

Datasource should be in JSON format to use in the component. The XML format is not applicable at the moment.

Following options to get the datasource from different sources

  • Fetch from Url (REST API)
  • Fetch from GraphQL
  • Paste JSON (manually paste the JSON)
Steps to create the component:
XMCloud has provided a new interface to create the components, so let's get started.
  • Click on the Components icon from the Tools menu


  • First, we need to create the datasources for our components. if we need to get data for our component from multiple sources then we need to create multiple Datasource for retrieving content from the different source systems.

  • Enter Name, Description and select how we going to get the data for our component from the below options

    Example to fetch Data from API:



  • Once we have created the datasource, now we can configure our component with the data from these created datasources.
  • Click on the Components tab
  • I have created an Album datasource and it has 4 albums in it, lets us use this datasource in our component.
  • Click on Add Component to create an Album component.
  • We have different controls to design our components shown below

  • We will use Section(two columns), Text, and Image control to design our component
  • Click on Add element button to add Text control and then map the content to the datasource


  • Add Image control and update necessary datasource to the Image Source field


  • We can update the column layout and another setting like below.

  • Styles can be also configured, I have configured the font color of the Text control to Red


Component Integration:
  • Once the component is created, Sitecore Pages utilize this component by drag-drop it into the page's placeholder. 
  • This component will be shown in the Sitecore Pages Components tab on the left side.

Happy Programming 😊

Comments

Post a Comment

Popular posts from this blog

Custom Item Url and resolving the item in Sitecore - Buckets

-
Image
I have a situation to update the Item URL to be SEO friendly as my items in content tree looks like below. In the above image in order to resolve the item, Sitecore will find the item from the below URL http://domainname/en/dine/nv/chicken but I need to form a URL that is more SEO friendly like http://domainname/en/chicken In Sitecore by Out of box, we can achieve this by using Aliases , we can create an Aliases under System à Aliases and in the Linked Item field select the target item. But this is very tedious as we need to go to every item in the content tree and create Aliases, instead of that we will be going to do it programmatically using custom pipelines. ·          Link Provider (Provides the custom URL for the item based on the templates) ·          Item Resolver (Resolves the item based on the custom URL generated by CustomLinkProvider , that we going to create later...
Read more

Exploring Sitecore XM Cloud Forms: A Comprehensive Overview

-
Image
  The most awaited news came from Sitecore about the release of XM Cloud Forms.  Previously Sitecore enthusiasts / Marketers used different ways of forms implementation in Sitecore to reach the target customers like WFFM (Web Form For Marketers) Sitecore Forms Embeddable Forms Framework(EFF) XM Cloud Form is the latest addition by Sitecore and especially used to create Forms on XM Cloud pages. It will only work with the latest version of Sitecore JSS (21.6) Note:  I have tried to use XM Cloud Forms in my local docker setup by cloning the starter   repo , but I couldn't see the option of Forms in the XM Cloud dashboard to get started. Lets explore together on the features of Forms. Similar to Sitecore Components, we can navigate to  https://forms.sitecorecloud.io/  to start creating the Forms There are 2 important tabs in creating Sitecore Forms  Forms  Webhook(for triggering the submit action) We can create, modify, delete, and activate the f...
Read more

Sitecore Custom Rule (Action and Condition)

-
Image
I have a situation to create a custom Sitecore rule and action for it. v   Goto /Sitecore/system/Settings/Rules/Definitions/Elements v   Create a new item base on the template “ ElementFolder ” with a name “ Custom Rule ” v   Click on the item and create condition and Actions that are necessary for your requirements Condition Template Item: It has two important sections v   Data ·          Text (This is the condition Text which will use tokens to evaluate the condition and user input which will be in [ ] brackets.The brackets contain four positional parameters separated by commas (“,”). 1. The name of the property that the parameter sets in the .NET class that implements the condition. 2. The name of an item beneath the /Sitecore/System/Settings/Rules/Common/Macros item providing predefined functionality, or an empty string. For example, to activate a user interface allowing the user to select an item fr...
Read more