How to add ribbon tabs and subgroups on sharepoint 2010 application page

it is quite easy to add your own Ribbon controls and tabs to existing lists, libraries, and even your own web parts. You can even add contextual ribbon tabs to web parts hosted in your own custom Application Pages.












open VS2010 and create an Empty SharePoint Project.Add a reference to the Microsoft.Web.CommandUI assembly.Now right-clicking the project,choose Add,new item and select Application Page. This will get created as Layouts//.In code behiend file Create the ribbon by declaring two strings that hold the Tab and the GroupTemplate definitions like this:

@"

id=""Ribbon.MyTab""

Title=""Actions""

Description=""This
is a sample tab""

Sequence=""1105"">

Id=""Ribbon.MyTab.Scaling"">

Id=""Ribbon.MyTab.Noting.MaxSize""

GroupId=""Ribbon.MyTab.Noting""

Size=""OneLargeTwoMedium""/>

Id=""Ribbon.MyTab.Noting.Scaling.CustomTabScaling""

GroupId=""Ribbon.MyTab.Noting""

Size=""OneLargeTwoMedium""
/>

Id=""Ribbon.MyTab.Attachments.MaxSize""

GroupId=""Ribbon.MyTab.Attachments""

Size=""OneLargeTwoMedium""/>

Id=""Ribbon.MyTab.Attachments.Scaling.CustomTabScaling""

GroupId=""Ribbon.MyTab.Attachments""

Size=""OneLargeTwoMedium""
/>

Id=""Ribbon.MyTab.Others.MaxSize""

GroupId=""Ribbon.MyTab.Others""

Size=""OneLargeTwoMedium""/>

Id=""Ribbon.MyTab.Others.Scaling.CustomTabScaling""

GroupId=""Ribbon.MyTab.Others""

Size=""OneLargeTwoMedium""
/>

Id=""Ribbon.MyTab.Noting""

Description=""This
is a sample group!""

Title=""Notings""

Sequence=""52""

Template=""Ribbon.Templates.Noting"">

Id=""Ribbon.MyTab.Noting.Controls"">

Id=""Ribbon.MyTab.Noting.NewNoting""

Sequence=""15""

Description=""Opens
a modal dialog box""

Command=""Ribbon.MyTab.Noting.NewNoting.Click""

Image32by32=""/_layouts/images/PPEOPLE.GIF""

LabelText=""New""

TemplateAlias=""cust1""/>

Id=""Ribbon.MyTab.Noting.EditNoting""

Sequence=""17""

Image32by32=""/_layouts/images/PPEOPLE.GIF""

Description=""Simple
alert button""

Command=""Ribbon.MyTab.Noting.EditNoting.Click""

LabelText=""Edit""

TemplateAlias=""cust2""/>

Id=""Ribbon.MyTab.Attachments""

Description=""This
is a sample group!""

Title=""Attachments""

Sequence=""62""

Template=""Ribbon.Templates.Attachments"">

Id=""Ribbon.MyTab.Attachments.Controls"">

Id=""Ribbon.MyTab.Attachments.Enclosers""

Sequence=""25""

Description=""Opens
a modal dialog box""

Command=""Ribbon.MyTab.Attachments.Encloser.Click""

Image32by32=""/_layouts/images/PPEOPLE.GIF""

LabelText=""Encloser""

TemplateAlias=""cust3""/>

Id=""Ribbon.MyTab.Attachments.Files""

Sequence=""27""

Image32by32=""/_layouts/images/PPEOPLE.GIF""

Description=""Simple
alert button""

Command=""Ribbon.MyTab.Attachments.Files.Click""

LabelText=""Files""

TemplateAlias=""cust4""/>

Id=""Ribbon.MyTab.Others""

Description=""This
is a sample group!""

Title=""Others""

Sequence=""72""

Template=""Ribbon.Templates.Others"">

Id=""Ribbon.MyTab.Others.Controls"">

Id=""Ribbon.MyTab.Others.Close""

Sequence=""35""

