Wednesday, April 30, 2014

Create sticky footer in all SharePoint Site using ScriptLink without changing MasterPage

This is the II part of the article "How to Create Expand Collapse Left Menu using Scriptlink Custom Action" about how ScriptLink can support you to take Development decisions, can be Business or Branding, for this example i wrote another article about branding, business will come in another article.

There are lots of articles talking about this topic, saying how you can change Masterpage, add some stuff in webpart and other options, there are challenges on doing that and you need to understand the impacts of that decisions, like Migrations,  company policies, upgrade solutions or  unghost SP pages....
Change the Masterpage is good but only when you are creating the company brand, “1 time” and deploy. After that come the real need of users and Site administrators and Division then everything start to became a little more hard....

If you don't want to make this type of change, the short answer to client will be "company policies" (Governance Board) don’t allow that, what make sense and agree, if not will be unmanageable.  

Then come Marketing, compliance, HR... and other divisions with little requests about branding , because they need to do for some Business reasons and we start to think how we will do the changes without changing or breaking the core and their policies...

To support you and help you take some decisions and actions after you identify want can be done and cannot in your clients/Company, you can start to work on your solution. Here you have a little example on how you can add a sticky Footer in your SharePoint Site without change any Page or CSS.

Here is the expected result "Bottom of the Page"

Using as base the same steps described in the article
How to Create Expand Collapse Left Menu using Scriptlink Custom Action

Include StickyFotter Script in SharePoint Site

Create the Javascript file named "StickyFotter.js" with the following code: 

$('body').append('<div style="background-color: #0072C6;height: 35px;width: 100%;background-position: 0 0;background-attachment: scroll;position:fixed;bottom:0;left:0;"><div style="width:60%;float:left;text-align: left;vertical-align:middle;font-size: 10pt;color:#ffffff;padding-top: 10px;padding-left:10px;">© 2014 All rights reserved.</div><div style="width:38%;float:left;text-align: right;vertical-align:middle;font-size: 10pt;color:#ffffff;padding-top: 10px;padding-right:10px;text-decoration: none;"></div></div>');

Add the created file in the SharePoint Library "Site Assets"

Include the Global Script to your SharePoint Site, for this task i used my SharePoint App "SharePoint App Processlynx Custom Action and Ribbon Manager Launch" to include using ECMAscrpt JSOM the ScriptLink in the Site.

If you like to use Visual Studio and Declarative code you can use the option "Generate Declarative XML" to create the XML for your SharePoint Feature as shown.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="">
  <CustomAction Id="Sticky Footer" Title="Sticky Footer" Description="" Location="ScriptLink" ScriptSrc="~Site/SiteAssets/StickyFooter.js" Sequence="3" > </CustomAction>

After this task is done the Sticky footer appears in the SharePoint Site, including Backoffice Pages as shown in the following image.

It's done, another little branding made, very easy and without breaking anything or changing pages from the original Site.

Hope you like the article,
Kind regards, 
Andre Lage

No comments: