Blog of Paul Borisov: Alter Modern UI of SharePoint Online pages using just a conventional JavaScript

In one of my recent projects, I have discovered a relatively quick and simple way to extend Modern UI of SharePoint pages without deploying any tailor-made SPFx-component.

As you probably know, Microsoft has prohibited execution of conventional JS-code in Modern pages of SharePoint Online / 2019 "on-prem".

There is an official option to enable running JS-code in Modern SharePoint sites - by turning off NoScript feature - but it only permits running JS-code in classic pages.

It's pity but Modern UI pages of SharePoint do not support execution of conventional JavaScript by design, even with NoScript feature disabled.

To address this problem, Microsoft usually suggests coding relatively time-consuming SPFx components. And, of course, you need to study how to code them. In many cases, it simply does not worth to mess with SPFx parts for the sake of making a tiny dynamic change or correction in Modern UI. For example, to inject a short informational block at the end of the current navigation in O365 Group.

However, I have found an interesting undocumented breach in Modern UI of SharePoint, which permits direct injection and execution of conventional JavaScript in modern pages.

Shortly about the technique

1. Create a classic page in some classic site of SharePoint, which permits execution of JavaScripts in it. This site can have different URL but it should be in the same tenant.
- For example, /siteassets/modern/pages/classic.aspx. Hint: you can use /_layouts/15/spcf.aspx to add a new web-part page to a desired library and then move it to another folder.

2. Add a standard Embed Client Web Part to a Modern page of SharePoint, which you want to extend with conventional JavaScript.

3. Configure Embed-part to load the classic page from p.1. Embed-part is rendered a regular IFrame by default.

4. Add a custom JS-code file to a SharePoint library
- For example, to be available as /siteassets/modern/js/custom-modern-ui.js

5. Add this JS-code to the classic page. This code will inject itself and any additional JS-scripts into its parent Modern page via IFrame. And the injected code can do any changes on the Modern page!

It's technically possible to do because the parent page with IFrame and the classic page loaded into the IFrame's body have the identical origin in the same tenant.

Using the described technique, it becomes easy to utilize, for example, classic SharePoint modal dialogs in Modern UI pages of O365 Groups (see the screenshots). I know that many of my fellow developers and users would still want to have them in Modern UI.

What's important, this technique works independently on NoScript feature. It does not matter if it's turned on or off.

People, company, and event names shown in the screenshots below are fictitious. Any similarities to real ones are merely coincidental.

Sample JavaScript injector