Description=""Close
File""

Command=""Ribbon.MyTab.Others.CloseFile.Click""

Image32by32=""/_layouts/Images/PPEOPLE.GIF""

LabelText=""Close
File""

TemplateAlias=""cust5""/>

Id=""Ribbon.MyTab.Others.Download""

Sequence=""37""

Image16by16=""/_layouts/FMSPages/Images/zip_16x16.png""

Image32by32=""/_layouts/FMSPages/Images/zip_32x32.png""

Description=""Download
For Print""

Command=""Ribbon.MyTab.Others.Download.Click""

LabelText=""Download""

TemplateAlias=""cust6""/>

";

//
Attachment subgroup

private
string contextualTabTemplateAttachments = @"

Id=""Ribbon.Templates.Attachments"">

Title=""OneLargeTwoMedium""
LayoutTitle=""OneLargeTwoMedium"">

Type=""OneRow"">

DisplayMode=""Large"" TemplateAlias=""cust3"" />

DisplayMode=""Large"" TemplateAlias=""cust4"" />

"

;

//Noting
subgroup

private
string contextualTabTemplateNotings =
@"

Id=""Ribbon.Templates.Noting"">

Title=""OneLargeTwoMedium""
LayoutTitle=""OneLargeTwoMedium"">

Type=""OneRow"">

DisplayMode=""Large"" TemplateAlias=""cust1"" />

DisplayMode=""Large"" TemplateAlias=""cust2"" />

";

//Others
subgroup

private
string contextualTabTemplateOthers =
@"

Id=""Ribbon.Templates.Others"">

Title=""OneLargeTwoMedium""
LayoutTitle=""OneLargeTwoMedium"">

Type=""OneRow"">

DisplayMode=""Large"" TemplateAlias=""cust5"" />

DisplayMode=""Large"" TemplateAlias=""cust6"" />

";

Now add add tabs,groups and their functionality.
The code, though a little long, is actually quite simple and can be reused almost completely for any number of ribbons. The first function simply adds the display of the ribbon while the second registers the JavaScript to call when the respective buttons’ click commands are called.

protected override void OnPreRender(EventArgs e)

{

base.OnPreRender(e);

this.AddRibbonTab();

AddTabEvents();

}

private void AddRibbonTab()

{

// Gets the current instance of the ribbon on the page.

SPRibbon ribbon = SPRibbon.GetCurrent(this.Page);

//Prepares an XmlDocument object used to load the ribbon

XmlDocument ribbonExtensions = new XmlDocument();

//Load the contextual tab XML and register the ribbon.

ribbonExtensions.LoadXml(this.mainTab);

ribbon.RegisterDataExtension(ribbonExtensions.FirstChild, "Ribbon.Tabs._children");

//Load the custom templates and register the ribbon.

ribbonExtensions.LoadXml(this.contextualTabTemplateAttachments);

ribbon.RegisterDataExtension(ribbonExtensions.FirstChild,

"Ribbon.Templates._children");

ribbonExtensions.LoadXml(this.contextualTabTemplateNotings);

ribbon.RegisterDataExtension(ribbonExtensions.FirstChild,

"Ribbon.Templates._children");

ribbonExtensions.LoadXml(this.contextualTabTemplateOthers);

ribbon.RegisterDataExtension(ribbonExtensions.FirstChild,

"Ribbon.Templates._children");

ribbon.Minimized = false;

ribbon.CommandUIVisible = true;

const string initialTabId = "Ribbon.MyTab";

if (!ribbon.IsTabAvailable(initialTabId))

ribbon.MakeTabAvailable(initialTabId);

ribbon.InitialTabId = initialTabId;

}

private void AddTabEvents()

