How To Configure the SearchBox

• About SmartHub SearchBox

• How to Configure the SmartHub SearchBox

• SearchBox Settings

• Exposed Functions and Available Events

About SmartHub SearchBox

The SmartHub SearchBox module enables you to execute queries.

How to Configure the SmartHub SearchBox

UI Builder

• The easiest and fastest way to insert and customize the SearchBox is via the SmartHub UI Builder.

• To configure the SearchBox component, you edit the Advanced Settings file that you are using for your SmartHub pages (procedure below).

• For more information about using Custom Settings, see How to Use the UI Builder.

• You can override any setting by adding it to the SH.SearchBox.CustomSettings namespace.

Procedure:

1. SmartHub administrators can simply click the UI Editor link from the SmartHub ADMINISTRATION page.

2. Click the Select a page link from the top menu.

3. Select (double-click) an HTML page such as Results.html page.

   1. Below, the Results.html page is shown for sample purposes.

   2. BA Insight recommends you use page and folder to modify. Leave the default files as templates.

      1. Example: pages/CustomResults.html. Default Results.html is under the top most SmartHub directory.

4. Select the Advanced mode from the top right of the page.

5. Select Advanced settings edit.

6. Scroll down to line 301 (this may vary), which contains the text "SH.SearchBox.CustomSettings"

   
   
   

7. Click the See Default Settings link at the top right.

8. A new browser tab opens with all available SmartHub module settings.

9. Scroll down (towards the bottom of the page) to the line that contains the text "SH.SearchBox.DefaultSettings = {"
   
   

10. Copy the settings under settings after the text "SH.SearchBox.DefaultSettings = {".

11. Go back to your Advanced settings edit tab.

12. Paste the copied settings inside the section "SH.SearchBox.CustomSettings = {".

13. Modify the settings as desired. See the table SearchBox Settings below for more information.

14. Note the Template files referenced:

    • searchboxTemplate.html

    • scopedSearchTemplate.html

    • keepRefinersTemplate.html

15. These templates can be modified. They are located in the directory:

    • <SmartHub-install-dir>\modules\SearchBox\templates

16. Click the link "Preview <file>.html" at the top of the page.

17. Return to the previous page and make changes, if necessary. Repeat Step 15 until the desired results are achieved.

18. Click Save changes.

Example Configuration

SH.SearchBox = SH.SearchBox || {};
SH.SearchBox.DefaultSettings = {
    ".sh-search-section": {
        Enabled: true,
        SearchBoxTemplatePath: SH.RootLevelURL + "/modules/SearchBox/templates/searchboxTemplate.html",
        ScopedSearchTemplatePath: SH.RootLevelURL + "/modules/SearchBox/templates/scopedSearchTemplate.html",
        KeepRefinersTemplatePath: SH.RootLevelURL + "/modules/SearchBox/templates/keepRefinersTemplate.html",
        ShowScopedSearch: true,
        ShowKeepRefiners: true,
        RemoveResultsOnClear: true,
        ShowSelectedScope: false,
        EnableDuplicateSearch: true,
        ModuleDetails: {
            SearchBoxPlaceholder: "Search...".toLocaleString(),
            KeepRefinersLabel: "Keep Refiners".toLocaleString()
        }
    },

    ".search-within": {
        Enabled: false,
        SearchWithin: true,
        SearchBoxTemplatePath: SH.RootLevelURL + "/modules/SearchBox/templates/searchboxTemplate.html",
        ModuleDetails: {
            SearchBoxPlaceholder: "Search within...".toLocaleString(),
            KeepRefinersLabel: "Keep Refiners".toLocaleString()
        }
    }
}

SH.SearchBox.CustomSettings = {    
        ".sh-search-section":{
            Enabled: true,
            SearchBoxTemplatePath: SH.RootLevelURL + "/modules/SearchBox/templates/searchboxTemplate.html",
            ScopedSearchTemplatePath: SH.RootLevelURL + "/modules/SearchBox/templates/scopedSearchTemplate.html",
            KeepRefinersTemplatePath: SH.RootLevelURL + "/modules/SearchBox/templates/keepRefinersTemplate.html",
            ShowScopedSearch:true,
            ShowKeepRefiners:true,
            RemoveResultsOnClear:true,
            ShowSelectedScope:false,
            EnableDuplicateSearch:true,
            ModuleDetails: {
                SearchBoxPlaceholder: "Search...".toLocaleString(),
                KeepRefinersLabel: "Keep Refiners".toLocaleString()
            }
        }
            
    } 

SearchBox Settings

The SearchBox parameters and their values are listed below.

Exposed Functions and Available Events

Available Events