Introduction to Sitecore XM Cloud Components


 In my previous blog, we discussed about the basic terminology of Sitecore XM Cloud. In this blog post, we will discuss about different components available in Sitecore XM Cloud and how we can use out of the box component in a page.

Components are serves as fundamental elements of a page structure which are used to display content and can conveniently edit visually. Page layout configuration of a page determine the position of the component.

There are various types of components that can be utilized in XM Cloud:

OOTB Components: There are out of the box (OOTB) components available in Sitecore XM Cloud pages. Those are categorized into Commerce, Media, Navigation, Page Content, and Page Structure groups.

Sitecore Components: Designers can create components in XM Cloud Components and prepare them for use in XM Cloud Pages. These components can display static or dynamic content. Data source can be internal, external including Content Hub ONE. They can be configured using the settings in the right-hand pane and styled with themes created in XM Cloud Components Styles. When adding a Sitecore component to a webpage, you can choose to use a specific version or a responsive bundle, which adjusts the component based on the screen size.

SXA Components: Developers can build these components in the Content Editor and save them. These components are them available in content tree under components and can drag and drop onto a webpage in XM Cloud Pages. SXA components can incorporate static content from Explorer, the Sitecore media library, or Content Hub ONE. They can be further configured using the settings in the right-hand pane.

BYOC Components: Bring your own components, here developers can integrate their own code by referencing an external code base that includes components.

Forms: Designers can create forms in XM Cloud Forms to easily send data to third-party applications without capturing user data.

All these components are available in XM Cloud Pages, where you can effortlessly drag them onto the editor canvas to add them to a webpage layout.


Below are the steps to create a new page and add component to the page:

 Adding a new Page

  • Navigate to the Pages tab in the left-side menu in Sitecore XM Cloud Pages and click + Create a page.



  • Choose the Blank Page template from the dialog box, and click Select.



  • Name your new page in Sitecore XM Cloud Pages.



Adding Components to a Page

  • The new page will have the basic layout that consists of the site title, main placeholder, footer placeholder. Let's add two columns to this page



  • Navigate to the Components tab in the left-side menu and choose the component to add to the page. In this example we will use an Image component under the Media section.



  • Let's add another component Rich Text to the page.



  • Select the component you want to edit, and a menu will appear on the right side of the Pages editor. Here you will find the different component options such as layout, styling, and advanced styling details.



  •  Once done, publish this page.

       
The out-of-the-box (OOTB) components in Sitecore XM Cloud Page offer a rich digital experience for content editors with its low-code/no-code approach, enabling organizations to seamlessly integrate custom functionality to meet their specific needs.

In the next blog we will discuss how to create a component using component builder.






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