{

var commands = new List<IRibbonCommand>();

// register the command at the ribbon. Include the callback to the server

// to generate the xml

commands.Add(new SPRibbonCommand("Ribbon.MyTab.Noting.NewNoting.Click", "openPopup('AddFileNotings.aspx?','New Noting',650,450);", "true"));

commands.Add(new SPRibbonCommand("Ribbon.MyTab.Noting.EditNoting.Click", "alert('goodbye cruel world');", "true"));

commands.Add(new SPRibbonCommand("Ribbon.MyTab.Attachments.Encloser.Click", "openPopup('AttachEnclosers.aspx?','Attach Encloser',470,250);", "true"));

commands.Add(new SPRibbonCommand("Ribbon.MyTab.Attachments.Files.Click", "openPopup('AttachFiles.aspx?','Attach Files',470,470);", "true"));

commands.Add(new SPRibbonCommand("Ribbon.MyTab.Others.CloseFile.Click", "CloseFile();", "true"));

commands.Add(new SPRibbonCommand("Ribbon.MyTab.Others.Download.Click", "DownloadFiles();", "true"));

//Register initialize function

var manager = new SPRibbonScriptManager();

var methodInfo = typeof(SPRibbonScriptManager).GetMethod("RegisterInitializeFunction", BindingFlags.Instance | BindingFlags.NonPublic);

methodInfo.Invoke(manager, new object[] { Page, "InitPageComponent", "/_layouts/FMSPages/PageComponent.js", false, "FMSPages.PageComponent.initialize()" });

// Register ribbon scripts

manager.RegisterGetCommandsFunction(Page, "getGlobalCommands", commands);

manager.RegisterCommandEnabledFunction(Page, "commandEnabled", commands);

manager.RegisterHandleCommandFunction(Page, "handleCommand", commands);

}

The Ribbon button event handling requires some extra JavaScript as well that is loaded within another .JS file. To do this, simply add a new JavaScript file in your // folder and call it PageComponent.js. This is what it’ll look like.

function ULS_SP() {

if (ULS_SP.caller) {

ULS_SP.caller.ULSTeamName = "Windows SharePoint Services 4";

ULS_SP.caller.ULSFileName = "/_layouts/FMSPages/PageComponent.js";

}

}

Type.registerNamespace('FMSPages');

// RibbonApp Page Component

FMSPages.PageComponent = function () {

ULS_SP();

FMSPages.PageComponent.initializeBase(this);

}

FMSPages.PageComponent.initialize = function () {

ULS_SP();

ExecuteOrDelayUntilScriptLoaded(Function.createDelegate(null,

FMSPages.PageComponent.initializePageComponent), 'SP.Ribbon.js');

}

FMSPages.PageComponent.initializePageComponent = function () {

ULS_SP();

var ribbonPageManager = SP.Ribbon.PageManager.get_instance();

if (null !== ribbonPageManager) {

ribbonPageManager.addPageComponent(FMSPages.PageComponent.instance);

ribbonPageManager.get_focusManager().requestFocusForComponent(

FMSPages.PageComponent.instance);

}

}

FMSPages.PageComponent.refreshRibbonStatus = function () {

SP.Ribbon.PageManager.get_instance().get_commandDispatcher().executeCommand(

Commands.CommandIds.ApplicationStateChanged, null);

}

FMSPages.PageComponent.prototype = {

getFocusedCommands: function () {

ULS_SP();

return [];

},

getGlobalCommands: function () {

ULS_SP();

return getGlobalCommands();

},

isFocusable: function () {

ULS_SP();

return true;

},

receiveFocus: function () {

ULS_SP();

return true;

},

yieldFocus: function () {

ULS_SP();

return true;

},

canHandleCommand: function (commandId) {

ULS_SP();

return commandEnabled(commandId);

},

handleCommand: function (commandId, properties, sequence) {

ULS_SP();

return handleCommand(commandId, properties, sequence);

}

}

// Register classes

FMSPages.PageComponent.registerClass('FMSPages.PageComponent',

CUI.Page.PageComponent);

FMSPages.PageComponent.instance = new FMSPages.PageComponent();

// Notify waiting jobs

NotifyScriptLoadedAndExecuteWaitingJobs("/_layouts/FMSPages/PageComponent.js");

Change <FMSPages> to your .