DEV Community

Sebastián Aliaga
Sebastián Aliaga

Posted on

Creating your first rendering on Sitecore XM Cloud

This guide will take you through a step-by-step process of creating, coding, and configuring your first rendering/component within Sitecore XM Cloud using Next.js. Our focus will be on implementing a straightforward component with three fields and a placeholder.

Folder Structure

To create your first rendering, it is essential to grasp the folder structure. Sitecore, by default, considers every component within the 'Components' directory, mapping and preparing them for rendering content when needed. For this example, let's craft a 'CallToActionCardRow' component situated in the 'Related Content' directory. Consequently, the folder structure will appear as follows:

Pro Tip: Enhance reusability by separating the type (model) from the component.

Folder structure for the component

Creating the corresponding type/model

The initial step in creating the component is to establish the type. In this case, the component is simple, featuring only three fields. The type is defined as follows:

Type file with the corresponding fields

We will only have three fields: heading, copy and a trailing copy.

Creating the component

This is the end product, and now I'll break down what's going on inside the component.

The component

  • First, we bring in the data types we need, including our custom type from earlier. Then, we set up the props type and the component type itself. Since we're using TypeScript, nailing down the correct types is crucial for both props and the component function.

  • Inside the component, it's pretty straightforward – we use JSX to structure our component the way we want. With Sitecore components, we can define our fields more effectively. For instance, we use 'Text' for the heading and 'RichText' for our copy field.

  • To create a Placeholder, we incorporate the Placeholder component and give it a name (which has to match the one in the CMS). Lastly, we create the default export for the component using the 'withDatasourceCheck' function, and we're all set to configure things in the CMS.

Inside the CMS


To set up the template, create an item under 'Template' in the content tree:

Template item created under Template in the content tree

Next, establish the corresponding fields, ensuring the use of camelCase syntax, mirroring the TypeScript type.

Template fields

Placeholder Settings

Proceed to create our placeholder settings under Layout/Placeholder Settings:

Placeholder settings item

Make sure you set up the PlaceholderKey—it should match the one in the component. Also, list the allowed controls or renderings that can go inside this specific placeholder.

Placeholder setting item configuration


To wrap up, navigate to Layout/Renderings and craft your rendering. It's crucial to use the Json Rendering template.

Rendering item

Configure the 'Component Name' field; it must match the one specified in your Next.js project.

Rendering item configuration

As we're implementing a placeholder, scroll down to Layout Service and choose the corresponding placeholder.

Setting up the placeholder on the rendering

Add the rendering to the Available Renderings

To complete the setup and make it usable, the final step is to place it under Site/Presentation/Available Renderings. In this case, create an 'Available Renderings' item.

Available rendering content tree item

Inside of it, configure the corresponding rendering

Available rendering configuration

Test the component

With this setup, navigate to the Pages editor and find, under Components, the Available Renderings we configured, including our newly created rendering.

Sitecore Pages Available Renderings

As we didn't configure any standard values, messages will appear indicating that our fields lack text. However, you can still observe our heading, copy, trailing copy, and, of course, our placeholder.
Testing of the component

Top comments (0)