My time break for Office in 365 days: 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

My time break for Office in 365 days

Tuesday, April 22, 2014

Examples of Ribbons Customization in SharePoint 2013

No comments: