1. Search JS SDK for React

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

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 Sitecore Search.

config

See following config object schema.

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 Sitecore Search.

entity_type

String. Used to filter search results for a specific entity type.

config

See following config object schema.

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

Example

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>
)};
If you have suggestions for improving this article, let us know!