Documentation Center

How to specify the availability of a custom tab or group

The availability of a custom tab or group can be easily defined by creating a custom command, which returns true or false.

var customCommand = {
  getAvailable: function(scope) {
    return true;
  },
  execute: function() {
    return false;
  }
}
Editor.addCommand("CustomCommand", customCommand);  
<x:overlay xmlns="http://xopus.com/2009/lui">
  <ribbon-tab id="CustomTab" after="HomeTab" availability="CustomCommand">
    <ribbon-group id="CustomGroup" label="Formatting">
      <ribbon-bigbutton role="strong" />
      <ribbon-bigbutton role="emphasis" />
      <ribbon-bigbutton role="underline" />
    </ribbon-group>
  </ribbon-tab>
</x:overlay>
<x:javascript>
  var customCommand = {
    execute: function () {
      return false;
    },
    getAvailable: function (scope) {
      var ancestors = scope.get("ancestors");
      for (var i = ancestors.length-1; i &gt;= 0; i--) {
        var elname = ancestors[i] &amp;&amp; ancestors[i].getLocalName();
        if (elname == "p") {
          return true;
        }
      }
      return false;
    }
  };
  Editor.addCommand("CustomCommand", customCommand);
</x:javascript>
Notice the use of the built-in scope variable ancestors in the line:
var ancestors = scope.get("ancestors");
By taking advantage of the built-in scope variable ancestors, the getAvailable method will be executed whenever the context changes, i.e. when there is a change to the scope variable.