What You are Going to Learn
In this tutorial, you will go through the steps to create a new content model that can be used for your Text Teaser component. You will learn:
- How to create a headless module in XM Cloud Content Editor
- How to create new data templates for the Text Teaser component in XM Cloud Content Editor
Overview
In the previous tutorial, you learned how to use XM Cloud Components to centrally manage the content of a Text Teaser component and use that component in XM Cloud Pages. Now we will look at how to build templates so that the content can be different on each page. To accomplish this, you will need a data model for the Text Teaser component so that authors can create different content for each use of the Text Teaser component.
To help authors create the content, you will need to set up a data model with the fields needed by the Text Teaser component. You are going to create a data model with the following fields:
- Headline (Single Line Text)
- Subheadline (Single Line Text)
- Content (Rich Text)
This data model is referred to as a 'data source' in XM Cloud. Data sources in XM Cloud can be either:
- a piece of content stored inside the current site. e.g.
site/data/DatasourceFolder/DataSourceItem
- a piece of content stored inside the current page. e.g.
page/data/dataSourceItem
- the page itself, where the component is being placed
For this tutorial, you will be implementing the first option. You will:
- Create a content model that can be used as a data source for the Text Teaser component.
- Configure it to store inside a data folder within your Company Dev site.
- Configure XM Cloud so that authors can create the content.
- Use your new Text Teaser template to create a new Text Teaser content item with data
Prerequisites
In order to complete the following tutorial, you will need these resources:
- A valid organization login for the Sitecore Cloud portal
- An existing XM Cloud environment and site created in Tutorial: How to Set Up and Utilize XM Cloud
- The Text Teaser component created in Tutorial: Create a Component using XM Cloud Component Builder
Create the module
The very first step will be to create a headless module. Modules are used to organize configuration and data models in a consistent structure so they can be re-used by the marketing team. Think of a module like an npm package for the structures you are creating. Defining modules makes it very easy for you to make your package/module available to multiple sites and teams. A site administrator will be able to 'install' your module and use it in a consistent way on any site they choose.
-
To begin, open the Sitecore Cloud Portal (https://portal.sitecorecloud.io) and log in.
-
From your dashboard, select the XM Cloud environment where you have your Text Teaser Component created.
-
From the app context flyout, select Content Editor to launch the XM Cloud content tree editing interface.
-
Navigate to:
sitecore/System/Settings/Project
in the content tree. -
Right-click on the Project item in the tree to pop open the context menu.
-
In the context menu select Insert and then Folder to create a new Folder.
-
Specify "Company Dev" as the name of the folder, using the same name as the Site Collection.
You will store the new headless module inside this new folder. However, the insert option for Headless Module is not available on this folder, only at the 'Project' folder level. You will need to go there to create the new module.
-
Right-click on the Project item in the tree to pop open the context menu again.
-
In the context menu select Insert and then Headless Module to create the new module.
-
Configure the Headless Module settings with these values by typing, selecting, or checking the appropriate checkbox:
- Module name: Basic Components
- Add to module group:
sitecore/system/settings/Project/Company Dev
- System areas for which container folders should be created: Templates, Branches, Renderings, and Placeholder Settings
- Module scaffolding actions: Headless Site Setup
When configuring scaffolding actions, you'll notice an option for Headless Tenant Setup. Tenants are an older terminology. These are now called Site Collections.
-
Click the Proceed button to save your choices and create the headless module.
Creating the templates
The Headless Module has now been created. You can now check that the required folders exist and start creating the required templates. You will create two templates:
- Text Teaser to hold the data from the author, and
- Text Teaser Folder to organize created Text Teaser content items.
You will also configure these templates to make life a little bit easier for the authors who want to create Text Teasers.
Create the Text Teaser template
These steps will create the Text Teaser template.
-
In the Content Editor tree, navigate to
/sitecore/Templates/Project/Company Dev/
and select the Basic Components folder -
Click on the New Template button or right-click on the Basic Components folder and select Insert > New Template
-
Write "Text Teaser" in the Name field to name the template.
Leave the Base template with the default value (Standard template) for now. If you were creating a series of templates that inherited fields from each other, you might need to specify a base template to inherit from. The default Standard template will provide all the required fields your Text Teaser template will need so it is enough for the purpose of this tutorial.
-
Click the Next button to advance to the Location selection step.
-
Click the Next button to keep the default selection for the location folder.
The currently selected folder is set by default when this step shows. If the Basic Components folder wasn't already selected in the tree, you could choose it during this step instead.
-
Click the Close button to exit the wizard. The template has been created.
Create the fields for the Text Teaser
You will now create the fields for the author to enter information for the Text Teaser.
-
In the content tree, select the Text Teaser template. A field builder interface will show on the main pane
-
In the Builder tab, type Content into the Add a new section field.
Sections are defined within a data template to structure the content for authors. This helps particularly when dealing with many fields on a template.
-
Within the new Content section, create the Headline field:
- Add a new field : Headline
- Type: Single Line Text
-
Now create the Subheadline field:
- Add a new field : Subheadline
- Type: Single Line Text
-
Now create the Content field:
- Add a new field : Content
- Type: Rich Text
-
Click the Save button in the ribbon to ensure the new fields are saved.
You may notice there are other field options like Source, Unversioned, and Shared. These are for more advanced field definition scenarios that are not covered in this tutorial, but you may want to learn more about Data Templates in the documentation: https://doc.sitecore.com/xmc/en/developers/xm-cloud/data-templates.html
Create the Text Teaser Folder template
With the Text Teaser component created, you now need a folder to hold the created Text Teaser content items. These steps will create the Text Teaser Folder template.
-
Now you will create the Text Teaser Folder template. Click on the New Template button or right-click on the folder and select Insert > New Template
There is another option called "Template Folder". This can also be used to collect together templates, but we use the regular template because Template Folders do not support Standard Values which we will need in a later step to configure Insert Options.
-
Write "Text Teaser Folder" in the Name field to name the template.
-
Click the Next button to advance to the Location selection step.
-
Click the Next button to keep the default selection for the location folder.
-
Click the Close button to exit the wizard. The template has been created.
Configure a template icon
The icon for the Text Teaser is fine for the purposes of this tutorial, but it would be nice if the folder template looked like a folder. In these steps you will change the icon for a template.
-
In the content tree, select the Text Teaser Folder template.
-
In the ribbon, switch to the Configure tab
-
Click on the Icon button
The first time that you try to load the Icon editing modal, Sitecore XM Cloud will start loading up the options to present to you. There may be a delay for you between clicking and then the display of the options if this is the first time using this feature in your instance.
-
Select the Folder icon from the options shown.
Configure Insert Options
When an author tries to create a new content item, they are presented with the types of content that are allowed at that location. Insert Options allow you to specify what content options are available to the author. You will now configure the options for a Text Teaser Folder so that Authors can easily create new Text Teaser content items or create more Text Teaser Folders to structure their content even further.
In this section you will get a first look at Sitecore XM Cloud "Standard Values" for templates. The Standard Values on a template usually contain default values that are automatically set on content creation but can be updated by the author later. If you're interested in learning more about Standard Values, check out the documentation: https://doc.sitecore.com/xmc/en/developers/xm-cloud/standard-values-for-data-template-fields.html
-
In the content tree, select the Text Teaser Folder template.
-
In the ribbon, switch to the Builder Options tab
-
Click on the Standard values button to create a new definition for the template. A new item named
__Standard Values
will be created and the UI will automatically update to select this new item. -
In the ribbon, switch to the Configure tab. You can now configure options for the __Standard Values item.
-
Click the Assign button in the "Insert Options" ribbon chunk to launch the Insert Options dialog. This dialog allows us to select which templates can be inserted when the user has a Text Teaser Folder selected.
-
In the selection tree on the left, navigate to
/Templates/Project/Company Dev/Basic Components
-
Double-click on the Text Teaser template to add it to the Selected pane on the right
-
Double-click on the Text Teaser Folder template to add it to the Selected pane on the right
-
Click the OK button to save the changes.
Create content that can be used as a data source
You have now created your templates and configured them for the authors. You also created the module needed to make the feature-related items available to a site. In a real XM Cloud development project, there would be many different templates and folders defined in a module. At this stage, a team would usually need to configure the module to create the site-specific structure with all of those templates and folders and add the module to an existing site collection or site.
For the purpose of this tutorial, however, you will skip forward a few steps and manually create the structure since only the Text Teaser template is being used right now.
Create data source folder manually
-
In the Content Editor, navigate to the Data folder in the Company Dev site that was created in the previous tutorial:
/sitecore/Content/Company Dev/Company Dev/Data
-
Right-click and select Insert from the context menu and select Insert from template to launch a template selection dialog
Note that there are no options for the Text Teaser templates listed in the context menu since you have not configured anything to help insert content into this Data folder. However, if you have logged in as an administrator account you will have the option for Insert from template. If you do not have that option, you will need to change account to one with full administrator access.
-
In the dialog, expand the Browse tree to
Templates/Project/Company Dev/Basic Components
so that the Text Teaser templates are visible for selection. -
Select the Text Teaser Folder template
-
In the Item Name field enter the value "Text Teasers". This will be the name given to the folder.
-
Click Insert to create the folder.
The UI will automatically update to show the Text Teasers folder and will select it for you in the tree. If you right-click on the new Text Teasers folder, the options for the Insert context menu will now show the configured options from earlier in the tutorial. This is how authors will now be able to create new Text Teaser and Text Teaser Folder items.
Create a sample data source
You can now test out your folder by creating a sample Text Teaser content data source.
-
Right-click on the Text Teasers folder to launch the context menu
-
Select Insert > Text Teaser to create a new text teaser.
-
Type in How to use Components as the name for the test teaser.
-
Click OK button to create the Text Teaser content.
The fields that are shown to you can now be edited. This is where a Content Author will create the parts of their content to be used on the component.
-
In the Content pane, specify values for the Text Teaser:
- Headline: How to use Components
- Subheadline: Easy and smart ways designing your pages
- Content: The Components builder of XM Cloud Components is a powerful tool that lets you create new components or modify already existing components using an intuitive WYSIWYG builder. It also lets you store the components in organized collections in the Components library. Learn more about how to use Components in this tutorial.
Congratulations! You have now learned how to create data source templates, how to configure insert options, and how to configure modules. You then validated your template by by creating some sample Text Teaser content. You will now be able to use your new content model with your Text Teaser component in the next tutorial!
Related XM Cloud Documentation
- Data Templates
- Data definition and template overview
- The Standard Template
- Standard values for data template fields
- Insert Options
- Add a module to an existing site collection or site