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

About

This feature:

  • Integrates the SmartHub Search box into SharePoint Modern pages:

    • All searches are redirected to your SmartHub site

  • Integrates TypeAhead functionality into SharePoint Modern pages

Prerequisites

Note the following prerequisites that must be satisfied before replacing the default SharePoint search box with a SmartHub search box with Type-Ahead:

  • PowerShell v7.x must be installed on the same device as your SmartHub installation.

How to Set Up SmartHub Search Box with SharePoint Modern Pages

Back up the configuration file

  1. Navigate to the directory where SmartHub is installed.

  2. Open web.config and remove the X-Frame-Options and Content-Security-Policy headers.

  3. From /integrations/searchBoxForModernSPO copy the following file:

    1. SHSearchboxModernCustomSettingsTemplate.js

  4. Paste the file to the directory where you keep your customizations.

    1. For example: <SmartHubInstallDirectory>/customer/SHSearchboxModernIntegration

    2. Any settings related to the search box will be done in this file

    3. Save the location where you copied this file.

Set up the Login.aspx page

  1. Copy the Login.aspx file from the SmartHub installation directory to your customizations folder.

  2. Edit your copy of Login.aspx page and replace all script src with your full SmartHub address.

    1. For example:

      1. <script src="https://contoso.smarthub.com/modules/SmartHubResourceLoader/lib/jquery.js"></script>

  3. Delete all the characters in the first line at the top of the Login.aspx file between <% and %>.

  4. Upload the custom Login.aspx file to your SharePoint Pages library.

    1. Make sure the URL to the Login.aspx resembles this format and structure: https://domain.sharepoint.com/sites/SITE/Pages

    You are not able to upload pages to the Pages folder directly. You must run the following PowerShell command to upload your custom login page: 
    Set-ExecutionPolicy Undefined
    Connect-SPOService -Url 
    https://domain-admin.sharepoint.com
    Set-SPOSite
    https://domain.sharepoint.com/sites/SITENAME
    -DenyAddAndCustomizePages 0

  5. Edit your copy of SHSearchboxModernCustomSettingsTemplate.js

    1. Replace "data-login-redirect-uri": "/SPOSite/LoginForSPO.aspx" with the path to your custom Login.aspx page. For example, "/mysite/Login.aspx".

      You can also use the full site URL that you uploaded your custom login page to in step 4. For example, "data-login-redirect-uri": "https://domain.sharepoint.com/sites/SITE/Pages/CustomLogin.aspx"

    2. Replace "data-redirect-uri": SH.SmartHubAddress + "/Results.html" with the path of the page where you want clicking on suggestions to redirect to.
      Note: Leave as is if you want to use the default Smart Hub address.

  6. Go to your Azure Portal and add select the app registration that you used for SmartHub

    1. Register the address of the custom Login.aspx page as a Redirect URI.

      1. Example: https://contoso.sharepoint.com/mysite/Login.aspx

    2. More information can be found in the Redirect URIs section of this page: Azure Active Directory Authentication.

  7. Go to SmartHub Admin > Security

  8. Add the SharePoint online domain in the Trusted Apps box. This is required to enable CORS.

  9. Example: https://contoso.sharepoint.com

Use the SmartHub Application Loader for Modern SharePoint Online

  1. You will be using the SmartHub Application Loader app to inject the "/integrations/searchBoxForModernSPO/SHSearchBoxModernLoader.js" file into SharePoint Online

  2. Follow the steps here on how to install and configure: How to Install and Configure the SmartHub Application Loader for Modern SPO

Hide the default SharePoint Online search box

To hide the default SharePoint online search box, do the following:

  1. Navigate to the directory where SmartHub is installed.

  2. open the \integrations\searchBoxForModernSPO\ folder.

  3. Open SearchBoxVisibility.ps1 PowerShell script in a text editor.

  4. Update the $SitesToInstallOn variable with the sites where you want to have the default SPO search box hidden. Usually, this has the same value as the SitesToInstallOn setting that is configured in the SmartHub Application Loader for Modern Pages in SharePoint Online topic. For example, Ex: "https://contoso.sharepoint.com/site1Address, https://contoso.sharepoint.com/site2Address"

  5. Update the $InstallInSiteCollection if you want to hide the SPO search box in all the sites within a Site Collection or just the specified site. The default value $true will hide the SPO search box in all the sites within a Site Collection.

  6. Update the $HideSearchbox in order to enable or disable the SPO search box. The default value $true will hide the SPO search box.

  7. Run the PowerShell script.