How to Add TypeAhead to a Web Page Outside of SmartHub

Use the information on this page to add TypeAhead to a custom HTML page outside of SmartHub, such as a:

  • SharePoint page
  • Internal corporate home page

Procedure:

  1. Navigate to the directory where SmartHub is installed.

  2. Under /integrations/typeAheadForSPO copy the following files:
    1. NewCustomSettingsTemplate.js
    2. NewResultsPageSettings.js 

  3. Paste the files to the directory where you keep your customizations.
    1. For example: <SmartHubInstallDirectory>/MyCustomerCustomization.
      Note: BA Insight recommends you copy and rename the directory <SmartHubInstallDirectory>/CustomerCustomization before changing the files in it, so that your modifications are not overwritten when SmartHub is upgraded.
    2. For more information about customizing SmartHub see How to Create Custom Pages.
  4. Edit your custom page to inject the SmartHub loader:

      1. Add the following code block in the <script> element of your page.

        SmartHub loader code

      2. Copy
        <script>        {
                      var bodyElem = document.body;
                      bodyElem.className += ' ' + 'BAInsightCustom';

                    const customSettingsFile = "https://smarthub.contoso.com/customer/TypeAheadForSPO/NewCustomSettingsTemplate.js"            const neverCachedJS = [
                        "https://smarthub.contoso.com/customer/TypeAheadForSPO/NewResultsPageSettings.js",
                        customSettingsFile,
                        "https://smarthub.contoso.com/modules/SmartHubResourceLoader/SmartHubResourceLoader.js"            ]

                    const now = new Date().getTime()

                    neverCachedJS.forEach(function (src) {
                        const script = document.createElement('script')
                        script.src = src + '?' + now
                        script.async = false
                        document.head.appendChild(script)
                    });

                    document.addEventListener("shLoaderReady", function() { SH.ResourceLoader.loadResources(); });
                }
        </script>

      3. Replace  https://smarthub.contoso.com/  with your SmartHub address.

      4. Ensure the paths to the files NewResultsPageSettings.js and NewCustomSettingsTemplate.js point to your own folder structure where you keep your modified settings files. For example: <SmartHub_root>\"MyCustomerCustomization"\CustomerCustomization\settings\.

  5. Add the following <div> code to the <body> section of your page:

    <div id="search" class="CoveoSearchInterface" data-enable-debug-info="false" data-auto-trigger-query="false" data-hide-until-first-query="false" data-enable-duplicate-filtering="true" data-enable-history="true" data-design="new"></div>
  6. If you have not already done so, make a copy of the file NewCustomSettingsTemplate.js, located at <SmartHub root>\integrations\typeAheadForSPO.

  7. Open the new file.

  8. Locate the section SH.TypeAhead.CustomSettings  and edit SuggestionsContainerParentSelector and  SearchBoxInputSelector properties to match your selectors.


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

  10. Edit your copy of Login.aspx page and replace  https://smarthub.contoso.com/  with your SmartHub address.

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



  12. In the redirect URL section, around line 37, add the full path to the Azure application directory where you uploaded your custom Login.aspx file.

  13. Upload the custom Login.aspx file to your SharePoint asset library.

  14. Open your copy of the settings file NewResultsPageSettings.js:
    1. Replace  https:// smarthub.contoso.com  at the top of the page with your SmartHub address.



    2. In the section SH.Loader.JSFilesToLoad , locate  https://smarthub.contoso.com /modules/O365/SPOAuth.js and change the property data-login-redirect-uri to match the full path where you uploaded your custom Login.aspx file.
      See the example below:



  15. Open the web.config file 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 site URL.



  16. Next, add your URL to SmartHub's Trusted App Redirect URLs.
  17. Navigate to the SmartHub Administration page.

  18. Go to the Security Settings section.

  19. Add your URL to the Trusted App Redirect URLs field.
  20. Click Save.



  21. When the page loads, you are prompted to login using the authentication mode specified in SmartHub.
    This mode was set when you configured SmartHub.

Caution: The authentication mode in SmartHub must be set to Azure Active Directory.