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
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.
The name of the folder to be created is Sample Folder.
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.
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.
query:$site/*[@@name='Data']/*[@@templatename='Sample Folder']|query:$sharedSites/*[@@name='Data']/*[@@templatename='Sample Folder']
This completes the setup.
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.
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.
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.