(function () {
  // --------------------------------------------------------------------------------------------------------
  // SharePoint Online conventional JavaScript extender for Modern UI pages.
  // --------------------------------------------------------------------------------------------------------
  // Copyright: Paul Borisov, 2018. You can use the code below "as is" or modified without any limitations.
  // Should you find this module useful in your projects/tasks please keep this copyright header intact.
  // --------------------------------------------------------------------------------------------------------
  // Usage:
  // Put this code to some place in your SharePoint Online Tenant. 
  // For example, make it simple and put it to /siteassets/modern/js/custom-modern-ui.js
  // - Note/change the reference at line 56: /siteassets/modern/js/custom-modern-ui.js
  // Add a reference to the JS-file into a classic page of a classic SharePoint site situated in the same
  // SharePoint Online tenant (i.e. it should have the same origin as your Modern UI page).
  // For example, /siteassets/modern/pages/classic.aspx
  // - Note/change references at lines 202 and 212:
  // iframe[src*='\/classic\.aspx'], /siteassets/modern/pages/classic.aspx
  // Note you can also use a modern SharePoint site with disabled NoScript feature. 
  // After that, edit your Modern UI page, add OOB Embed-part, and configure its IFrame source 
  // to point to your classic page (see above). Save changes, publish the page, and reload it.
  // Expected results: the code should inject itself in a Modern UI page, and extend its current navigation
  // with a tiny informational block. This block will contain a button.
  // Click on this button should open a classic SharePoint dialog being in the context of Modern UI.
  // - Correct its URL at line 194.
  // --------------------------------------------------------------------------------------------------------
  // Author: Paul Borisov, http://paulborisov.blogspot.fi/2018/02/a-fancy-option-to-alter-modern-ui-of.html
  // --------------------------------------------------------------------------------------------------------
  var _MaxLoadAttempts = 50;
  var _CurrentLoadAttempt = 0;
  
  var _EditGroupInfo = 
  '<div class="pb-edit-button">' +
    '<input type="button" value="Edit" />' +
  '</div>';

  var _MessageGroupInfoNotFound = 
  '<div class="pb-container">' +
    '<div class="pb-start-of-table">Group Information</div>' +
    '<div class="pb-noresults ms-cellstyle ms-vb2">There is no data to show.</div>' +
  '</div>';

  var _Css = 
    '<style type="text/css">' + 
    ' .pb-container {}' +
    ' .pb-start-of-table {font-weight:bold;font-size:16px;display:block !important;margin-left:18px;}' +
    ' .pb-noresults {margin-left:14px;}' +
    ' .pb-edit-button {}' +
    ' .pb-edit-button input {width:85%;margin-left:19px;margin-bottom:10px;}' +
    ' .ms-Nav {overflow:hidden;}' +
    ' .sp-livePersonaCardAdapter-root {background-color:transparent !important;}' +
    ' .sp-livePersonaCardAdapter-root canvas {width:32px;}' +
    ' div[class*="spAvatar"] {margin-right:15px;}' +
    '</style>';
  
  var _SiteResources = [
    "//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
    ,"/siteassets/modern/js/custom-modern-ui.js"
  ];
  var _ResourcesToSupportModalDialogInModernPages = [
    "/_layouts/15/init.js"
    ,"/_layouts/15/sp.init.js"
    ,"/_layouts/15/1033/initstrings.js"
    ,"/_layouts/15/1033/sp.res.js"
    ,"/_layouts/15/msajaxbundle.js"
    ,"/_layouts/15/sp.ui.dialog.js"
    ,"/_layouts/15/core.js"
    ,"/_layouts/15/1033/styles/corev15.css"

    // There is a bug in MS loaders: sometimes initialization fails and requires a repeatable load.
    // In a repeatable load the same initialization always succeeded.
    ,"/_layouts/15/init.js"
    ,"/_layouts/15/sp.init.js"
    ,"/_layouts/15/1033/initstrings.js"
    ,"/_layouts/15/1033/sp.res.js"
    ,"/_layouts/15/msajaxbundle.js"
    ,"/_layouts/15/sp.ui.dialog.js"
    ,"/_layouts/15/core.js"
    ,"/_layouts/15/1033/styles/corev15.css"
  ];
  var _ResourcesToSupportModalDialogInModernPagesLoaded = false;
  var _SiteResourcesLoaded = false;
  var _IFrameContext = false;

  function LoadSingleResourceFile( fileUrl, force ) {
    if( fileUrl == null ) return;

    var el = null;
    if( fileUrl.match(/\.css/i) ) {
      var alreadyLoaded = document.querySelector("link[href*='" + fileUrl + "']") != null;
      if( !alreadyLoaded || force ) {
        el = document.createElement("link");
        el.rel = "stylesheet";
        el.type = "text/css";
        el.href = fileUrl;
      }
    } else if( fileUrl.match(/\.js/i) ) {
      var alreadyLoaded = document.querySelector("script[src*='" + fileUrl + "']") != null;
      if( !alreadyLoaded || force ) {
        el = document.createElement("script");
        el.type = "text/javascript";
        el.src = fileUrl;
      }
    }
    if( el ) {
      window.parent.document.getElementsByTagName("head")[0].appendChild(el);
      console.log(fileUrl + " loaded in " + window.parent.location.href);
    }
  }

  function LoadSingleResourceFile2( fileUrl, force ) {
    if( fileUrl == null ) return;

    var el = null;
    if( fileUrl.match(/\.css/i) ) {
      var alreadyLoaded = document.querySelector("link[href*='" + fileUrl + "']") != null;
      if( !alreadyLoaded || force ) {
        el = document.createElement("link");
        el.rel = "stylesheet";
        el.type = "text/css";
        el.href = fileUrl;
      }
    } else if( fileUrl.match(/\.js/i) ) {
      var alreadyLoaded = document.querySelector("script[src*='" + fileUrl + "']") != null;
      if( !alreadyLoaded || force ) {
        el = document.createElement("script");
        el.type = "text/javascript";
        el.src = fileUrl;
      }
    }
    if( el ) {
      jQuery("head").append(jQuery(el));
      console.log(fileUrl + " loaded in " + window.parent.location.href);
    }
  }
  
  function LoadResources(urlArray) {
    if( urlArray == null ) return;
    
    for( var key in urlArray ) {
      var fileUrl = urlArray[key];
      try {
        LoadSingleResourceFile2(fileUrl, true);
      } catch(e) {
        console.log("ERROR loading " + fileUrl + ": " + e.message);
      }
    }
  }

  function LoadSiteResources() {
    if( !_SiteResourcesLoaded ) {
      for( var key in _SiteResources ) {
        var fileUrl = _SiteResources[key];
        try {
          LoadSingleResourceFile(fileUrl, true);
        } catch(e) {
          console.log("ERROR loading " + fileUrl + ": " + e.message);
        }
      }
    }
    _SiteResourcesLoaded = true;
  }

  function LoadDynamicContent() {
    _CurrentLoadAttempt++;
    if( typeof jQuery == "undefined" ) {
      if( _CurrentLoadAttempt <= _MaxLoadAttempts) {
        setTimeout(LoadDynamicContent,100);
        return;
      } else {
        console.log("jQuery was not loaded in " + (_CurrentLoadAttempt-1) + " attempts. Processing stopped.");
        return;
      }
    }
    
    jQuery(document).ready(function(){
      if( _IFrameContext ) {
        // Inject the main resources on execution inside the IFrame
        // Note it also injects this JS-file a new instance of which is then executed in the main window (parent of iframe).
        LoadSiteResources();
      } else {
        if( document.querySelector(".pb-container") ) return;
        // Inject custom CSS.
        jQuery("head").append(jQuery(_Css));
        // Inject the additional resources like prerequisites for SP modal dialog on execution inside the main parent window.
        if( !_ResourcesToSupportModalDialogInModernPagesLoaded ) {
          LoadResources(_ResourcesToSupportModalDialogInModernPages);
        }
        _ResourcesToSupportModalDialogInModernPagesLoaded = true;

        var edit = jQuery(_EditGroupInfo);
        edit.on("click", function() {
          SP.SOD.executeFunc('sp.ui.dialog.js', 'SP.UI.ModalDialog',
            function(){
              var _options = {
                url:'http://paulborisov.blogspot.fi/2018/02/a-fancy-option-to-alter-modern-ui-of.html'
              };
              SP.UI.ModalDialog.showModalDialog(_options);
            }
          )
        });
        jQuery("#sideNavBox,nav.ms-Nav").append(edit);
        jQuery("#sideNavBox,nav.ms-Nav").append(jQuery(_MessageGroupInfoNotFound));
        var iframe = document.querySelector("iframe[src*='\/classic\.aspx']");
        if( iframe != null ) {
          jQuery(iframe).parents(".ControlZone:first").detach();
        }
      }
    });
  }
  
  //if( document.location.href.match(/GroupSummary\.aspx/i) ) {
  if( document.location.href.toLowerCase() != window.parent.document.location.href.toLowerCase() ) {
    // This part is executed when the page /siteassets/modern/pages/classic.aspx
    // is loaded inside the iframe hosted in a modern site's page.
    // After that, it injects necessary scripts including jQuery, this script, and some custom.css.
    // from the folder /siteassets/modern into the same modern site's page, which contains the iframe.
    _IFrameContext = true;
    LoadDynamicContent();
  } else {
    // This part is executed after the file was injected into the modern site's page.
    // For example, into https://customer.sharepoint.com/sites/SomeO365group/SitePages/Home.aspx
    if( document.location.href.match(/Mode=Edit/i) == null ) {
      // If the page is not in edit mode
      _IFrameContext = false;
      LoadDynamicContent();
    }
  }
})();

