This time, we'll create a component using a content list. A content list is useful for specifying multiple Sitecore items and utilizing their data collectively. Common use cases include selecting keywords for Meta tags, among other needs.
![](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F5aGC4UZgKjc66Kf0Md1BbH%2F3875f6fa9529d6078f0dcf67782a1a7d%2Ftemplate58.png&w=3840&q=75)
Creating Content List Components
In this case, we will create a component that sets up one field that can manage data for the content list.
Component Creation
First, prepare two Data/ContentListSample definition files by executing the following code.
jss scaffold Data/ContentListSample
![template47.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F6Zy1mwNH3RucDAgO4Laoq2%2Fbc092cc49fdd74279398152097776216%2Ftemplate47.png&w=3840&q=75)
This will create the following two files
- sitecore/definitions/components/Data/ContentListSample.sitecore.ts
- src/components/Data/ContentListSample.tsx
The first file allows you to define the types of fields that make up the template. In this case, we will add code to the following file: contentlist1 is created and the content type is CommonFieldTypes.ContentList.
export default function ContentListSample(manifest: Manifest): void {
manifest.addComponent({
name: 'ContentListSample',
icon: SitecoreIcon.DocumentTag,
fields: [{ name: 'contentlist1', type: CommonFieldTypes.ContentList }],
});
}
The code responsible for rendering is as follows, differing from the standard code in that the `Item` entry has been added to the import.
import { Text, Item, Field, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
import { StyleguideComponentProps } from 'lib/component-props';
type ContentListSampleProps = StyleguideComponentProps & {
fields: {
contentlist1: Item[];
};
};
const ContentListSample = (props: ContentListSampleProps): JSX.Element => {
const { contentlist1 } = props.fields;
return (
<div>
<h2>Content List</h2>
<div>
{contentlist1 &&
contentlist1.map((listItem, index) => (
<div key={`contentlist-${index}`}>
{/* The referenced item's fields can be rendered and edited using normal helper components: */}
<p>
Page Title: <Text field={listItem.fields.pageTitle as Field<string>} />
</p>
</div>
))}
</div>
</div>
);
};
export default withDatasourceCheck()<ContentListSampleProps>(ContentListSample);
Creation of templates in Sitecore, creation of folders for data storage
First, create a template that will define the component. Select the field name contentlist1 and the field format treelist.
![template48.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F2ourX0glEctZUkadtDSgV3%2F3d139837d605f21a66181b6ca797d1d7%2Ftemplate48.png&w=3840&q=75)
Then create a folder for data storage.
![template49.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F2EVofECAe60rEp1xxXm4zi%2Fadf5ad5cddcb67401627ae037ebd90c2%2Ftemplate49.png&w=3840&q=75)
After creating the sample item, the sitecore content tree will be displayed. In this case, select the item /sitecore/content/sitecoredemo-jp/Home to be displayed on the right side.
![template50.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F414cWRXLGGBPO5aUEHhZss%2F77e5eb8d4964173beb716518b05554eb%2Ftemplate50.png&w=3840&q=75)
Add renderings, set placeholders
Then add rendering. Add a new Json Rendering under the path /sitecore/layout/Renderings/Project/sitecoredemo-jp/Data. Specify ContentListSample as the rendering name. Set the following two items in the settings of the rendering you created.
- Data source location: pre-created folder
- Data source template: a pre-created template
The settings are as follows
![template51.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F6Hk3IkdzfaDGIvpFZQhs78%2Fef8b620ce35a1628e5a3f4bb50d298a2%2Ftemplate51.png&w=3840&q=75)
Add the rendering you have created to the placeholder.
![template52.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F1NX1zzB9Jro4LPZlICbhPj%2F51036005b2e61ccd3af72247b9d8e6e5%2Ftemplate52.png&w=3840&q=75)
Verification
Once the component was actually placed, the sample data could be displayed as shown below.
![template53.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F5HilQ2bGM1oPOSVKyQJucn%2F7c99db11610c15a7ad2249a2103e8c5d%2Ftemplate53.png&w=3840&q=75)
This time, the Text tag is used, so the text can be changed.
![template54.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F2bzmxILVb4P1OUvrCjwIgD%2Fc13fa652efb977afc25f1c0cfb9a85a7%2Ftemplate54.png&w=3840&q=75)
If you make changes to the data you have changed in the content editor, you will see that you have made the correct changes.
![template55.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F5diFEf4VHnKqC3CBjkc3lA%2Fa077a4905bd4028aee25a0d6bab7fe3e%2Ftemplate55.png&w=3840&q=75)
We have also included a section regarding the overview. So we will rewrite the layout slightly so that this section can be additionally displayed.
const ContentListSample = (props: ContentListSampleProps): JSX.Element => {
const { contentlist1 } = props.fields;
return (
<div>
<h2>Content list</h2>
<div>
{contentlist1 &&
contentlist1.map((listItem, index) => (
<div key={`contentlist-${index}`}>
{/* The referenced item's fields can be rendered and edited using normal helper components: */}
<h3>
Title: <Text field={listItem.fields.pageTitle as Field<string>} />
</h3>
<p>
Content: <Text field={listItem.fields.PageDescription as Field<string>} />
</p>
</div>
))}
</div>
</div>
);
};
After making the change, the summary can also be displayed as shown below.
![template56.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F7Dm75zH5Soo4FMKPltFQBq%2Ff1ee33975b0f110809da60957a815187%2Ftemplate56.png&w=3840&q=75)
Finally, another Home item is created and added to the content list as well. The screen shot after creating the item is as follows
![template57.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F1DbI30MBhUBiGfoelMeKtk%2F514418a69dc5b48ba0df58d838d60e89%2Ftemplate57.png&w=3840&q=75)
We now have a situation where two items are specified. So what does the sample page look like?
![template58.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F5aGC4UZgKjc66Kf0Md1BbH%2F3875f6fa9529d6078f0dcf67782a1a7d%2Ftemplate58.png&w=3840&q=75)
Since two items are specified, the component now displays the titles and summaries of the two items.
Summary
We have created a content list component, but the field format in Sitecore is Treelist, which displays a list of content. In fact, in this case, we are only displaying the content, but it can also be used to specify recommended topics and create a list of links.