Office365 Master Page change via jQuery injection

With the SharePoint platform in Office365, there’s one school-of-thought to NOT change the Master Page.   This will allow for any changes downstream, from Microsoft – if/when new features are to be included.

We used to include a whole stack of changes to Master Pages within the SP2010 and SP2013 environment, but need to approach this in a different way – OR – miss out on the new changes/updates.

Anyway, we’re going with that approach – NO changes to Master Page.

And so, the requirement I have is to include a ‘footer’ on each page – which would traditionally be included in a Master Page.   

How do I do it ??

The approach I’m now taking is to use some ‘JavaScript+HTML’ injection – provisioned using remote PowerShell – and CSOM.

The main steps are :

• Connect to SharePoint online – using credentials – and establish a ‘context’
• Upload the files needed – jQuery and custom code JS (and CSS if needed)
• Include a CustomAction that registers a ScriptBlock – in the Master Page (startup.js)
• Within the startup.js, reference my other code libraries (JS files)

Connect to SharePoint Online

$urlAdmin = https://YOUR.TENANT-admin.sharepoint.com
$user = “administrator@YOUR.TENANT.onmicrosoft.com”
$password = “YOUR.TENANT.PASSWORD”
$urlSite = https://YOUR.TENANT.sharepoint.com/sites/TestSiteCollection 

$passwordSecureString = ConvertTo-SecureString -string $password -AsPlainText -Force
$credential = New-Object -TypeName System.Management.Automation.PSCredential -argumentlist $user, $passwordSecureString

Connect-SPOService -Url $urlAdmin -Credential $credential

$spoCredentials = New-Object -TypeName Microsoft.SharePoint.Client.SharePointOnlineCredentials -argumentlist $user, $passwordSecureString

$spoCtx = New-Object Microsoft.SharePoint.Client.ClientContext($urlSite)
$spoCtx.Credentials = $spoCredentials
$spoCtx.RequestTimeout = “500000”

Upload the files

Ignoring the CSS for now, I have TWO files to upload to my SharePoint site – these will just land in the SiteAssets library – or you could use StyleLibrary – either is OK.

• jquery-2.1.3.min.js     (could use a CDN URL I guess)
• CLIENTNAME.O365.startup

(Not including the PowerShell to upload files – that’s a topic for another blog post)

Include a CustomAction

This next bit of PowerShell will register a <SCRIPTBLOCK> within the page, and thereby, inject my specific JavaScript/jQuery/etc.

$newAction = $spoCtx.Site.UserCustomActions.Add();
$newAction.Location = “ScriptLink”;
$newAction.scriptSrc = “~SiteCollection/SiteAssets/scripts/jquery-2.1.3.min.js“;
$newAction.Sequence = 1001;
$newAction.Update();
$spoCtx.ExecuteQuery();

$newAction = $spoCtx.Site.UserCustomActions.Add();
$newAction.Location = “ScriptLink”;
$newAction.scriptSrc = “~SiteCollection/SiteAssets/scripts/CLIENTNAME.O365.startup.js“;
$newAction.Sequence = 1002;
$newAction.Update();
$spoCtx.ExecuteQuery();

Here you can see that my JS’s are now referenced – and thus it’s worked (the above steps).

Reference other JS files

Within my ‘startup.js’, I can now call out to other JavaScript files – one in particular is to update a FOOTER on the site collection.   

I’ve ALSO chosen to centralize these files – so that I can change it ONCE and all site collections are updated – nice !

Switching over to JavaScript now, this is the code within the “startup.js” :

var $jq = jQuery.noConflict();

// load the SHARED scripts from central location
$jq.getScript(‘/siteassets/BRANDING/scripts/jquery-ui-1.11.4.min.js’);

$jq.getScript(‘/siteassets/BRANDING/scripts/CLIENTNAME.O365.footer.js’);

Update the footer – via JS

I can now do whatever I like with the HTML markup – and style accordingly via CSS.    I’m only showing part of the footer code here – it’s up to YOU what you need.

$jq(document).ready(function () {

    //load the footer contents
    var footerHtml = “<div id=’ClientFooter’ class=’ms-dialogHidden’>”;
    footerHtml = footerHtml + “<div class=’footerSection1′>”;

    footerHtml = footerHtml + “<div class=’text’>”;
    footerHtml = footerHtml + “<a href=’http://www.homepage.com.au’><img alt=’Logo’ src=’/SiteAssets/BRANDING/Images/logo.png’ /></a>”;
    footerHtml = footerHtml + “</div>”;

    footerHtml = footerHtml + “<ul>”;
    footerHtml = footerHtml + “<li><a href=’https://www.homepage.com.au/’>AAAAAA</a></li>”;
    footerHtml = footerHtml + “<li><a href=’www.homepage.com.au/pages/BBBBBB.aspx’>BBBBBB</a></li>”;
    footerHtml = footerHtml + “</ul>”;

    footerHtml = footerHtml + “<div class=’footerSection2′>”;
        footerHtml = footerHtml + “<div class=’text’>”;
            footerHtml = footerHtml + “<h3>Contact Us</h3>”;
            footerHtml = footerHtml + “<p>If you would like to email us :</p>”;
            footerHtml = footerHtml + “<ul>”;
            footerHtml = footerHtml + “<li><a id=’contact’ onclick=’loadEmailForm();’ href=’#’>Click here to send email</a></li>”;
            footerHtml = footerHtml + “</ul>”;
        footerHtml = footerHtml + “</div>”;
    footerHtml = footerHtml + “</div>”;

   $jq(‘#s4-workspace’).append(footerHtml);

});

It’s essentially just “build a string” – and then use jQuery to inject at the bottom of the page (#s4-workspace).

After doing a bunch of CSS and HTML – it can look really nice !

Conclusion

So – there you have it – a fairly simple approach to make ‘page changes’ without messing with the Master Page.

Unless Microsoft ditch the “s4-workspace” DIV, my code is fairly safe – and it works….

Let me know your thoughts on this approach – it’s been a interesting one to develop.

🙂