How To Activate SharePoint Ribbon Tab by JavaScript Code

In the last weeks I’ve extended the sample project that I’ve created for “Ribbon Customization”. You find the project source code on Codeplex:

• http://spcustomribbondemo.codeplex.com/

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.

There are lots of excellent articles out there about SharePoint 2010 Ribbon customization.

Some articles that helped me:

• Chris O’Brien’s Blog - Customize the ribbon programmatically from web parts and field controls
• Microsoft SharePoint Team Blog
• Elumenotion Blog - Code to Hide the Ribbon and Site Actions Menu for Anonymous Users
• Makarand Kulkarni’s Blog - SharePoint 2010 Ribbon Customization Part I: Architecture of Ribbon

Especially the first blog post in the above list leaves a question open: “Using client-side code to show ribbon items”.

I had the same problem: How to activate a custom SharePoint Ribbon tab by JavaScript code?

After some reading in SharePoint standard JavaScript files I found the solution. I used some jQuery too:

1: $(document).ready(function  () {

2:     ExecuteOrDelayUntilScriptLoaded(salesappActiveRibbonTab, "sp.ribbon.js" );

3:

4:     function  salesappActiveRibbonTab() {

5:         try  {

6:             _ribbonStartInit("MyApp.SharePoint.Ribbon.CustomTab" , false , null );

7:         } catch  (e) {

8:         };

9:     };

10: });

This allows me to activate my custom Ribbon tab with ID “MyApp.SharePoint.Ribbon.CustomTab” by JavaScript code. It works pretty fine!

Update 1

Meanwhile I created an test project for adding a custom ribbon tab while runtime. There I have had the problem, that the ribbon was created correctly BUT was not activated thru the code above. After some debugging of MS Ribbon JavaScript I created the following code:

var ribbontestintervall = null;

function RibbonTestActiveRibbonTab2() {     try {         window.clearInterval(ribbontestintervall);

        if (typeof (_ribbonStartInit) == "function")             _ribbonStartInit('RibbonTest.SharePoint.Ribbon.CustomTab', false, null);

        if (true && typeof (_ribbonReadyForInit) == 'function' && !_ribbonReadyForInit()) {             ribbontestintervall = window.setInterval("RibbonTestActiveRibbonTab2()", 1000);         }     } catch (e2) {     };
};

So the Browser retries the activation of the tab as long as it works.

Update 2 (2011/01/14)

See my new post and sample project on CodePlex :

Sample Visual Studio 2010 project for creating a custom SharePoint 2010 Ribbon tab on runtime (!)

Update 3 (2011/03/03)

Next part posted today. See the part list at the top of this blog post.