Tailwind Logo

Configure folders used by XM Cloud components

XM CloudHeadless SXA

Published: 2024-10-10

In this article, we will check the folder settings related to placing components in Pages and Experience Editor, which are editing tools as you see them.

The sample component we will use this time is the same component created in the previous article.

Check the value of the Image component

When you place an image component using Drag & Drop, the item will be created under the Data folder created under the item, or under a folder created under the site-wide Data folder.

This movement is controlled by the Datasource location item under Editor Options. The Image component is as follows

Plain Text
query:$site/*[@@name='Data']/*[@@templatename='Image Folder']|query:$sharedSites/*[@@name='Data']/*[@@templatename='Image Folder']

Where can I find the definition of Image Folder as described here? It is created in the path /sitecore/templates/Features/JSS Experience Accelerator/Media/Image Folder.

When preparing a similar procedure for Sample, it is necessary to prepare a template for the folder where Sample items are stored, and to make it available as a folder.

Creation of Sample Folder

First, create a Folder template that can store Sample items. This time, under /sitecore/templates/Feature/Sites/Data Source, click New Template.

datasourcelocation01.png

The name of the folder to be created is Sample Folder.

datasourcelocation02.png

Open the Builder Options tab in the Experience Editor and click on the Standard values button to create the __Standard Values item. Then, for this __Standard Values item, click Assign from Configure - Insert Option to allow the Standard item's templates and folders to be added themselves.

Finally, use this created template to create a Sample folder in the Data folder directly under the site.

datasourcelocation04.png

Update rendering

Since the Sample Folder template and the folder itself have already been created, set the following code to the Datasource Location field in the Sample rendering and Editor Options.

Plain Text
query:$site/*[@@name='Data']/*[@@templatename='Sample Folder']|query:$sharedSites/*[@@name='Data']/*[@@templatename='Sample Folder']

This completes the setup.

datasourcelocation05.png

Operation check

After actually placing the component on the page, check the Datasource and you will see that it directs to Sample 1 in the Data folder.

datasourcelocation06.png

Next, set the Open Properties after Add item in Editor Options to Yes and remove the IsAutoDatasourceRendering item in Experience Accelerator. Now you will see which item is selected when you place the component and the folder where the item will be created when you do so.

datasourcelocation07.png

Summary

This time, we checked the Datasource Location item, which specifies the location of items needed by the component when it is placed. In addition to creating default values for Data, you can now specify a dialog first, create items separately, etc.

Tags