Replace the Default SharePoint Search Box with a SmartHub Search Box with Type-Ahead

Caution: SmartHub Upgrade: Regenerate Files
It is very important to regenerate the files that you created by duplicating out-of-the-box files when upgrading SmartHub.
For example: SHSearchboxModernLoader.js, NewResultsPageSettings.js, NewCustomSettingsTemplate.js
There may be changes in the out-of-the-box files that will not be reflected in the old files from the previous installation.

Scope

This page explains how to replace the default SharePoint search box with a SmartHub search box that employs the Type-Ahead feature.

See the graphic below.

Tip: If you are planning to also use the SmartHub UI Results integration check this page as well

Requirements

• SmartHub must be accessible from the internet via HTTPS
• SmartHub must be secured with Azure Active Directory.
• Users must be able to log in to both SharePoint and SmartHub using the same account.
• BA-Insight SearchBox must be installed at the tenant level by deploying the SharePoint package available under your SmartHub installation directory
• Access to the Azure Portal App Registration
  • You must edit the URLs that are allowed to use the App Registration

Procedure

1. Install the BA-Insight SearchBox package.
   1. Navigate to your SharePoint Online Admin Center.
      For example: https://contoso-admin.sharepoint.com/
   2. Open the App Catalog.
      
      1. Click "upload a new app."
      2. Navigate to the "SHSearchbox" directory from your local SmartHub installation:<SmartHub_Root>/integrations/SHSearchbox
      3. Select the sh-searchbox-modern.sppkgfile to upload.
      4. Before clicking "Enable app" make sure you enable the "Enable this app and add it to all sites" checkbox.
      5. Click Enable app
         
2. Create a new folder for your customizations at the root of SmartHub (if it does not already exist) and name it however you want.
   
   1. You will use this to store your custom configuration files so remember the name you use.
   2. The default customizations folder is named
      
      
3. Navigate to /integrations/SHSearchbox and copy and paste theSHSearchboxModernLoader.js file inside your customizations directory from step 2. 
   
   
4. Navigate to /integrations/typeAheadForSPO and copy and paste the files NewResultsPageSettings.js and NewCustomSettingsTemplate.js files inside your customizations folder from step 2.
   
   
5. Edit the SHSearchboxModernLoader.js file from the customizations directory:
   1. Replace https://smarthub.contoso.com/with your SmartHub address.
   2. Ensure the paths to the filesNewResultsPageSettings.jsandNewCustomSettingsTemplate.jspoint to your own folder structure where you keep your modified settings files.
      
      
      
6. Copy theLogin.aspxfile from the SmartHub installation directory to your customizations folder.
   
   
7. Remove the first line (that starts with the <%@ Page directive).
   
   
8. Update the src attribute for all the script tags: prefix the path with the full address to your SmartHub site (https://yoursite.com) as shown in the example below, (which uses the sample site https://smarthub.contoso.com):
   
   
   
   
9. Upload the custom Login.aspx file to your SharePoint asset library.
   
   
10. Open your copy of the settings fileNewResultsPageSettings.js:
    1. Replace https://smarthub.contoso.comat the top of the page with your SmartHub address.
       
       
       
    2. In the sectionSH.Loader.JSFilesToLoad, locate SH.SmartHubAddress + "modules/Authentication/OAuth.js"
       1. Change the propertydata-login-redirect-urito match the full path where you uploaded your custom Login.aspx file.
       2. Change the propertydata-redirect-urito the URL of the page where the query should be executed - usually where the BAInsight Content Editor component lives or the external SmartHub Results page of your Search Center
          See the example below:
          
          
          
          
11. Open your copy of the settings file NewCustomSettingsTemplate.js
    1. Locate the sectionSH.TypeAhead.CustomSettings and ensure yourSuggestionsContainerParentSelectoris set to".CoveoQuerybox"  and SearchBoxInputSelector is set to "input.magic-box-input"
       
       
       
    2. At the end of the file paste the following 2 lines of code. 

SH.SPOSearchBoxIntegration = {};
SH.SPOSearchBoxIntegration.RedirectUri = "https://smarthub.contoso.com/Results.html";

Change the value of SH.SPOSearchBoxIntegration.RedirectUri to match the address of the site where you want the searches to be redirected to. 

Example:

When you want to redirect to a SmartHub results page:

https://smarthub.contoso.com/Results.html

or

When you want to redirect to a SharePoint results page:

https://contoso.sharepoint.com/sites/search/results

12. Open theweb.configfile from SmartHub:
    
    1. Uncomment the<httpProtocol>section for cross-domain requests.
    2. Modify the value of the "Access-Control-Allow-Origin" key to match your SharePoint root addresss - such as: https://contoso.sharepoint.com 
       
       
       
       
13. Navigate to the SmartHub Administration page.
    
    
14. Go to the Security Settings section.
    
    
15. Add your URL to theTrusted App Redirect URLsfield.
    
16. ClickSave.
    
    
    
    

17. Before enabling the SmartHub integration in your SharePoint instance, you must configure the settings in the integration file.

    1. Navigate to theinstall.ps1file at <SmartHub_root>/integrations/SHSearchbox/install.
       
    2. Edit theinstall.ps1file and configure the settings based on the details provided in the table below:

    Setting name	Usage	Sample/default value
    $adminUser	The user used to install the application in each site collection. The username must be atenant administrator.
    $adminPass	The password of the tenant administrator (above)
    $adminSite	The URL to your SharePoint Admin Center.	https://contoso-admin.sharepoint.com
    $loaderPathURL	URL Path to where the customizedSHSearchboxModernLoader.jsfile is located.	Example: https://smarthub.contoso.com/custom/SHSearchboxModernLoader.js
    $excludeAlreadyInstalled	$trueor$false. Controls whether the application should be reinstalled on sites where it's already installed. This is useful when youchange theconfiguration and want to apply the change everywhere.	$true
    $sitesToInstallOn	Optional. If you do not want the integration to be applied to all of the currently available sites (automatically enumerated at install time), specify all the site URLs where it should be installed	Example: @("https://contoso.sharepoint.com/site1Address", "https://contoso.sharepoint.com/site2Address")
    $mode	Controls the process - install or uninstall. This enables you to remove the integration.	install

18. Use the following instructions to install the integration into SharePoint via Windows PowerShell.

    Caution: If your O365 account requires multi-factor authentication (MFA), BA Insight requires you instead use the "app password" approach when performing the following PowerShell installation.
    The "app password" method is described here: https://docs.microsoft.com/en-us/azure/active-directory/user-help/multi-factor-authentication-end-user-app-passwords.
    Once the PowerShell installation is complete, the app password is no longer required.

    1. OpenWindows PowerShellas administrator.
    2. Navigate to the SmartHub installation directory underintegrations/SHSearchbox/install.
    3. Run the./install.ps1PowerShell script.
    4. The PowerShell script outputs a message when it finishes.
       
       
19. Disable the default SharePoint Online SearchBox by running the SharePoint Online PowerShell command outlined here.