Creating a Sitecore component allows you to easily create a drag-and-drop component. In this article, we will introduce a wizard to help you create this component. The previously introduced steps are as follows
Preparing to use the wizard
We will create components using rendering, but we can manage them separately from existing components by preparing a folder in advance that will serve as a receptacle for them. In this case, we will create a folder called Demo as follows.
- /sitecore/layout/Renderings/Feature/Demo
- /sitecore/system/Settings/Feature/Demo
- /sitecore/templates/Branches/Feature/Demo
- /sitecore/templates/Feature/Demo
For each of the above functions, a folder with the same name, Demo, is prepared, where the wizard will place the necessary data.
Using the Wizard
In this article, we will follow the steps below to create a Headless SXA component. First, right-click on the folder /sitecore/layout/Renderings/Feature/Demo and select Insert - Component.
A dialog box will appear immediately. In this case, we will name the component Test.
Then switch to the Data Sources screen. On this screen, change the Rendering template to Templates/Foundation/JavaScript Services/Json Rendering.
When completed, the rendering item is created as shown below.
In the rendering definition created, add an entry for IsAutoDatasourceRendering to the Other Properties in the Experience Accelerator group and set it to true.
Now you are ready for the items you need.
Component Creation
For the simplest component, create the following file in the Components folder of Next.js. The file to be created is the same as the name of the component created this time.
TypeScript
import React from 'react';
import { Field, Text } from '@sitecore-jss/sitecore-jss-nextjs';
interface Fields {
TestText: Field<string>;
}
type TestProps = {
params: { [key: string]: string };
fields: Fields;
};
export const Default = (props: TestProps): JSX.Element => {
return (
<div className={`component myrendering ${props.params.styles}`}>
<div className="component-content">
<div>
<strong>テスト：</strong>
<Text field={props.fields.TestText} />
</div>
</div>
</div>
);
};This code is in the form of getting the data named TestText from the template. This field was not created when the wizard created it, so add the field to /sitecore/templates/Feature/Demo/Data Source/Test that the wizard created.
The component is now ready.
Make it available on your site
After creating a component, it is necessary to define on which site it will be available. In this case, we will create a group called Demo in the sample site, Presentation - Available Rendergins, and add the component we have created so that it can be used.
After adding the component, open the Experience Editor and you will see the component displayed.
When we actually set up the component by drag and drop, we were able to expand the component with editing enabled as we saw it.
Summary
We have used a wizard to show you how to enable the component in a minimal number of steps. This allows us to simplify the steps to check the behavior on the screen, and then we can work on the data template expansion, manipulate the code of the component, and so on. This wizard is very useful for quickly setting up the minimum and developing components efficiently.