Tailwind Logo

Component Creation and Template Linkage - Text Edition

Next.js

Published: 2022-04-04

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

PowerShell
jss scaffold Data/TextSample
template01.png

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

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

template02.png

Then designate this item to be displayed as an item on the page.

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

  1. Create Data folder
  2. Create a TextSample template
  3. Add singlinetext1, multilinetext1 and richtext1 to align the respective field formats

The resulting template is as follows

template03.png

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.

template04.png

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.

template05.png

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.

template06.gif

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.

template07.png

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.

template08.png

Put data in the item you have created. Any content is acceptable, but in this case we have included the following

template09.png

Then open Horizon's editor.

template10.gif

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.

Tags