Tailwind Logo

Linking Sitecore Components content with SItecore items

XM Cloud

Published: 2024-03-14

Previously, we created fixed images and text for the components and pasted them onto the page, but this time we want to add our own template and use that data to render the components.

Creating New Components

In this case, we created a simple one with images and text placed as components.

comopnentlink2item01.png

Images and text are assigned to this layout.

Create a template

To create a dedicated template for use with this component, open Pages and click on Teampletes in the left menu.

comopnentlink2item02.png

Click on "Create template" to go to the content editor. In this case, since there is already a default template in Tailwind under Project, we will create a folder called Components to distinguish it, and create a template called Sample.

comopnentlink2item03.png

Using this created template, create a sample item for the Data folder in Home.

comopnentlink2item04.png

This completes the preparation.

Registering a template with FEaaS

In order to be able to use the template structure we have created with Sitecore Components, please select the FEaaS compnent data source tempates in the site's Settings. Service, which is the name of the mechanism to work with Sitecore Component.

comopnentlink2item05.png

After implementing this setting, the data source will automatically appear as a candidate in the Components data source.

comopnentlink2item06.png

When you select an item, you will see that the data from the sample you have already created has been added as a JSON sample.

comopnentlink2item07.png

Tie data sources together

When you are ready to tie them together, open the target component again in the Components screen. The working point is to map image values to images and text to text. In this case, we worked as follows

The image is in an odd shape in terms of size, etc. because I made it as I went along. I made a few corrections.

comopnentlink2item08.png

We will proceed with the following steps to this.

  • Add Version
  • Tailor the version to the device

This completes the preparation of the component.

Go to Pages, place the component, and assign the item to be displayed.

comopnentlink2item09.png

You can verify that it is enabled by placing the component and switching devices.

comopnentlink2item10.gif

Update item data

To verify that the component is correctly referencing the data source, the item's data is first updated.

comopnentlink2item11.png

Check the components again in Pages.

comopnentlink2item12.png

We have confirmed that the image and text have been changed.

Summary

We have tested this time with only images and text in the component. Of course, if you want to add more elements, you can add items by setting them in the template. By setting up workflows and timers for the items, it is possible to publish and version control the contents of the component.

Last time we were able to create components with no code, and this time we were able to work with templates with no code. being able to create components without having to create them in Headless SXA is a useful feature in terms of ROI.

Tags