Extending global search

Learn how you can customize and extend your global search implementation to add new search types.

About this task

You can extend the global search implementation in Sterling Store Engagement to add custom search types. By default, only order and customer search is available.

Procedure

Create the following folder structure under SCREEN_EXTENSIONS_HOME, if not already present:SCREEN_EXTENSIONS_HOME/features/global-search
Navigate to the SCREEN_EXTENSIONS_HOME/features/global-search folder.
Copy global-search-extension.module.ts from the <WORKSPACE>/store-frontend/src/app/features/global-search folder to the <WORKSPACE>/store-frontend/store-extensions-src/app/features/global-search folder.

Note: If the global-search-extension.module.ts file is already present in the <WORKSPACE>/store-frontend/store-extensions-src/app/features/global-search folder, do not copy the file.
To create a new alert, perform the following steps:
1. Run the following command:
```
ng g c features/global-search/<componentName> --project=store-extensions --skip-import
```
2. Update the search component class name in declarations, exports, and entryComponents property of @NgModule decorator in global-search-extension.module.ts.
To create a service or provider for the new search component, perform the following steps:
1. Run the command: ng g s features/global-search/<serviceName> --project=store-extensions
2. Update the service or provider name in providers of @NgModule decorator in global-search-extension.module.ts.

In the store-customization-impl.ts file, update the extensionGlobalSearchConfigList property with the JSON specification as follows:

static extensionGlobalSearchConfigList: IGlobalSearchConfig[] =  [
          {
              type: 'Order',
              tid: 'Order',
              iconClass: 'app-icon-receipt',
              resourceId: 'ISF000039',
              component: OrderSearchComponent,
              displayBundleKey: 'orderSearch.TITLE_OrderSearch'
          }
]

A sample JSON specification that shows various properties for IGlobalSearchConfig is given.

Table 1. Extending global search
Attribute	Description
`type` {string} (Required)	Unique identifier for the search type.
`tid` {string} (Required)	Unique identifier for the testing of search type.
`component` {component}(Required)	Reference of the component to be rendered for search type.
`iconClass`{string} (Required)	Icon class of the search type.
`resourceId` {string} (Required)	Identifier for the resource permission associated with the search type.
`displayBundleKey` {string}(Required)	Bundle key of the display text of the search type.
`hide` {boolean}(Optional)	Flag to indicate whether to hide the search type or not.