SharePoint Custom Actions Enabled Script without Visual Studio

I recently have been "hacking" some SharePoint, unfortunately without Visual Studio due to environmental and financial constraints. So the free SharePoint Designer (SPD) has come in very handy. Except, that is, for one thing: It does not allow you to include the enabled script for custom actions (aka ribbon menu items). But with a little help from JQuery we can fix this. 

Firstly, add your new custom action via SPD, and make the "Navigate to url" -> javascript:CustomActions.MyAction.Command(); 

Then add the following to your page, either via SPD Master page, or HTML web part. Just remember to make sure that you have  a reference to JQuery in there too - but if you are doing anything in SharePoint you probably already have that :) 


$(document).ready(function () {
    if (!g_commandUIHandlers) {
        return;
    }
    for (var action in CustomActions) {
        if (action.substring(0, 1) == "_") { // Skip any private methods 
            continue;
        }
        if (typeof CustomActions[action] == "object") {
            $(g_commandUIHandlers.children).each(function (index, value) {
                if (this.attrs.CommandAction.indexOf("CustomActions." + action + ".Command(") >= 0) {
                    this.attrs.EnabledScript = "javascript:try { CustomActions." + action + ".EnableScript(); } catch (e) { alert('Error in CustomActions." + action + ".EnableScript() - Please contact Admin.'); }";
                    return;
                }
            });
        }
    }
});

var CustomActions = {

    MyAction:
        {
            EnableScript: function () {
                // Do whatever checking you want here - even aysnc just call "RefreshCommandUI();" at 
                // the end of the call and save the state somewhere 
                //return SP.ListOperation.Selection.getSelectedItems(SP.ClientContext.get_current()).get_count() > 0;
                return true;
            },
            Command: function () {
                alert("DO WHATEVER YOU WANT TO DO HERE");
            }
        },
}

The first method within the document.ready finds each of the commands we are calling, and replaces the enabled script with the enabled command of the same action. Make sense? Hope so.

The second bit is the CustomActions namespace. This is where the Actions live. You can also have private helper methods here prefixed with "_", 

In my implementation I have helper methods like, _IsInGroup, I also was able to write an async enabled script by using a cache member within the action, ie. MyAction._IsEnabled = null, then at the start of the check if null return false, else return the value. Just remember to call RefreshCommandUI() at the end of the async call. See the following....



MyAction:
    {
        _Enabled: null,
        _AsyncEnabledScript: function () {
            DoAysncCall(function(enabled) {
                CustomActions.MyAction._Enabled = enabled;
                RefreshCommandUI();
            });
        },
        EnableScript: function() {
            if (CustomActions.MyAction._Enabled == null) {
                this._AsyncEnabledScript();
                return false;
            }
            return CustomActions.MyAction._Enabled.value;
        },
        Command: function () {
            alert("DO WHATEVER YOU WANT TO DO HERE");
        }
    },