The related articles on my blog are:
- Part 1: How To Activate SharePoint Ribbon Tab by JavaScript Code
- Part 2: Sample Visual Studio 2010 project for creating a custom SharePoint 2010 Ribbon tab on runtime
- Part 3: Additional Ribbon Sample: Custom Ribbon Tab generated by a delegate control that lists all associated list workflows and allow to start a workflow on a selected list item.
I wanted to create a sample project to show you who you can create a custom SharePoint 2010 Ribbon tab at runtime! – Especially: How to active the custom ribbon tab on “page loaded” (no need to click it!) So this article is an addition to my explanations in my previous article “How To Activate SharePoint Ribbon Tab by JavaScript Code”.
You can download the project from Codeplex:
http://spcustomribbondemo.codeplex.com
You are invited to download / update / improve the project! – I’d like to insert more samples in the project about how to deploy Ribbon customizations. In the sample I created a ribbon in a custom list view web page. (You’ll see in the code).
To use the project you need a SharePoint web application named “http://sharepoint.local” and a site collection named “ribbon”.
Deploy the project.
Open the SharePoint site and it’s list in your browser.
You’ll see:
This tab is actived automatically on page load!!!
The source code of my project is inspired by some blog post of this people:
These are the steps of development I’ve done:
1. Create an empty SharePoint 2010 project in Visual Studio 2010
2. Create an “List Definition” project item.
3. Add a “Application Page” project item.
4. Move the new application page to the “List Definition” project item.
5. Change the base class to “WebPartPage”
6. Modify the “Page” tag of the aspx page: replace “DynamicalMasterPageFile” with “MasterPageFile”
7. Replace the content of the aspx file with this code:
1: <asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
2: </asp:Content>
3:
4: <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
5: <WebPartPages:WebPartZone runat="server" FrameType="None" ID="Main2" Title="loc:Main">
6: <ZoneTemplate>
7: </ZoneTemplate>
8: </WebPartPages:WebPartZone>
9: </asp:Content>
10: <asp:Content ContentPlaceHolderID="PlaceHolderPageTitle" runat="server">
11: </asp:Content>
12: <asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
13: </asp:Content>
14:
8. Insert the following code into the CS file of the ASPX file. This code will create the custom Ribbon tab. (The Ribbon tab XML definition code could be created dynamically!!!)
1: using System;
2: using System.Security.Permissions;
3: using Microsoft.SharePoint.Security;
4: using Microsoft.SharePoint.WebPartPages;
5: using Microsoft.SharePoint;
6: using Microsoft.SharePoint.WebControls;
7: using System.Web.UI.WebControls.WebParts;
8: using System.Diagnostics;
9: using System.Xml;
10: using System.Collections.Generic;
11: using System.Reflection;
12: using System.Text;
13:
14: namespace ik.SharePoint2010.SPCustomTabRibbonDemo.Layouts.SPCustomTabRibbonDemo
15: {
16: public partial class AllItems : WebPartPage
17: {
18: protected void Page_Load(object sender, EventArgs e)
19: {
20: }
21:
22: private string tab = @"
23: <Tab Id=""ik.SharePoint2010.Ribbon.CustomTab"" Title=""ik-ribbon"" Description=""Ingo's Command Group"" Sequence=""501"">
24: <Scaling Id=""ik.SharePoint2010.Ribbon.CustomTab.Scaling"">
25: <MaxSize Id=""ik.SharePoint2010.Ribbon.CustomTab.Group1.MaxSize""
26: GroupId=""ik.SharePoint2010.Ribbon.CustomTab.Group1""
27: Size=""OneLarge""/>
28: <Scale Id=""ik.SharePoint2010.Ribbon.CustomTab.Group1.Scaling.CustomTabScaling""
29: GroupId=""ik.SharePoint2010.Ribbon.CustomTab.Group1""
30: Size=""OneLarge""/>
31: <MaxSize Id=""ik.SharePoint2010.Ribbon.CustomTab.Group2.MaxSize""
32: GroupId=""ik.SharePoint2010.Ribbon.CustomTab.Group2""
33: Size=""OneLarge""/>
34: <Scale Id=""ik.SharePoint2010.Ribbon.CustomTab.Group2.Scaling.CustomTabScaling""
35: GroupId=""ik.SharePoint2010.Ribbon.CustomTab.Group2""
36: Size=""OneLarge""/>
37: <MaxSize Id=""ik.SharePoint2010.Ribbon.CustomTab.Group3.MaxSize""
38: GroupId=""ik.SharePoint2010.Ribbon.CustomTab.Group3""
39: Size=""OneLarge""/>
40: <Scale Id=""ik.SharePoint2010.Ribbon.CustomTab.Group3.Scaling.CustomTabScaling""
41: GroupId=""ik.SharePoint2010.Ribbon.CustomTab.Group3""
42: Size=""OneLarge""/>
43: </Scaling>
44: <Groups Id=""ik.SharePoint2010.Ribbon.CustomTab.Groups"">
45: <Group Id=""ik.SharePoint2010.Ribbon.CustomTab.Group1""
46: Description=""Ingo's Custom Ribbon Demo 1""
47: Title=""Ingo's Custom Ribbon Demo 1""
48: Sequence=""10""
49: Template=""ik.SharePoint2010.Ribbon.Templates.OneLarge"">
50: <Controls Id=""ik.SharePoint2010.Ribbon.CustomTab.Group1.Controls"">
51: <Button Id=""ik.SharePoint2010.Ribbon.CustomTab.Group1.Button1""
52: Command=""ik.SharePoint2010.Command.Button1""
53: Description=""Do something""
54: Sequence=""10""
55: LabelText=""Do something""
56: Image16by16=""/_layouts/images/DOC16.GIF""
57: Image32by32=""/_layouts/images/DOC32.GIF""
58: TemplateAlias=""cust1""/>
59: </Controls>
60: </Group>
61: <Group Id=""ik.SharePoint2010.Ribbon.CustomTab.Group3""
62: Description=""Ingo's Custom Ribbon Demo 3""
63: Title=""Ingo's Custom Ribbon Demo 3""
64: Sequence=""30""
65: Template=""ik.SharePoint2010.Ribbon.Templates.OneLarge"">
66: <Controls Id=""ik.SharePoint2010.Ribbon.CustomTab.Group3.Controls"">
67: <Button Id=""ik.SharePoint2010.Ribbon.CustomTab.Group3.Button3""
68: Command=""ik.SharePoint2010.Command.Button3""
69: Description=""Do more""
70: Sequence=""10""
71: LabelText=""Do more""
72: Image32by32=""/_layouts/images/PPEOPLE.GIF""
73: TemplateAlias=""cust1""/>
74: </Controls>
75: </Group>
76: <Group Id=""ik.SharePoint2010.Ribbon.CustomTab.Group2""
77: Description=""Ingo's Custom Ribbon Demo 2""
78: Title=""Ingo's Custom Ribbon Demo 2""
79: Sequence=""20""
80: Template=""ik.SharePoint2010.Ribbon.Templates.OneLarge"">
81: <Controls Id=""ik.SharePoint2010.Ribbon.CustomTab.Group2.Controls"">
82: <Button Id=""ik.SharePoint2010.Ribbon.CustomTab.Group2.Button2""
83: Command=""ik.SharePoint2010.Command.Button2""
84: Description=""Do nothing""
85: Sequence=""10""
86: LabelText=""Do nothing""
87: Image32by32=""/_layouts/images/PPEOPLE.GIF""
88: TemplateAlias=""cust1""/>
89: </Controls>
90: </Group>
91: </Groups>
92: </Tab>
93:
94: " ;
95: private string tabTempl = @"
96: <GroupTemplate Id=""ik.SharePoint2010.Ribbon.Templates.OneLarge"">
97: <Layout Title=""OneLarge"" LayoutTitle=""OneLarge"">
98: <Section Alignment=""Top"" Type=""OneRow"">
99: <Row>
100: <ControlRef DisplayMode=""Large"" TemplateAlias=""cust1"" />
101: </Row>
102: </Section>
103: </Layout>
104: </GroupTemplate>
105: " ;
106:
107: protected override void OnPreRender(EventArgs e)
108: {
109: //Debugger.Break();
110: SPRibbon r = Microsoft.SharePoint.WebControls.SPRibbon .GetCurrent(this .Page);
111: XmlDocument rx = new XmlDocument ();
112: rx.LoadXml(tab);
113: r.RegisterDataExtension(rx.FirstChild, "Ribbon.Tabs._children" );
114: rx.LoadXml(tabTempl);
115: r.RegisterDataExtension(rx.FirstChild, "Ribbon.Templates._children" );
116:
117: List <IRibbonCommand > commands = new List <IRibbonCommand >();
118: commands.Add(new SPRibbonCommand ("ik.SharePoint2010.Command.Button1" , "ikSharePoint2010CommandButton1Action()" , "true" ));
119: commands.Add(new SPRibbonCommand ("ik.SharePoint2010.Command.Button2" , "ikSharePoint2010CommandButton2Action()" , "ikSharePoint2010CommandButton2Enable()" ));
120: commands.Add(new SPRibbonCommand ("ik.SharePoint2010.Command.Button3" , "ikSharePoint2010CommandButton3Action()" , "ikSharePoint2010CommandButton3Enable()" ));
121:
122: SPRibbonScriptManager rsm = new SPRibbonScriptManager ();
123:
124: ScriptLink .RegisterScriptAfterUI(this .Page, "SP.Runtime.js" , false , true );
125: ScriptLink .RegisterScriptAfterUI(this .Page, "SP.js" , false , true );
126: ScriptLink .RegisterScriptAfterUI(this .Page, "CUI.js" , false , true );
127: ScriptLink .RegisterScriptAfterUI(this .Page, "SP.Ribbon.js" , false , true );
128: ScriptLink .RegisterScriptAfterUI(this .Page, "ik.SharePoint2010.SPCustomTabRibbonDemo/ikactions.js" , false , true );
129: ScriptLink .RegisterScriptAfterUI(this .Page, "ik.SharePoint2010.SPCustomTabRibbonDemo/ikribbon.UI.js" , false , true );
130:
131: rsm.RegisterGetCommandsFunction(this .Page, "getGlobalCommands" , commands);
132: rsm.RegisterCommandEnabledFunction(this .Page, "commandEnabled" , commands);
133: rsm.RegisterHandleCommandFunction(this .Page, "handleCommand" , commands);
134:
135: string script = @"
136: <script language=""javascript"" defer=""true"">
137: //<![CDATA[
138: function ikribbonInit1() {
139: ikribbonInit();
140: }
141: ExecuteOrDelayUntilScriptLoaded(ikribbonInit1,');
142: //]]>
143: </script>" ;
144: ClientScript.RegisterClientScriptBlock(this .GetType(), "InitPageComponent" , script);
145:
146: r.MakeTabAvailable("ik.SharePoint2010.Ribbon.CustomTab" );
147: r.SetInitialTabId("ik.SharePoint2010.Ribbon.CustomTab" , "" );
148: base .OnPreRender(e);
149: }
150:
151: protected override void OnInitComplete(EventArgs e)
152: {
153: base .OnInitComplete(e);
154: }
155: }
156: }
157:
158:
9. You need two JavaScript files in the project’s sub folder in the SharePoint’s hive folder “Layouts”.
This file contains code for the Ribbon:
1: function ULS_SP() {
2: if (ULS_SP.caller) {
3: ULS_SP.caller.ULSTeamName = "Windows SharePoint Services 4" ;
4: ULS_SP.caller.ULSFileName = "ikribbon.UI.js" ;
5: }
6: }
7:
8: Type.registerNamespace(< span> );
9:
10: // Page Component
11: ikribbon.UI.PageComponent = function () {
12: ULS_SP();
13: ikribbon.UI.PageComponent.initializeBase(this );
14: }
15: ikribbon.UI.PageComponent.initialize = function () {
16: ULS_SP();
17: ExecuteOrDelayUntilScriptLoaded(Function.createDelegate(null , ikribbon.UI.PageComponent.initializePageComponent), < span> );
18: }
19: ikribbon.UI.PageComponent.initializePageComponent = function () {
20: ULS_SP();
21: var ribbonPageManager = SP.Ribbon.PageManager.get_instance();
22: if (null !== ribbonPageManager) {
23: ribbonPageManager.addPageComponent(ikribbon.UI.PageComponent.instance);
24: ribbonPageManager.get_focusManager().requestFocusForComponent(ikribbon.UI.PageComponent.instance);
25: }
26: }
27: ikribbon.UI.PageComponent.refreshRibbonStatus = function () {
28: SP.Ribbon.PageManager.get_instance().get_commandDispatcher().executeCommand(Commands.CommandIds.ApplicationStateChanged, null );
29: }
30: ikribbon.UI.PageComponent.prototype = {
31: getFocusedCommands: function () {
32: ULS_SP();
33: return [];
34: },
35: getGlobalCommands: function () {
36: ULS_SP();
37: return getGlobalCommands();
38: },
39: isFocusable: function () {
40: ULS_SP();
41: return true ;
42: },
43: receiveFocus: function () {
44: ULS_SP();
45: return true ;
46: },
47: yieldFocus: function () {
48: ULS_SP();
49: return true ;
50: },
51: canHandleCommand: function (commandId) {
52: ULS_SP();
53: return commandEnabled(commandId);
54: },
55: handleCommand: function (commandId, properties, sequence) {
56: ULS_SP();
57: return handleCommand(commandId, properties, sequence);
58: }
59: }
60:
61: var ikribbonActiveInterval = null ;
62:
63: function ikribbonActiveRibbonTab() {
64: try {
65: window.clearInterval(ikribbonActiveInterval);
66:
67: if (typeof (_ribbonStartInit) == "function" ) {
68: _ribbonStartInit(< span> , false , null );
69: }
70:
71: if (true && typeof (_ribbonReadyForInit) == < span> && !_ribbonReadyForInit()) {
72: ikribbonActiveInterval = window.setInterval("ikribbonActiveRibbonTab()" , 100);
73: }
74: } catch (e2) {
75: };
76: };
77:
78: function ikribbonInit() {
79: alert(< span> );
80: ikribbon.UI.PageComponent.registerClass(< span> , CUI.Page.PageComponent);
81: ikribbon.UI.PageComponent.instance = new ikribbon.UI.PageComponent();
82: ikribbon.UI.PageComponent.initialize();
83:
84: ExecuteOrDelayUntilScriptLoaded(ikribbonActiveRibbonTab, < span> );
85: }
86:
87: NotifyScriptLoadedAndExecuteWaitingJobs("ikribbon.UI.js" );
88:
89:
90:
91:This file contains code for the actions executed on clicking the custom Ribbon buttons:
1: function ikSharePoint2010CommandButton1Action() {
2: alert("Button 1 pressed" );
3: }
4:
5: function ikSharePoint2010CommandButton1Enable() {
6: return true ;
7: }
8:
9: function ikSharePoint2010CommandButton2Action() {
10: alert("Button 2 pressed" );
11: }
12:
13: function ikSharePoint2010CommandButton2Enable() {
14: return true ;
15: }
16:
17: function ikSharePoint2010CommandButton3Action() {
18: alert("Button 3 pressed" );
19: }
20:
21: function ikSharePoint2010CommandButton3Enable() {
22: return true ;
23: }
24:
25:
10. Modify the list definitions “schema.xml” file: Edit the following line:
<View BaseViewID=”1″ Type=”HTML” WebPartZoneID=”Main2″ DisplayName=”$Resources:core,objectiv_schema_mwsidcamlidC24;”
DefaultView=”TRUE” MobileView=”TRUE” MobileDefaultView=”TRUE” ImageUrl=”/_layouts/images/generic.png” Url=”AllItems.aspx”>
Remove the SetupPath attribute!
11. Set the view pages “DeploymentType” property to “NoDeployment”:
12. That’s all 
Hello Ingo,
I have previously commented on your blog entry on custom task form in ASPX page. Now I see this post relates to what I am doing. I need to replace the default DisplayView dropdown in Custom List in Datasheet View with my own version of dropdown with properly populated created public views. The population of public view is based on which access group the current user is in as I intend to restrict what public views the user can have access to when currently the user has access to all public views. Can you point me to the proper direction using VS2010? I intend not to write any JS script and plan to do it entirely in C#.