My time break for Office in 365 days: April 2014

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;">http://aaclage.blogspot.ch</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>

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

Thursday, April 24, 2014

How to Create Expand Collapse Left Menu using Scriptlink Custom Action

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

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.

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.

<?xml version="1.0" encoding="utf-8"?>

</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>

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,
André Lage

Tuesday, April 22, 2014

Examples of Ribbons Customization in SharePoint 2013 - link

Link:
http://aaclage.blogspot.com/2014/04/examples-of-customization-of-ribbons-in.html

Examples of Ribbons Customization in SharePoint 2013

The Customization of ribbons and his behavior continues to be a big headache to developer and Site Administrators that need to make some customization in their Site.
This article provides some examples of Ribbon XML Structure you can use to customize your SharePoint Lists/Libraries.

Part II: Examples of Ribbons Customization in SharePoint 2013
Part III: Examples of Ribbons Customization in SharePoint 2013
Part IV: Examples of Ribbons Customization in SharePoint 2013
Part V: Examples of Ribbons Customization in SharePoint 2013
Part VI: Examples of Ribbons Customization in SharePoint / Office 365 - Send Email notification as reminder

Customizing Ribbons
Customization of a Ribbon can be included in SharePoint sites using Custom Actions associated in the UI Extension using XML format. This Structure can be included in Visual Studio using structure file "Element.xml" and deploy as solution (SP App, SP Sandbox or SP Farm) or using SharePoint Object UserCustomAction or using this Ribbon Manager Tool.

for more information about this Tool and new version please access the following link:

SharePoint App Processlynx Custom Action and Ribbon Manager Launch
a Free version can be accessed here:
Free version of SharePoint App Custom Action & Ribbon Manager available in Office Store

PS: You can also include Ribbon Action using SharePoint JavaScript Object Model (SP.Ribbon.JS) but in local pages.

You can read articles about add Custom Action with Ribbons in a declarative way or add in JSOM way.

The following Table are the main Location will be located the Custom Ribbons when the User Custom Action is created.

Locations	Description
CommandUI.Ribbon	Location corresponds to the list view and edit, new, and display forms for the list
CommandUI.Ribbon.ListView	Location corresponds to the list view.
CommandUI.Ribbon.EditForm	Location corresponds to the edit form for the list.
CommandUI.Ribbon.NewForm	Location corresponds to the new form for the list.
CommandUI.Ribbon.DisplayForm	Location corresponds to the display form for the list.

The following

XML Ribbon examples :

Add Custom Tab
Add Custom Group to Custom Tab
Add Custom Group Template with Checkbox Control
Add Custom Control in Custom Group and Custom Tab
Add Custom Group/Control (Large) in existing Tab
Add Custom Group/Control (Large/Medium) in existing Tab
Add FlyoutAnchor in Custom Tab/Custom Group
Add Button Control in Existing Tab/Group
Hide existing Ribbon control
Replace existing Ribbon control

Tab

This option will help customizing Ribbons in lists/Libraries creating a custom Tab that responses specific Business rules and isolates from the existing SharePoint Out of the box Ribbons Controls.

Add Custom Tab

This example create a custom Tab but will not be shown because there isn't a Group associated.

Custom Tab Example:

</Scaling>

</Groups>

</Tab>

</CommandUIDefinition>

</CommandUIDefinitions>

</CommandUIExtension>

Group

This option defines the area and layout on how the controls will be displayed, this is a very important section because will have impact in the position and size of the Custom Controls in the Ribbon.

Add Custom Group to Custom Tab

This option uses a custom Group Template call Flexible2 to be associated with the created Custom Tab.

</Scaling>

</Controls>

</Group>

</Groups>

</Tab>

</CommandUIDefinition>

</Layout>

</Layout>

</Layout>

</Layout>

</Layout>

</Layout>

</Layout>

</Layout>

</Layout>

</GroupTemplate>

</CommandUIDefinition>

</CommandUIDefinitions>

</CommandUIHandlers>

</CommandUIExtension>

The final output of the Ribbon should be:

Group Template Options

Ok, when we are customizing Ribbons the creation of Group template is the most hard thing to be defined.

This will be the area where your controls will be organize and displayed in the Ribbon, this design area can have multiple format and ways to be displayed, it is recommended a good evaluation on how the ribbons will be displayed and then design.
Example of Custom Group Template Structure:

This example came from processlynx SharePoint app (Ribbon)

For all the examples except "Create Custom Group Template with Checkbox Control" was created a Custom Template call "Flexible2" this Template has multiple layouts that helps the customization of the Ribbons areas and how is displayed.

Here some examples of possible Custom Group template Layouts you can create or design:

Here a example of Custom Template Flexible2 XML with multiple layouts:

</Layout>

</Layout>

</Layout>

</Layout>

</Layout>

</Layout>

</Layout>

</Layout>

</Layout>

</GroupTemplate>

</CommandUIDefinition>

Add Custom Group Template with Checkbox Control

This option uses a custom Group Template call Flexible2 to be associated with the created Custom Tab.

<Row>

</Row>

</Section>

</Layout>

</GroupTemplate>

</CommandUIDefinition>

</Controls>

</Group>

</CommandUIDefinition>

</CommandUIDefinition>

</CommandUIDefinitions>

</CommandUIHandlers>

</CommandUIExtension>

The final output of the Ribbon should be:

The visual representation of our Ribbon should be the following tree.

