1. High order functions

widget function

Use the widget high order function to configure UI components into widget components that can be added to the WidgetsProvider component.

Import path

import widget from '@sitecore-discover/react';

Arguments

Name

Description

ui_component

UI component to be configured into widget component

type

Enumerator constants for widget type with the following values:

WidgetDataType.RECOMMENDATION, WidgetDataType.PREVIEW_SEARCH , or WidgetDataType.SEARCH_RESULTS

enitye

Name of entity represented in the data source or results displayed in the widget. This can be found in the CEC.

Example

import { WidgetsProvider, WidgetDataType, widget } from '@sitecore-discover/react';
import MyGlobalPreviewSearch from "./widget_components/myGlobalPreviewSearch";
import MyGlobalRecommendationWidget from "./widget_components/myGlobalRecommendationWidget";  

import MySDKSearchResultsComponent from './widget_ui_components/mySDKSearchResultsComponent';

const MySDKSearchResultsWidget = widget(MySDKSearchResultsComponent, WidgetDataType.SEARCH_RESULTS);

const Root = () => {
    return (
          <WidgetsProvider
                publicSuffix='true'
                env='<environment>'
                customerKey='<customer key>'
                apiKey='<api key>'
                useToken >

            <header>
              <h1>My Application</h1>
              <MyGlobalPreviewSearchWidget rfkId="header_ps" />
            </header>
          
            <div class="content">
                <MySDKSearchResultsWidget rfkId = "sdk_search"/>
            </div>
          
            <footer>
                <MyGlobalRecommendationWidget rfkId="footer_rec" />
            </footer>

          </WidgetsProvider>
)};
Note

Widget components without a rfkId value render as a widget component of its widget type.

When a widget component is not declared for a rfkId value, the widget component associated for the widget type, if declared, is rendered.

If you have suggestions for improving this article, let us know!