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

NameDescription
ui_componentUI component to be configured into widget component
typeEnumerator constants for widget type with the following values:

WidgetDataType.RECOMMENDATION, WidgetDataType.PREVIEW_SEARCH , or WidgetDataType.SEARCH_RESULTS
enityeName 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!