Creation of the Custom Group Template and definition of his content

After you create the Custom Template you can create multiple layouts to hum
Each layout could have multiple designs and areas.

Create a Custom Group using as Base the Custom Template created in "Custom Group Template", add control Checkbox using the Layout Small "Check box option can only be added with small or medium" and the Ribbon should be created.

This example came from processlynx SharePoint app (Ribbon)

Control Option

This option give the ability to create custom Controls associating actions as links or JavaScript that can be associated with a custom Layout.

Add Custom Control in Custom Group and Custom Tab

This example add a Custom Large Control in a Custom Tab and Custom Group.

The XML structure defines the Tab > Group > Controls that should appear in the Ribbon.

</Scaling>

</Controls>

</Group>

</Groups>

</Tab>

Here is the full XML code example:

</Scaling>

</Controls>

</Group>

</Groups>

</Tab>

</CommandUIDefinition>

</Layout>

</Layout>

</Layout>

</Layout>

</Layout>

</Layout>

</Layout>

</Layout>

</Layout>

</GroupTemplate>

</CommandUIDefinition>

</CommandUIDefinitions>

</CommandUIHandlers>

</CommandUIExtension>

The final output of the Ribbon should be:

Add Custom Group/Control (Large) in existing Tab

This example add a Custom Large Control in a existing Tab but in a Custom Group.

</Controls>

</Group>

</CommandUIDefinition>

</CommandUIDefinition>

</Layout>

</Layout>

</Layout>

</Layout>

</Layout>

</Layout>

</Layout>

</Layout>

</Layout>

</GroupTemplate>

</CommandUIDefinition>

</CommandUIDefinitions>

</CommandUIHandlers>

</CommandUIExtension>

The final output of the Ribbon should be:

Add Custom Group/Control (Large/Medium) in existing Tab

This example add a Custom Large Control and medium control in a Row in a existing Tab but in a Custom Group.

Here is the full XML code example:

</Controls>

</Group>

</CommandUIDefinition>

</CommandUIDefinition>

</Layout>

</Layout>

</Layout>

</Layout>

</Layout>

</Layout>

</Layout>

</Layout>

</Layout>

</GroupTemplate>

</CommandUIDefinition>

</CommandUIDefinitions>

</CommandUIHandlers>

</CommandUIExtension>

The final output of the Ribbon should be:

Add FlyoutAnchor in Custom Tab/Custom Group

This example add a Custom Large FlyoutAnchor Control in a Custom Tab and Custom Group.

</Scaling>

</Controls>

</MenuSection>

</Menu>

</FlyoutAnchor>

</Controls>

</Group>

</Groups>

</Tab>

</CommandUIDefinition>

</Layout>

</Layout>

</Layout>

</Layout>

</Layout>

</Layout>

</Layout>

</Layout>

</Layout>

</GroupTemplate>

</CommandUIDefinition>

</CommandUIDefinitions>

</CommandUIHandlers>

</CommandUIExtension>
The final output of the Ribbon should be:

With the ProcessLynx SharePoint App, you be able to see the Ribbon Structure of the FlyoutAnchor in the Custom Tab.

This example came from processlynx SharePoint app (Ribbon)

Add Button Control in Existing Tab/Group

</CommandUIDefinition>

</CommandUIDefinitions>

</CommandUIHandlers>

</CommandUIExtension>

The final output of the Ribbon should be:

Override Control

This option can be used to re-write and change the behavior of existing Out of the box Ribbon Control.

Here are the Default Server Ribbon Customization Locations you can use to change the behavior.
http://msdn.microsoft.com/en-us/library/office/ee537543(v=office.14).aspx

Hide existing Ribbon control

The following example show how you can use XML UI Extension to hide existing controls like Open with Explorer "Ribbon.Library.Actions.OpenWithExplorer"

</CommandUIDefinition>

</CommandUIDefinitions>

</CommandUIExtension>

The final output of the Ribbon should be without the option:

Replace existing Ribbon control

This example, show how we can replace the existing "Open with Explorer" with custom a Custom Action and image associated.

Here the example of the XML code:

</CommandUIDefinition>

</CommandUIDefinitions>

</CommandUIHandlers>

</CommandUIExtension>

The final output of the Ribbon should be:

How to get Images position using SharePoint out of the Box image

When we are creating custom Buttons in the Ribbon it is possible to select a image position base in 16x16 or 32x32, only need to know the coordinates where is the icon as show in the XML and image bellow.

Image position base in the image url:

Select the 16x16 position "shown in pink"

Image16by16Left="-266"

http://[Site]/_layouts/15/1033/images/formatmap16x16.png?rev=33

This example came from processlynx SharePoint app (Ribbon)

Select the 32x32 position "shown in pink"

Image32by32Left="-509"

http://[Site]/_layouts/15/1033/images/formatmap32x32.png?rev=33

This example came from processlynx SharePoint app (Ribbon)

PS: If you are using SharePoint Online be careful, Microsoft is changing the position of the icons.

All this examples where made in 10 minutes using a very user friendly "no knowledge of XML is needed" SharePoint App created by Processlynx, for more info you can send email to appsupport@processlynx.ch.

Custom Ribbon Complex Ribbon

Support links:
SharePoint App Processlynx Custom Action and Ribbon Manager Launch
a Free version can be accessed here:
Free version of SharePoint App Custom Action & Ribbon Manager available in Office Store

Hope you like this article,

Kind regards,

Andre Lage