1. Developing the UI walkthrough series

Walkthrough: Creating widget components using the CLI

This walkthrough is the part two 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 with Discover UI components CLI.You need to repeat this walkthrough for every widget in your project.

Alternatively, you can create widget components by manually copying and pasting code from the UI reference site.

This walkthrough describes how to:

  • Install the Discover UI Components CLI.
  • Create a widget component with the UI Components CLI.
  • Edit the widget component code to match design.
  • Edit the styles of a styled widget component
  • Style widget components with a theme.

Install the Discover UI Components CLI

To install the UI Components CLI:

  1. In the terminal of your IDE, run the following:

    npx install --save-dev @sitecore-discover/cli

  2. In a file called .sc-discover-settings.json, add the location for widget components as shown in the following code block:

    {
    "components-path": "src-test/components"
}

Create a widget component with the Discover UI Components CLI.

To create a widget component with Discover UI Components CLI:

  1. In the root of your project or in the folder where you have .sc-discover-settings.json, run the following in the terminal:

    npx sc-discover new-widget

  2. To create a widget component in your desired location, provide answers to select a widget template in the displayed prompts.

    Note

    The CLI generates an index.js or index.ts file based on your language choice.

    If you choose a styled template, the CLI also generates a styled.js or styled.ts file.

Edit the widget component code to match design

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 your design:

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

Caution

Make sure all attributes used in a widget component have been defined in the CEC and are marked to return in the API.

Invalid entity attributes can throw runtime errors.

Edit the styles of a styled widget component

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.

Style widget components with a theme

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:

  1. In your React project, open your application component.

  2. In the component, create a default theme object as shown in the following code block, and fix import statements they are broken.

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

const myTheme = createTheme();

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

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

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

  4. In your application component, in the return statement, in the div wrapper of WidgetsProvider, set the value to style as shown in following:

    <div style={myTheme.style}>
  <WidgetsProvider>Content nested in theme.</WidgetsProvider>
</div>
If you have suggestions for improving this article, let us know!