SharePoint 2013: Trigger Event With Ribbon Tab Changes

I needed to change the delete button on the 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 selected. The issue? It doesn’t work on SharePoint 2013 because the CUI.Ribbon.prototype.$L is always undefined, so I started debugging the whole ribbon and found that to make the code work in SharePoint 2013 I just had to change $L with $1q_0 and that was it. So here’s the code to trigger an event each time there is a change on the SharePoint 2013 ribbon. Use it at will:


// Fires 'ribbontabselected' every time the ribbon selection changes

ExecuteOrDelayUntilScriptLoaded(function () {

debugger;

CUI.Ribbon.prototype.$1q_0_old = CUI.Ribbon.prototype.$1q_0;

CUI.Ribbon.prototype.$1q_0 = function () {

this.$1q_0_old();

$(document).trigger('ribbontabselected', [this.get_selectedTabCommand()]);

};

}, 'cui.js');

// Fires 'ribbontabselected' after the ribbon has been initialized after load

ExecuteOrDelayUntilScriptLoaded(function () {

debugger;

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) {

debugger;

if (selectedTabCommand != "ReadTab") {

alert(selectedTabCommand);

}

});

Advertisements

13 thoughts on “SharePoint 2013: Trigger Event With Ribbon Tab Changes

  1. how does this work?I added it through CEWP on allitems.aspx and entire ribbon was hidden. I add it though JSLink , ribbon was visible but all ribbon buttons were disabled.

    Like

    • You should add it inside a Script Editor Web Part or putting it on a separate file and reference it on the master page or on the layout of your need. Let me know if you have any issues.

      Like

  2. Dear Santiago I found that on IE 10 (not tested with other version thought) on our Sharepoint 2013 (on which backend indeed I don’t have any control as I’m working with CSR/JS Link) the first `ExecuteOrDelayUntilScriptLoaded` is called twice so that the `$1q_0_old` is override in the second call with an infinite recursion.

    I added a simple test to avoid the issue:
    “`
    if (typeof CUI.Ribbon.prototype.$1q_0_old == ‘undefined’) {
    CUI.Ribbon.prototype.$1q_0_old = CUI.Ribbon.prototype.$1q_0;
    }
    “`

    Like

Leave a Comment

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