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.

Advertisements

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

  1. 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

  2. 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.

  3. 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 Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\GLOBAL\XML\CMDUI.XML.

      Kind regards
      Ingo

  4. 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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s