SharePoint and Microsoft Azure Blog: Customizing Ribbon in SharePoint

There are certain cases where we need to Customize SharePoint Ribbon. Customizing ribbon in SharePoint is easy. today we will see what we can do in Customizing Ribbon in SharePoint.

Ribbon customization consists of two component

1. a custom Action

2. Command UI Extension or ribbon xml

1. Creating Custom Action

Lets start by creating a ribbon custom action so start by creating an empty SharePoint project and add an empty element named customribbon. now we can write the custom action in elements.xml file of customribbon.

Here is how we write a custom action.

<CustomAction Id="TestRibbon" Location="CommandUI.Ribbon.ListView" RegistrationId="101" RegistrationType="List">

</CustomAction>

Location is where you want to insert the ribbon. here in my case ribbon will be inserted where ever is listview web part is present. below are some of locations

Location	Description
CommandUI.Ribbon	Add customization any where for registration id
CommandUI.Ribbon.ListView	Add customization when list view is rendered
CommandUI.Ribbon.EditForm	Add customization on the edit form of list
CommandUI.Ribbon.NewForm	Add customization on new form of list
CommandUI.Ribbon.DisplayForm	Add customization on display form.

for further regarding the locations you can have a look of cmdui.xml in SharePoint hive/template/global/xml.

Apart from this declarative method you can also create custom action from server side code here is an example
SPUserCustomAction testribbonaction = web.UserCustomActions.Add();
testribbonaction.Location = "CommandUI.Ribbon.ListView";
testribbonaction.RegistrationId = "101" // ; document library , 100 for custom list etc
testribbonaction.RegistrationType = SPUserCustomActionRegistrationType.List;
testribbonaction.CommandUIExtension = "";//command ui extension ribbon xml
testribbonaction.Update();

So now we know how to create ribbon custom action so lets move to the next that is command ui xml

2. Ribbon XML

Customizing SharePoint Ribbon is about to write a ribbon xml and deploy it using a custom action.

There are two major component in ribbon xml CommandUIDeffinition and CommandUIHandler.

so it looks like bolow.

</CommandUIDefinition>

</CommandUIDefinition>

</CommandUIDefinitions>

<CommandUIHandler Command="<command to handle>" CommandAction="<action javascript>" EnabledScript="<conditionaly enable or disable the command>"> </CommandUIHandler>

</CommandUIHandlers>

</CommandUIExtension>

So basically a command ui extension can contain several command ui deffinitions and handlers.

Location is very important here for example with first commanduidefinition we are defining some template so the location is Ribbon.Templates._children and with second we are defining a tab in the tabs so the location is Ribbon.Tabs._children.

Suppose we need to add custom action in library tab of document lirary and under actions group.

note these things and search for the library tab in cmdui.xml as described earlier and try to find the actions group there and note the id.

I found the id was Ribbon.Library.Actions so if you want to add a button to actions group of library tab then you should set Location to Ribbon.Library.Actions.Controls._children

To dig little more lets create a tab. Tabs can have the maxsize , scaling and groups. Groups can have controls that have command and rendered by templates defined in Ribbon.Templates._children

So lets first create Template that will be later used to render the controls

<Row>

</Row>

</Section>

<Row>

</Row>

</Section>

</Layout>

</GroupTemplate>

</CommandUIDefinition>

So we have defined a GroupTemplate named TestTemplate it contains layout element which defines title . it contains section and overflow section which i have not used but of course you can use

Section have alignment and type which can be OneRow,TwoRow or ThreeRow on the basis of that you can have more row elements.

ControlRef is like a placeholder where controls will be placed. please note the DisplayMode and TemplateAlias.

TemplateAlias defines the alias of the template and DisplayMode can have values Small , Medium , Large and Text which is self explanatory.

Our template is ready now lets create a tab and place a group and two buttons

</Scaling>

<Button Id="Ribbon.TestTab.TestGroup.TestButton2" TemplateAlias="test2" Alt="test button 2" Command="Ribbon.TestTab.TestGroup.TestButton2Command" Image16by16="" Image32by32="/_layouts/15/1033/images/formatmap32x32.png?rev=23"

LabelText="Button 2" />

</Controls>

</Group>

</Groups>

</Tab>

</CommandUIDefinition>

The tab is ready however there are some important points the sequence should not be in multiple of 100 . it is used to arrange the controls or tabs for what to be shows first and what will be later.

Maxsize defines the max size of the controls and scale defines how the controls will be scaled when controls are added these are controlled by the layout we defined earlier.

Similary the group we have created is using the template that we defined in previous commandui definition.

Now the thing remains is CommandUIHandler. notice that the button defined above have command and we need to define the handler.

here is an example

</CommandUIHandlers>

Command is the Command that has to be handled , CommandAction is the javascript that performs action and EnabledScript is the script that decideds when the command should be enabled.

So here is everything on one place.

<Row>

</Row>

</Section>

<Row>

</Row>

</Section>

</Layout>

</GroupTemplate>

</CommandUIDefinition>

</Scaling>

</Controls>

</Group>

</Groups>

</Tab>

</CommandUIDefinition>

</CommandUIDefinitions>

</CommandUIHandlers>

</CommandUIExtension>

</CustomAction>

This custom action can be copied in an empty element and can be deployed to see the tab in action.

SharePoint and Microsoft Azure Blog

Labels

Sunday 6 August 2017

Customizing Ribbon in SharePoint

1. Creating Custom Action

2. Ribbon XML

No comments:

Post a Comment

Setup dev environment for spfx

Total Pageviews

Labels