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, $passwordSecureStringConnect-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.
🙂
One thought on “Office365 Master Page change via jQuery injection”