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

  • BA-Insight Content Editor web part needs to be installed at the tenant level by deploying the SharePoint package available under your SmartHub installation directory
  • 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. Install the BA-Insight Content Editor web part
    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 "Content Editor" directory from your local SmartHub installation: <SmartHub_Root>/integrations/spo/web parts/Content Editor
      3. Select the bai-content-editor-v5.sppkg file 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. Navigate to the SmartHub installation directory and copy the file Login.aspx to a different directory (for editing).

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

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

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



  6. Save and close the edited file.

  7. Upload the edited Login.aspx page to a SharePoint Online web site that everyone has access to:
    1. This is usually the root site at 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.

  8. Navigate to the directory where you have your custom Results HTML page.
    Note: Only when using SmartHub page standalone (without integrated SearchBox), can you also use the default, out-of-the-box page, Results.html.

  9. Create a copy of the custom Results page and its custom settings file and give it another name, such as "SPOEmbed-Results.html".

  10. 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:



  11. Open the custom Results settings file (used by the Results page) for editing. 

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



  13. In the custom settings file add the following code to the SH.Loader.FilesToLoad section.
    1. Change the URL to point to the location of custom style for content editor and other javascript/css files that you want.
    2. Change the URL to point to the location of the Login.aspx page that you uploaded to SharePoint in step 4, above:
      LoginSnippet + ContentEditorStyle
      Copy
      "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"    
              }
      }
  14. If you do not plan to use the SmartHub SearchBox integration then add the following code to the SH.Loader.FilesToLoad section.
    1. Change the URL to reflect your own SmartHub address
      LoginSnippet
      Copy
      "https://smarthub.contoso.com/integrations/spo/spoEmbedded.js": {}

  15. In the custom settings file ensure you exclude the polyfills library from loading.
    Add the following code to the SH.Loader.PathsToExclude section:

    Copy 
    SH.Loader.PathsToExclude = [
         [SH.RootLevelURL + "/modules/SmartHubResourceLoader/lib/polyfills.js"]
    ];
  16. 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 the root of your SharePoint site URL.
      1. For example: https://{CustomerName}.sharepoint.com 


      2. Uncomment the <caching enabled="true" enableKernelCache="false" /> section (in this example it is line 397).


  17. Navigate to theSmartHub Administrationpage.

  18. Go to theSecurity Settingssection.

  19. Add your SharePoint site URL to theTrusted App Redirect URLsfield.
  20. ClickSave.



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

  22. 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.



  23. Navigate to the page where you want to make SmartHub available.
    1. Edit the page and add the BA Insight Content Editor web part to it.
    2. Edit the properties of the web part.
    3. In the web part properties enter the full URL to your custom SPOEmbed-Results.html page such as https://smarthub.contoso.com/customer/SPOEmbed-Results.html
    4. Check the "Enable classic _spPageContextInfo" option
    5. Save the web part changes and publish the page.

Note

Note: SharePoint Online Modern pages only allow full-width web parts to exist on pages created under a Communication site collection.
We recommend the Search page be created under a Communication site.
Further, the page should employ the full-width section to provide more width to the web part.
This ensures the UI displays properly and fills the entire width of the page.