4 comments:

OJFebruary 27, 2018 at 11:52 PM
Hey Paul, Thanks for sharing this! Have you used it for an actual customer? What do you think the chance is of MS blocking this approach either on purpose or by accident? Given it is using standard iFrame it seems pretty reliable, particularly as a short term tactical solution while Modern UI matures.
Paul BorisovFebruary 28, 2018 at 6:20 PM
Hi OJ,

Yes, this script is from a real customer's project. I only obfuscated visible names to comply with NDA.

I think it's unlikely Microsoft would ever bother to disable this straight capability. The matter is it does not violate any existing script loading rules because the injector runs in the same origin with a site, which hosts the IFrame.

The known drawback is a slower loading time if compared with native SPFx script loader; the containing IFrame should load in prior to start executing the classic script. However, my customer says 3-4 seconds are acceptable as they managed to reuse tons of old scripts with fairly minimal adjustments.

A hint to improve loading performance twice: use scripts saved in ANSI instead of Unicode or UTF-8 if possible.
Paul BorisovFebruary 28, 2018 at 6:22 PM
This comment has been removed by the author.
Paul BorisovFebruary 28, 2018 at 6:23 PM
And/or use JS-minifiers.

Monday, February 5, 2018

Alter Modern UI of SharePoint Online pages using just a conventional JavaScript

Shortly about the technique

Sample JavaScript injector

4 comments: