This a simple article on how we can use Jquery and Custom Actions to customize Look and feel in a collaborative Site, in this case Customize the Left Menu".
The main idea here is to use Jquery to create a Expand and collapse Left Menu and save the state (Expand/ Collapse) using Cookies.
I believe there is tons of articles talking about this, but let me try with this way, maybe you liked or not, let see.
There are multiple ways of make this change, since change Masterpages and Styles or add embedded code "Script Editor", but when you work for a corporation, change Masterpage is never a good approach, not even possible by the policies of Company/Corporation....
Add Web Part with code, it is not very recommended because that requires a loot of work "needs to be added in every page" and that generates "garbage" in the Web Part page, not very flexible indeed .
To avoid touch the current environment and manage the loading of our Script i like to recommend ScriptLink Custom Action to add js files globally in Site Collection or Site. I can recommend the following SharePoint app to Manage this Actions.
Before the Solution is implemented
The following image define the area that should be manage and shown when requested.
After the solution is implemented a new option should appear in the Left Menu, this should used to hide and expand the content of the Left Menu.
Left Menu Expanded (animated)
Left Menu Collapsed (animated)
How to implement the Solution
This solution is consisted in 4 files added in SharePoint Libraries and 2 SharePoint Custom Actions as described bellow.
This files are used to manage the visibility of the Left Menu.
Files
Include Jquery Script in SharePoint Document Library
Access to Site Assets Library and add the Jquery file, you can use the following link to download.
This Solution uses Jquery and "animate" Method to expand and collapse the Left Menu.
Add Scriptlink Custom Action "Global Jquery" in SharePoint Site
After you include the Jquery plug-in in all pages of your SharePoint Site you can use the recommend tool and add the Custom Action ScriptLink.
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.
Include Script to Expand/Collapse Left Menu in SharePoint Site
This script should make the management of the Left Menu visibility in all pages where the Left Menu is used.
Include Expand/Collapse Script in SharePoint Library
The Script is separated in different Methods as described:
Script that needs to be save in the ExpandCollapse.js file:
Add Scriptlink Custom Action "Expand and Collapse" in SharePoint Site
Same process to include as Jquery but BE CAREFUL with the SEQUENCE Order has to be after the Jquery Plugin.
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.
After this is changed, should access to your SharePoint Site and validate if the new option is working correctly as shown in the images.
Ok, this is everything you should know, as you can see, it is very easy make some Customization in your site without change anything in the Masterpages or CSS.
Hope you like this article,
Kind regards,
Jayasankar Kesarla
The main idea here is to use Jquery to create a Expand and collapse Left Menu and save the state (Expand/ Collapse) using Cookies.
I believe there is tons of articles talking about this, but let me try with this way, maybe you liked or not, let see.
There are multiple ways of make this change, since change Masterpages and Styles or add embedded code "Script Editor", but when you work for a corporation, change Masterpage is never a good approach, not even possible by the policies of Company/Corporation....
Add Web Part with code, it is not very recommended because that requires a loot of work "needs to be added in every page" and that generates "garbage" in the Web Part page, not very flexible indeed .
To avoid touch the current environment and manage the loading of our Script i like to recommend ScriptLink Custom Action to add js files globally in Site Collection or Site. I can recommend the following SharePoint app to Manage this Actions.
Before the Solution is implemented
The following image define the area that should be manage and shown when requested.
After the solution is implemented a new option should appear in the Left Menu, this should used to hide and expand the content of the Left Menu.
Left Menu Expanded (animated)
Left Menu Collapsed (animated)
How to implement the Solution
This solution is consisted in 4 files added in SharePoint Libraries and 2 SharePoint Custom Actions as described bellow.
This files are used to manage the visibility of the Left Menu.
Files
- Jquery.js
- ExpandCollapse.js
- Left Image
- Right Image
SharePoint Custom Action
- Global Jquery
- includes Jquery in Masterpage Header using MDS
- Expand and collapse
- includes Jquery in Masterpage Header using MDS
Include Jquery Script in SharePoint Document Library
Access to Site Assets Library and add the Jquery file, you can use the following link to download.
This Solution uses Jquery and "animate" Method to expand and collapse the Left Menu.
After you include the Jquery plug-in in all pages of your SharePoint Site you can use the recommend tool and add the Custom Action ScriptLink.
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="http://schemas.microsoft.com/sharepoint/">
<CustomAction Id="Global Jquery" Title="Global Jquery" Description="" Location="ScriptLink"ScriptSrc="~site/SiteAssets/jquery-1.10.2.min.js" Sequence="1" > </CustomAction>
</Elements>
Include Script to Expand/Collapse Left Menu in SharePoint Site
This script should make the management of the Left Menu visibility in all pages where the Left Menu is used.
Include Expand/Collapse Script in SharePoint Library
The Script is separated in different Methods as described:
- OnLoad (Validate Cookie and Load Image to Expand/Collapse)
- CloseLeftMenu (Close Left Menu Area)
- OpenLeftMenu (Expand Left Menu Area)
- Getcookie (get Cookie "HideLeftMenu")
Script that needs to be save in the ExpandCollapse.js file:
var LeftImage = "";
var RightImage = "";
//Validate Cookie and Expand/collapse
$(document).ready(function () {
LeftImage = _spPageContextInfo.webServerRelativeUrl + ((_spPageContextInfo.webServerRelativeUrl.indexOf('/', _spPageContextInfo.webServerRelativeUrl.length - 1) !== -1) ? '' : '/') + 'SiteAssets/Arrowhead-Left-01.png';
RightImage = _spPageContextInfo.webServerRelativeUrl + ((_spPageContextInfo.webServerRelativeUrl.indexOf('/', _spPageContextInfo.webServerRelativeUrl.length - 1) !== -1) ? '' : '/') + 'SiteAssets/Arrowhead-Right-01.png';
if (getCookie('HideLeftMenu') == 'true') {
$('#sideNavBox').prepend("<div align='Right'><img id='LeftMenuico' src='" + RightImage + "' /></div>");
CloseLeftMenu();
}
else {
$('#sideNavBox').prepend("<div align='Right'><img id='LeftMenuico' src='" + LeftImage + "' /></div>");
if ($('#contentBox').css('margin-left') == "20px") {
OpenLeftMenu();
}
else {
$("#LeftMenuico").unbind();
$("#LeftMenuico").click(function () {
CloseLeftMenu();
});
}
}
});
//Collapse Method
function CloseLeftMenu() {
document.cookie = "HideLeftMenu=true";
$('#sideNavBox').css('position', 'absolute');
$('#sideNavBox').animate({ left: '-=180' }, 300);
$('#contentBox').css('margin-left', '20px');
$('#LeftMenuico').attr('src', RightImage);
$("#LeftMenuico").unbind();
$("#LeftMenuico").click(function () {
OpenLeftMenu();
});
}
//Expand Method
function OpenLeftMenu() {
document.cookie = "HideLeftMenu=false";
$('#sideNavBox').css('position', 'absolute');
$('#sideNavBox').animate({ left: '+=180' }, 300);
$('#contentBox').css('margin-left', '220px');
$('#LeftMenuico').attr('src', LeftImage);
$("#LeftMenuico").unbind();
$("#LeftMenuico").click(function () {
CloseLeftMenu();
});
}
//Get Cookie Method
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
}
return "";
}
After the Script is created you can include in the Library "Site Assets" and include references to Left and Right image Option as display in the images in top of the Article.
Add Scriptlink Custom Action "Expand and Collapse" in SharePoint Site
Same process to include as Jquery but BE CAREFUL with the SEQUENCE Order has to be after the Jquery Plugin.
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="http://schemas.microsoft.com/sharepoint/">
<CustomAction Id="Expand and Collapse" Title="Expand and Collapse" Description="" Location="ScriptLink"ScriptSrc="~site/SiteAssets/ExpandCollapse.js" Sequence="2" > </CustomAction>
</Elements>
After this is changed, should access to your SharePoint Site and validate if the new option is working correctly as shown in the images.
To get the cookie from the LeftMenu Status (Expand/collapse) you can use Internet Explorer “Developer Tools” and use Network to sniff the traffic and get the cookie in the Site.
Ok, this is everything you should know, as you can see, it is very easy make some Customization in your site without change anything in the Masterpages or CSS.
Hope you like this article,
Kind regards,
Jayasankar Kesarla
Comments