Creating File Components

In this case, we will create a component to specify a file.

Component Creation

First, prepare two Data/FileSample definition files by executing the following code.

jss scaffold Data/FileSample

This will create the following two files

• sitecore/definitions/components/Data/FileSample.sitecore.ts
• src/components/Data/FileSample.tsx

The first file allows you to define the types of fields that make up the template. Add code to the following file: contentlist1 is created and the content type is CommonFieldTypes.ContentList.

export default function FileSample(manifest: Manifest): void {
  manifest.addComponent({
    name: 'FileSample',
    icon: SitecoreIcon.DocumentTag,
    fields: [{ name: 'file1', type: CommonFieldTypes.File }],
  });
}

The code responsible for rendering is as follows, differing from the standard code in that the File and FileField items have been added to the import.

import { File, FileField, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
import { StyleguideComponentProps } from 'lib/component-props';

type FileSampleProps = StyleguideComponentProps & {
  fields: {
    file1: FileField;
  };
};

const FileSample = (props: FileSampleProps): JSX.Element => (
  <div>
    <p>ファイル コンポーネント</p>
    <div>
      <File field={props.fields.file1} />
    </div>
  </div>
);

export default withDatasourceCheck()<FileSampleProps>(FileSample);

Creation of templates in Sitecore, creation of folders for data storage

First, create a template that will define the component. Select file1 as the field name and File as the field format.

Then create a folder for data storage.

For sample data, specify a file in the media library.

Add renderings, set placeholders

Then add rendering. Add a new Json Rendering under the path /sitecore/layout/Renderings/Project/sitecoredemo-jp/Data. Specify FileSample as the rendering name. Set the following two items among the rendering settings you created.

• Data Source Location: Pre-created folders
• Data Source Template: Pre-created templates

The settings are as follows

Add the rendering you have created to the placeholder.

Verification

The actual placement of the component and specification of the data for the sample you have created is shown below.

A reference in the preview will show that a link has been placed against the image.

Summary

In this case, we used a field related to files to create a link. In fact, this field is often used to specify a file, such as a Doc or PDF file that can be downloaded.

Tags

• Next.js