Walkthrough: Creating widget components manually

This walkthrough is the part three of the Developing the UI walkthrough series.

As part of a Sitecore Discover implementation, you need to create and add widget components to your React application.

This walkthrough describes how to create a widget component manually using the UI components reference site. You need to repeat this walkthrough for every widget in your project.

Alternatively, you can create widget components using the Discover UI Components CLI..

This walkthrough describes how to:

Create a widget component using the UI reference site.
Edit the widget component code to match design
Edit the styles of the widget component.
Style widget components with a theme.

Adding widgets to your React application can involve using widget components from the JS SDK package or creating widget components using widget templates in the UI Components package. The templates include the code to query hook UI components. At runtime, the widget component renders when data is received for its rfk_id ID.

Note

For content personalization widgets, use widget components from the JS SDK package.

For merchandising widgets, creating widget components is similar irrespective of widget type. Simply repeat the procedure in this section for every widget. Make sure you choose a template for the widget's type.

To create a query hooked recommendation widget component:

On the Discover UI components reference site, in the Widget templates section, open the page for Recommendation widget templates.
From the list of templates for recommendation widgets, in the Carousel section, click index.js to copy the code block.
In your React project, if you do not have a folder called widget_components, create one.
In the widget_components folder, create a folder named carousel, named after the selected recommendation widget option.
In the carousel folder, create a JavaScript file, index.js, then paste the copied code block, and save the file.
To avoid compile errors, update the imports section, and save the file.

Note

You can style widget components with theme variables, using styled widget components or by applying custom style in the components.

The widget component in the index.js or index.ts file is based on default product and category entities. They might have more or less attributes than those in your system.

To edit the widget component code to match design:

Open the index.js or index.ts file.
To match your requirements for the widget and to reflect attributes included in the results fetched by the JS SDK, edit the product and category models in the React code.
Save file.

Caution

Make sure all attributes used in a widget component have been defined in the Domain settings section of the CEC. The attributes have to be selected to return in the API.

Invalid entity attributes can throw runtime errors.

If the CLI did not generate a styled.js or styled.ts file, skip the following procedure.

To edit the styles of a styled widget component to match the design:

In the styled.js or styled.ts file, edit the styles.

Theming an application with CSS variables is the fastest way to style your components. You can use the default theme or a custom theme.

To create and use a custom theme:

In your React project, open your application component.
In the component, create a default theme object as shown in the following code block, and fix import statements.
RequestResponse
```
import { createTheme } from '@sitecore-discover/ui'; 

const myTheme = createTheme();
```

To create a custom theme, add CSS variables as shown in the following:

RequestResponse

import { createTheme } from '@sitecore-discover/ui'

const myTheme = createTheme({
  palette: {
    primary: {
      main: '#F00',
      light: '#EEECFB',
      dark: '#4A37D5',
      contrastText: '#fff',
    },
  }
});

In your application component, in the return statement, to the div wrapper of WidgetsProvider, set the value to style as shown in following:
RequestResponse
```
<div style={myTheme.style}>
  <WidgetsProvider>Content nested in theme.</WidgetsProvider>
</div>
```

Do you have some feedback for us?

If you have suggestions for improving this article,

Walkthrough: Creating widget components manually

Create a widget component using the UI reference site.

Edit the widget component code to match design

Edit the styles of a styled widget component

Style widget components with a theme