How to Display SmartHub Results in a SharePoint Page

Scope

This page explains how to configure SharePoint to display the SmartHub pages within a SharePoint page.

Note: If you are planning to also use the SmartHub Searchbox integration check this page as well.

Requirements

  • Modern pages only: The BA Insight Content Editor web part must be installed at the tenant level.

    • This is done by deploying the SharePoint package available under your SmartHub installation directory. See below.

  • 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 Online and SmartHub using the same account
  • Access to the Azure Portal App Registration
    • You must edit the URLs that are allowed to use the App Registration

Procedure

  1. Open the file web.config located in the SmartHub root installation directory.

  2. Remove the X-Frame-Options and Content-Security-Policy headers.


  3. Navigate to the SmartHub installation directory and copy the file Login.aspx to a different directory (for editing).

  4. Open the copy of the file Login.aspx for editing.

  5. Remove the first line (that starts with the <%@ Page directive).

  6. 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):



  7. Save and close the edited file.
  8. Upload the edited Login.aspx page to a SharePoint Online web site that everyone has access to:
    1. This is usually the root site:
      • https://customer.sharepoint.com
    2. This page is used by the integration in case the session expires, and seamless authentication is not possible for various reasons.
    3. Because any user might be redirected to this page, ensure the location where you upload the file is available to any user who might access the SharePoint Online page with SmartHub embedded in it.
  9. Navigate to the directory where you have your custom Results HTML page.
    • Note: You can only use the default, out-of-the-box page, Results.html when using the SmartHub page in a standalone configuration (without integrated SearchBox).
  10. Create a copy of the custom Results page and its custom settings file and give it another name, such as "SPOEmbed-Results.html".
  11. In SmartHub, open the UI Editor to edit your results page. For more information, see how to use the UI builder.
  12. Edit the file SPOEmbed-Results.html and make the following changes:
    1. Remove all the non-script tags from the head and everything above the <head> tag.
    2. Replace the <head></head> and <body></body> tags with <div> and </div> while keeping the inner contents of those tags:


    3. For the DIV with ID "search" add a new attribute data-main="true"
    4. Replace the src attribute of logo with absolute URL.


    5. Change the SHRootLevelURL value to your SmartHub root address, as shown below:


    6. When using a custom settings file:

      1. From your Results.html page remove the line for CustomSettingsFile

      2. Add the following line of code in its place:

        Copy
        const customSettingsFile = SHRootLevelURL + "/_bai/v1.0/pagesettings" + "/?page=" + encodeURIComponent("/customer/CustomResultsPage.html");

      3. The SPOEmbed-Results.html page should be reassembled as follows:

        Info: Notice that "/customer/CustomResultsPage.html" is the relative URL of your custom results page.

  13. In the UI Editor, open and edit the page settings file that is used by the custom results page.

  14. Change the URL to any custom CSS or JavaScript file that was added to it to use the full SmartHub URL instead of the relative URL (or to use the SHRootLevelURL as shown below):


  15. In the custom settings file add the following code to the SH.Loader.FilesToLoad section.
    1. Add the URL to point to the location of custom style for content editor and other JavaScript/CSS files that you want.
    2. Add the URL to point to the location of the Login.aspx page that you uploaded to SharePoint in step 4, above:
      Copy
      LoginSnippet + ContentEditorStyle
      "https://smarthub.contoso.com/integrations/spo/contentEditor.css": {},
      "https://smarthub.contoso.com/modules/Authentication/OAuth.js": {
          "params": {
              "data-login-redirect-uri": "https://customer.sharepoint.com/SitePages/Login.aspx"    
              }
      }

The complete, final settings file resembles the code shown below:


  1. In the custom settings file, search for SH.AuthDialog.CustomSettings section

    1. Change the ParentContainer selector to "#search" for example.

    2. This AuthDialog is used when the authentication token expires and it needs an user action to refresh the authentication token.

    3. Changing from body to "#search" in SPO integration, will know where in page to displayed the refresh button when authentication token expires.

      4. Copy 
      SH.AuthDialog.CustomSettings = {
          ParentContainer: "#search"
      };

  2. To make "edit page" functionality work properly, add your relative path to custom results page as a new line:


  3. Navigate to the Azure Portal App registration used by SmartHub authentication.

  4. Edit the list of Single-page applications (under Authentication).

    1. Add the URL to the Login.aspx page you uploaded to SharePoint, such as https://customer.sharepoint.com/SitePages/Login.aspx

  5. Navigate to the page where you want to make SmartHub available.

    1. Edit the page and add the Content Editor web part to it.

    2. Edit the properties of the web part.

    3. In the case of a modern page installation the BA-Insight Content Editor web part since there is no SharePoint Modern Content Editor web part available out of the box

      1. Navigate to your SharePoint Online Admin Center.

        1. For example: https://contoso-admin.sharepoint.com

      2. Open the App Catalog.

        1. Click "upload a new app."

        2. Navigate to the "Content Editor" directory from your local SmartHub installation: <SmartHub_Root>/integrations/spo/web parts/Content Editor

        3. Select the bai-content-editor-v6.sppkg file to upload.

        4. Before clicking "Enable app" make sure you enable the "Enable this app and add it to all sites" check box.

        5. Click Enable app

  6. In the web part properties enter the full URL to your custom SPOEmbed-Results.html page

    1. Example: such as https://smarthub.contoso.com/customer/SPOEmbed-Results.html

    2. In the case of a modern page, ensure you check the option "Make _spPageContextInfo available" in the BA Insight Content Editor web part options.

  7. Save the web part changes and publish the page.