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

• About

• How to Set Up SmartHub Search Box with SharePoint Modern Pages

  • Back up the configuration file

  • Set up the Login.aspx page

  • Use the SmartHub Application Loader for Modern SharePoint Online

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

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 asset library.

   1. Make sure the URL to the Login.aspx resembles this format and structure:
      https://contoso.sharepoint.com/mysite/Login.aspx

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.

      1. Example: "/mysite/Login.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