Sitecore provides templates to define the data structure. This time, we'll create templates to define how data is stored and how it's called for display. We'll use sample code from the Styleguide's sample data to illustrate this process.
Organize field formats and definitions
First, we will organize the definitions for creating a Sitecore component and a list of field formats in Sitecore. The following is a list of items and values.
Column | Content TypContent Type | ValuValue | Sitecore field format |
---|---|---|---|
singlelinetext1 | Single line text | CommonFieldTypes.SingleLineText | Single-Line Text |
multilinetext1 | Multiline text | CommonFieldTypes.MultiLineText | Multi-Line Text |
richtext1 | Rich text | CommonFieldTypes.RichText | Rich Text |
image1 | Image | CommonFieldTypes.Image | Image |
number1 | Number | CommonFieldTypes.Number | Number |
checkbox1 | Checkbox | CommonFieldTypes.Checkbox | Checkbox |
contentlist1 | Content List | CommonFieldTypes.ContentList | Treelist |
date1 | Date | CommonFieldTypes.Date | Date |
datetime1 | Datetime | CommonFieldTypes.DateTime | Datetime |
generallink1 | General Link | CommonFieldTypes.GeneralLink | General Link |
itemlink1 | Item link | CommonFieldTypes.ItemLink | Droptree |
file1 | File | CommonFieldTypes.File | File |
I would like to divide the template into several parts and show you how to use them. Basically, I am thinking of using jss scaffold to create a component, set up some field formats, and deploy it as a component.
Creating text-related components
In this case, we will create a component, a combination of text fields, to the point where they can be deployed and edited in Sitecore.
Component Creation
In the table above, we will proceed to create a component that defines the first three items. First, prepare the two definition files for `Data/TextSample` by executing the following code
jss scaffold Data/TextSample
This will create the following two files
- sitecore/definitions/components/Data/TextSample.sitecore.ts
- src/components/Data/TextSample.tsx
The first file can define the types of fields that make up the template. Add code to the following file
export default function TextSample(manifest: Manifest): void {
manifest.addComponent({
name: 'TextSample',
icon: SitecoreIcon.DocumentTag,
fields: [
{ name: 'singlelinetext1', type: CommonFieldTypes.SingleLineText },
{ name: 'multilinetext1', type: CommonFieldTypes.MultiLineText },
{ name: 'richtext1', type: CommonFieldTypes.RichText },
],
});
}
The configuration items to be attached to CommonFieldTypes can be selected by using Visual Studio Code as follows.
Then designate this item to be displayed as an item on the page.
import { Text, Field, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
import { StyleguideComponentProps } from 'lib/component-props';
type TextSampleProps = StyleguideComponentProps & {
fields: {
singlelinetext1: Field<string>;
multilinetext1: Field<string>;
richtext1: Field<string>;
};
};
const TextSample = (props: TextSampleProps): JSX.Element => {
return (
<div>
<h2>Single line Text</h2>
<div>
<Text field={props.fields.singlelinetext1} />
</div>
<h2>Multiline Text</h2>
<div>
<Text field={props.fields.multilinetext1} />
</div>
<h2>Rich Text</h2>
<div>
<Text field={props.fields.richtext1} />
</div>
</div>
);
};
export default withDatasourceCheck()<TextSampleProps>(TextSample);
Now that you have the above code, deploy the code to GitHub.
Create a template in Sitecore
Next, we will proceed to configure the Sitecore side regarding the above components. In this case, we will create a folder for Data and create a template to deploy the sample code.
- Create Data folder
- Create a TextSample template
- Add singlinetext1, multilinetext1 and richtext1 to align the respective field formats
The resulting template is as follows
Creation of folders for data storage
Along with creating the template, set up a location to store the data for this demonstration. In this case, we will create a Data folder in the Components folder of the site, and another folder under that folder to store the data to be defined.
Add rendering
To create an item based on the data we have defined, we add a rendering: create a Data folder and create a Json rendering item under it. The name of the item should be TextSample, the same as the component already created.
Then, additional settings for this rendering are made. There are two settings to be made. One for the data source location is the folder where the content will be placed (one previously created), and the other is the data source template, which uses the template definition (two previously created). The following screen shows the settings.
Placeholder Settings
Since only jss-main is currently set up as a placeholder, we will make this component available in jss-main. The target item is /sitecore/layout/Placeholder Settings/Project/sitecoredemo-jp/jss-main and change the settings so that it appears in the associated control.
Verification
To verify the operation, prepare an item first. Create an item named SampleTextData under the folder /sitecore/content/sitecoredemo-jp/Components/Data/TextSample. Of course, it is assumed that you have created the target template.
Put data in the item you have created. Any content is acceptable, but in this case we have included the following
Then open Horizon's editor.
component is now enabled and can be edited.
Summary
We have created a template containing the three types of text data and introduced the display and editing of the data. We will continue with this series for a while.