setWidget function

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

Import path

RequestResponse

import ( setWidget ) from '@sitecore-search/react';

Arguments

You can use this function with or without specifying the entity. When you specify the entity, only the search results using that entity are returned.

Name	Description
`rfkId`	String. ID of widget as configured in the CEC.
`config`	See following config object schema.

RequestResponse

const MySDKSearchResultsWidget = setWidget('sdk_search', {  type: WidgetDataType.SEARCH_RESULTS,  component: MySDKSearchResultsComponent } );

Using the function with a specific entity.

Name	Description
`rfkId`	String. ID of widget as configured in the CEC.
`entity_type`	String. Used to filter search results for a specific entity type.
`config`	See following config object schema.

RequestResponse

const MySDKSearchResultsWidget = setWidget('sdk_search', 'content', {  type: WidgetDataType.SEARCH_RESULTS,  component: MySDKSearchResultsComponent } );

Config object

Name	Description
`component`	UI component to be configured into widget component
`type`	Enumerator for widget type with following values: `WidgetDataType.RECOMMENDATION`, `WidgetDataType.PREVIEW_SEARCH` , or `WidgetDataType.SEARCH_RESULTS`

Name

Description

component

UI component to be configured into widget component

type

Enumerator for widget type with following values:

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

Example

RequestResponse

import { WidgetsProvider, WidgetDataType, setWidget } from "@sitecore-search/react";
import ( MySDKSearchResultsComponent ) from "./widgetvics/mySDKSearchResultsComponent";

const MySDKSearchResultsWidget = setWidget('sdk_search', 'content', {  type: WidgetDataType.SEARCH_RESULTS,  component: MySDKSearchResultsComponent } );

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

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

          </WidgetsProvider>
)};

Do you have some feedback for us?

If you have suggestions for improving this article,