Go to the homepage
Powered bySitecore Search logo
Skip to main contentThe Tutorial: How to Create a Component Data Template in XM Cloud page has loaded.

Tutorial: How to Create a Component Data Template in XM Cloud

Learn about defining the content model that you can use for data sources in the XM Cloud Component builder.

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:

  1. Create a content model that can be used as a data source for the Text Teaser component.
  2. Configure it to store inside a data folder within your Company Dev site.
  3. Configure XM Cloud so that authors can create the content.
  4. 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:

  1. A valid organization login for the Sitecore Cloud portal
  2. An existing XM Cloud environment and site created in Tutorial: How to Set Up and Utilize XM Cloud
  3. 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.

  1. To begin, open the Sitecore Cloud Portal (https://portal.sitecorecloud.io) and log in.

  2. From your dashboard, select the XM Cloud environment where you have your Text Teaser Component created.

    Sitecore Cloud Portal - Select App
  3. From the app context flyout, select Content Editor to launch the XM Cloud content tree editing interface.

    Sitecore Cloud Portal - Select Contnet Editor from Context Flyout
  4. Navigate to: sitecore/System/Settings/Project in the content tree.

    Content Editor - Navigate To Settings Project Folder
  5. Right-click on the Project item in the tree to pop open the context menu.

  6. In the context menu select Insert and then Folder to create a new Folder.

    Content Editor - Add Folder
  7. Specify "Company Dev" as the name of the folder, using the same name as the Site Collection.

  8. Right-click on the Project item in the tree to pop open the context menu again.

  9. In the context menu select Insert and then Headless Module to create the new module.

    Content Editor - Insert Headless Module
  10. 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
    Content Editor - Configure Headless Module
  11. 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.

  1. In the Content Editor tree, navigate to /sitecore/Templates/Project/Company Dev/ and select the Basic Components folder

  2. Click on the New Template button or right-click on the Basic Components folder and select Insert > New Template

  3. Write "Text Teaser" in the Name field to name the template.

  4. Click the Next button to advance to the Location selection step.

  5. Click the Next button to keep the default selection for the location folder.

  6. 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.

  1. In the content tree, select the Text Teaser template. A field builder interface will show on the main pane

    Content Editor - Empty Template
  2. In the Builder tab, type Content into the Add a new section field.

    Content Editor - Section Added
  3. Within the new Content section, create the Headline field:

    • Add a new field : Headline
    • Type: Single Line Text
  4. Now create the Subheadline field:

    • Add a new field : Subheadline
    • Type: Single Line Text
  5. Now create the Content field:

    • Add a new field : Content
    • Type: Rich Text
  6. Click the Save button in the ribbon to ensure the new fields are saved.

    Content Editor - Text Teaser Template has been created

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.

  1. 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

  2. Write "Text Teaser Folder" in the Name field to name the template.

  3. Click the Next button to advance to the Location selection step.

  4. Click the Next button to keep the default selection for the location folder.

  5. 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.

  1. In the content tree, select the Text Teaser Folder template.

  2. In the ribbon, switch to the Configure tab

    Content Editor - Open Configure Tab
  3. Click on the Icon button

  4. Select the Folder icon from the options shown.

    Content Editor - Select Folder icon

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.

  1. In the content tree, select the Text Teaser Folder template.

  2. In the ribbon, switch to the Builder Options tab

    Content Editor - Open Builder Options
  3. 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.

  4. In the ribbon, switch to the Configure tab. You can now configure options for the __Standard Values item.

  5. 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.

    Content Editor - Assign insert options
  6. In the selection tree on the left, navigate to /Templates/Project/Company Dev/Basic Components

  7. Double-click on the Text Teaser template to add it to the Selected pane on the right

  8. Double-click on the Text Teaser Folder template to add it to the Selected pane on the right

    Content Editor - Select Insert Options
  9. 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

  1. 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

    Content Editor - Select Data Folder of Site
  2. Right-click and select Insert from the context menu and select Insert from template to launch a template selection dialog

    Content Editor - Insert from Template
  3. In the dialog, expand the Browse tree to Templates/Project/Company Dev/Basic Components so that the Text Teaser templates are visible for selection.

    Content Editor - Select Text Teaser Folder Template
  4. Select the Text Teaser Folder template

  5. In the Item Name field enter the value "Text Teasers". This will be the name given to the folder.

  6. Click Insert to create the folder.

Create a sample data source

You can now test out your folder by creating a sample Text Teaser content data source.

  1. Right-click on the Text Teasers folder to launch the context menu

  2. Select Insert > Text Teaser to create a new text teaser.

  3. Type in How to use Components as the name for the test teaser.

  4. Click OK button to create the Text Teaser content.

    Content Editor - Create Data Source Item
  5. 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.
    Content Editor - Insert Content

You have completed this tutorial!

Edit this page on GitHub

Feedback

© Copyright 2024, Sitecore. All Rights Reserved