Edit the widget component model

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:

  1. Open the index.ts, index.tsx, index.js, index.jsx or the file where the widget component is defined.

  2. 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.

  3. Match the attributes of the model to those of your entity.

  4. To display values for entity attributes, edit the HTML.

  5. In the widget function, include your entity name.

  6. 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.

Do you have some feedback for us?

If you have suggestions for improving this article,