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:

The related articles on my blog are:


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

Some articles that helped me:

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.

8 thoughts on “How To Activate SharePoint Ribbon Tab by JavaScript Code

  1. I combined your code examples into the following:

    $(document).ready(function () {
    ExecuteOrDelayUntilScriptLoaded(RibbonTestActiveRibbonTab2, “sp.ribbon.js” );
    var ribbontestintervall = null;
    function RibbonTestActiveRibbonTab2()
    {
    try
    {

    window.clearInterval(ribbontestintervall);

    if (typeof (_ribbonStartInit) == “function”)
    {
    alert(‘test3’);
    _ribbonStartInit(‘Ribbon.LiveAtEduTab’, false, null);
    }
    if (true && typeof (_ribbonReadyForInit) == ‘function’ && !_ribbonReadyForInit())
    {
    alert(‘test2’);
    ribbontestintervall = window.setInterval(“RibbonTestActiveRibbonTab2()”, 1000);
    }
    } catch (e2)
    {
    }
    }
    });

    but although it does not give off any errors it also does not produce a ribbon tab. Could you do an suggestion?

    1. Hi Bart,

      please try an “alert” in the “catch”-Section to see if there are any exceptions. – Another point is that jQuery has to be available on the site! – Have you done that?

      Kind regards
      Ingo

  2. Hi there,

    Is it possible to use this to set a page back to Browse mode when the page loads? At the moment one of my pages opens in edit mode because of a form web part and I want to know how to get it to open in browse mode.

    Any help would be enormously appreciated.

    M

    1. Hi M,

      you could try to use the tab ID “Ribbon.Read” instead of “MyApp.SharePoint.Ribbon.CustomTab” in the sample code above. This is the tab ID of the “Browse” tab. – You can find a the standard Ribbon definition in the 14 hive: Common FilesMicrosoft SharedWeb Server Extensions14TEMPLATEGLOBALXMLCMDUI.XML.

      Kind regards
      Ingo

  3. I want to create four tab ribbon for a content/publishing page in Sandbox solution.I created the structure of ribbon but i don’t get any solution to show my ribbon on a particular page.Can you suggest me that how can i show my ribbon on a page in sandbox environment because sandbox have own limitation you know so i can’t use web part,user control etc.

  4. Hi, i tried your code to set Ribbon.Read as default tab. I am able tohe see Ribbon.Read set to the default tab. But i am getting a javascript error after Ribbon.Read tab is selected default. The error is like “Attempting to attach to Id: Ribbon.Read but this id is not present in the DOM..” please help

Leave a Reply

Your email address will not be published. Required fields are marked *