Trigger an event whenever the SharePoint 2010 ribbon changes

If you ever need to do things every time the ribbon is changed, here’s how to do it with jQuery events.

// Fires 'ribbontabselected' every time the ribbon selection changes
ExecuteOrDelayUntilScriptLoaded(function () {
    CUI.Ribbon.prototype.$L_old = CUI.Ribbon.prototype.$L;
    CUI.Ribbon.prototype.$L = function () {
        this.$L_old();
        $(document).trigger('ribbontabselected', [this.get_selectedTabCommand()]);
    };
}, 'cui.js');

// Fires 'ribbontabselected' after the ribbon has been initialized after load
ExecuteOrDelayUntilScriptLoaded(function () {
    var pm = SP.Ribbon.PageManager.get_instance();
    pm.add_ribbonInited(function () {
        $(document).trigger('ribbontabselected', [SP.Ribbon.PageManager.get_instance().get_ribbon().get_selectedTabCommand()]);
    });
}, 'sp.ribbon.js');

// Example code for binding to the event
$(document).on('ribbontabselected', function (e, selectedTabCommand) {
    if (selectedTabCommand != "ReadTab") {
        alert(selectedTabCommand);
    }
});
Advertisements

15 responses to “Trigger an event whenever the SharePoint 2010 ribbon changes

  • Rich Grenwick

    Oh man – thankyouthankyouthankyou! Perfect solution —

  • Cicely

    I’m doing this:

    // Fires ‘ribbontabselected’ every time the ribbon selection changes
    ExecuteOrDelayUntilScriptLoaded(function () {
    CUI.Ribbon.prototype.$L_old = CUI.Ribbon.prototype.$L;
    CUI.Ribbon.prototype.$L = function () {
    this.$L_old();
    $(document).trigger(‘ribbontabselected’, [this.get_selectedTabCommand()]);
    };
    }, ‘cui.js’);

    // Fires ‘ribbontabselected’ after the ribbon has been initialized after load
    ExecuteOrDelayUntilScriptLoaded(function () {
    var pm = SP.Ribbon.PageManager.get_instance();
    pm.add_ribbonInited(function () {
    $(document).trigger(‘ribbontabselected’, [SP.Ribbon.PageManager.get_instance().get_ribbon().get_selectedTabCommand()]);
    });
    }, ‘sp.ribbon.js’);

    // Example code for binding to the event
    $(document).on(‘ribbontabselected’, function (e, selectedTabCommand) {
    $(“#Ribbon.ListItem.New”).hide();
    });

    And it isn’t working? What am I doing wrong?

    • dennispg

      Do you get any JavaScript errors? Are you referencing jQuery? Need a little bit more information…

      • Cicely

        No JS errors. JQuery is referenced. As you can see, I’m trying to hide the New Item button when the ribbon state changes. Right now, when the ribbon changes to the Item tab, the New Item button is still showing.

      • dennispg

        Ah, I didn’t notice that the first time, thought you just copy/pasted my code exactly..

        What you’re seeing is because jQuery requires that dots in id selectors be properly escaped, like so: $(‘#Ribbon\\.ListItem\\.New’)

        However (obviously without fully knowing what you’re really trying to accomplish..), I would strongly recommend using SharePoint security instead to restrict the New button rather than JavaScript. Hiding the New button like this does nothing to prevent someone who knows what they’re doing from accessing the new form.

      • Cicely

        Unfortunately, we can’t restrict access due to several workflows which create new items in the list. The workflows create the items for the user who initiated the workflow. If I make the list read only, the workflows will start failing. I need an alternative. I’ll try escaping the dots.

      • dennispg

        If the value in the “Created By” isn’t crucial, you could impersonate the System Account from within your workflow to create the new item as that account which does have rights.. then create a new permission level which excludes the AddListItems permission and assign that to your users.

      • Cicely

        It is crucial to the business process.

  • Martin P.

    nice one. THX

  • Pedro

    Hello:

    There is an error using your solution:

    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/6.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; InfoPath.3)
    Timestamp: Mon, 15 Jul 2013 10:59:46 UTC

    Message: Sys.InvalidOperationException: Type SP.UI.MyLinksRibbon.MyLinksCommandNames has already been registered. The type may be defined multiple times or the script file that defines it may have already been loaded. A possible cause is a change of settings during a partial update.
    Line: 1717
    Char: 42
    Code: 0
    URI: http://core7/ScriptResource.axd?d=mCuU3E3pw8-05kWOkuIADSdHRKNTBrw2loVz3NHBoxG88O_Ji_VqGHg7imaUoQkxXLdMGekBMHCdg0ReVbgITeT21xzBj6eUBaHhnujLreCgTG-X1h-dptmd-fmic0wUC3jAYLIUd0wwnYusu2YNJorIg1M3hAAT0JOPbIJebRgeQvzg0&t=33137d1a

    Anybody has this error?

  • faiz

    I think Cicely’s code will not work because the event is fired on ribbon selected. When the event is fired, the DOM for items tab is not yet recieved from server and therefore the jquery selector will be null.. Any thoughts how we can fire event after the html for item tabs is recieved such that jquery selector can be used to manipulate the tab elements?

    • dennispg

      The entire point of the article is to enable firing a custom event both when 1. the ribbon tab is changed, and 2. when the ribbon itself is initialized. The reason Cicely’s code did not work was because her selector was not properly escaped. She never replied back whether that fixed it for her, but in my testing it correctly once the periods in the ID were properly escaped. example: $(‘#Ribbon\\.ListItem\\.New’)

      I believe it is impossible using this method that the custom event could fire before the DOM for the items tab is loaded, is there anything specific which has lead you to that conclusion?

  • Shaurya

    Faiz is correct i am getting the same issue. I need to change the label of “Status” button under publish tab but if the user first clicks on some other tab and then clicks on Publish tab the label does not change.

  • SharePoint 2013: Trigger Event With Ribbon Tab Changes | Developing Title…

    […] ribbon on some specific App parts on SharePoint 2013, so looking around I found a post that shows how to trigger an event with each ribbon change by Dennis George which was of great help because it did exactly what I needed, to capture when a certain tab was […]

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

%d bloggers like this: