Walkthrough: Creating widget components

This walkthrough is the part two of the Rapid development using Search UI components walkthrough series.

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

Typically, the configurations in Sitecore Search contain the following:

A preview search widget, configured to display on all pages.
A search results widget, configured to display only on a search results page.
A recommendation widget, configured to display recommendations on a webpage.

This walkthrough describes how to create a widget components. You need to repeat this walkthrough for every widget in your project.

This walkthrough describes how to:

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

The UI Components Reference section describes various widget templates for content items. For every widget type, there are different layout options. Each topic offers various procedures with code blocks that you can use in your React project.

Your choice will be based on your programming language, type of component, and use of Search UI Components CLI.

To create a styled basic preview search widget component using Search UI components:

To install the Search UI Components package, open the terminal of your IDE or command prompt and run the following command:
RequestResponse
```
npm i @sitecore-search/ui
```
From the menu of this web page, open the Templates for content items section then click on Preview search.
To open the desired topic, click Basic preview search.
In the Styled component section, select the TS CLI tab.
To create the widget component in your React project, follow all the instructions in the tab.

The entity or model in the widget component might not match an entity in Sitecore Search. You need to make sure that the code uses the correct entity or model and attributes.

In the UI components reference section, all widget templates are created content type entities. Depending on your implementation, you may need to modify the generated components to match their attributes.

To edit the widget component code to use an entity configured in Sitecore Search:

Open the index.ts, index.tsx, index.js, index.jsx or the file where the widget component is defined.
In the first section of the file, in the model declaration, if required, replace the name of the model with the entity you want to use.
Match the attributes of the model to those of your entity.
To display values for entity attributes, edit the HTML.
In the widget function, include your entity name.
Save the file.

Caution

You must make sure all attributes used in a widget component have been defined in Sitecore Search and are marked to return in the API. Invalid entity attributes can throw runtime errors.

Note

If you are using the same widget component for multiple entities, ensure that the model and HTML works for all the entities.

Tip

Include the entity type in the component and file names to identify the entity or model in the code.

If you created a Plain component or do not want to style the widget, skip this procedure.

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

In the file with styled primitive components or styles, edit the styles.

Theming an application with CSS variables listed in Search UI components reference 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-search/ui'; 

const myTheme = createTheme();
```

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

RequestResponse

import { createTheme } from '@sitecore-search/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>Nested content.</WidgetsProvider>
</div>
```

Do you have some feedback for us?

If you have suggestions for improving this article,

Walkthrough: Creating widget components

Create a widget component using Search UI components

Edit the widget component model

[Optional] Edit the styles of a styled widget component

[Optional] Style widget components with a theme