How to Create Custom Site Ribbon Tab with buttons

In this post I have demonstrated how to create custom Site scope Ribbon Tab , how to deployed and  enable in custom page and
control buttons inside the Tab i.e., enable/disable based on business requirement.
using ECMA Script.

1. When no item is selected, two button inside the custom Tab is disabled and the third one is always enable.

2. When first item is selected, then first button is enabled and the second button is disabled.


3. When both item are selected, then second button inside Tab is enabled and first is disabled and third Button remains enable

Create Ribbon definition :-

ustom Action
<CustomAction
Id=”IDEMO.MKSRibbon.CustomTabDeployment”
Location=”CommandUI.Ribbon”
Title=”Add custom tab to page”>

2. Tab Definition
<Tab Id=”HiMKSDemoIRibbon.CustomTabs”
Title=”Mukesh” Description=”Mukesh Menu”
Sequence=”102″ >

3. Define Scaling
<Scaling Id=”HiMKSDemoIRibbon.CustomTabs.Scaling”>
<MaxSize  Id=”HiMKSDemoIRibbon.CustomTabs.Scaling.NewGroup.MaxSize”
GroupId=”HiMKSDemoIRibbon.CustomTabs.MyGroup”
Size=”MukeshLarge”
Sequence=”2″/>
<Scale    Id=”HiMKSDemoIRibbon.CustomTabs.Scaling.NewGroup.Large”
GroupId=”HiMKSDemoIRibbon.CustomTabs.MyGroup”
Size=”MukeshLarge” Sequence=”3″/>

4. Define Group
<Group Id=”HiMKSDemoIRibbon.CustomTabs.MyGroup”
Sequence=”2″
Description=””
Title=”My Group”
Template=”HiMKSDemoIRibbon.CustomTabs.MyTemplate”>

5. Control definition
<Button
Id=”HiMKSDemoIRibbon.CustomTabs.MyGroup.HelloWorld”
Command=”CustomTab.ButtonServerCommand”
Sequence=”3″
Image32by32=”/_LAYOUTS/INC/MKSRibbon/Img/network32_32r.png”
LabelText=”My Control !!!”
TemplateAlias=”RowI” ToolTipTitle=”Welcome Ribbon”
ToolTipDescription=”This is Button -1″/>

6. Template Defnition
<GroupTemplate Id=”HiMKSDemoIRibbon.CustomTabs.MyTemplate”>
<Layout Title=”MukeshLarge”   LayoutTitle=”MukeshLarge”>
<Section Alignment =”Top” Type=”OneRow”>
<Row>
<ControlRef DisplayMode =”Large” TemplateAlias=”RowI”/>

Deploy using Feature.

To make custom tab enable on custom site page this can be instantiated using webpart or usercontrol.

In this case custom webpart and pagecomponent ECMA Script is used

In page load register commands for the button click used Tab definition.

string initialTabId = “HiMKSDemoIRibbon.CustomTabs”;// “DemoRibbon.CustomTabs”;// “MKSRibbon.CustomTabaA”;

if (Page.Request.QueryString[“id”] != null)
{
initialTabId = Page.Request.QueryString[“id”].ToString();
}

if (!ribbon.IsTabAvailable(initialTabId))
{
ribbon.MakeTabAvailable(initialTabId);
ribbon.Minimized = false;
}
ribbon.InitialTabId = initialTabId;

var commands = new List<IRibbonCommand>();

commands.Add(new SPRibbonCommand(“CustomTab.ButtonServerCommand2”, “alert(‘2’);”, “true”));
commands.Add(new SPRibbonCommand(“CustomTab.ButtonServerCommand”, “alert(‘1’);”, “true”));

ScriptLink.RegisterScriptAfterUI(Page, “SP.Runtime.js”, false, true);
ScriptLink.RegisterScriptAfterUI(Page, “SP.js”, false, true);

//Initialize function
var manager = new SPRibbonScriptManager();
var methodInfo = typeof(SPRibbonScriptManager).GetMethod(
“RegisterInitializeFunction”,
BindingFlags.Instance | BindingFlags.NonPublic);
methodInfo.Invoke(
manager,
new object[]
{
Page,
“InitPageComponent”,
“/_layouts/INC/MKSRibbon/PageComponent.js”,
false,
“MKSRibbon.PageComponent.initialize()”
});

manager.RegisterGetCommandsFunction(Page, “getGlobalCommands”, commands);
manager.RegisterCommandEnabledFunction(Page, “commandEnabled”, commands);
manager.RegisterHandleCommandFunction(Page, “handleCommand”, commands);

Advertisements