How can I link to a specific tab in crm-ui-tab-set

Question

With AngularJS, I have a page (created with civix generate:angular-page) that includes a set of tabs like so:

  <div crm-ui-tab-set>
    <div id="mytab1" crm-ui-tab crm-title="ts('Tab 1')">
      This is Tab 1.
    </div>
    <div id="mytab2" crm-ui-tab crm-title="ts('Tab 2')">
      This is Tab 2.
    </div>
  </div>

Let's say this page is at /a/#/foo. As far as I can tell, Tab 1 is the default tab and will always be opened when I open this URL, which is what I want most of the time. But sometimes I want that page to open in Tab 2.

How can I link to /a/#/foo in a way that Tab 2 is opened by default?

Answer 1

At time of writing (circa 4.7.20), the crm-ui-tab-set directive does not support an option to manage the active tab.

I think a patch to support that would be welcome. For example, one might update crm-ui-tab-set (in ang/crmUi.js) to support an extra variable active-tab with an interface like this:

<div crm-ui-tab-set active-tab="selectedTab">
  <div id="mytab1" crm-ui-tab crm-title="ts('Tab 1')">
    This is Tab 1.
  </div>
  <div id="mytab2" crm-ui-tab crm-title="ts('Tab 2')">
    This is Tab 2.
  </div>
</div>

You could then initialize selectedTab from the controller, e.g.

angular...controller('MyController', function(...){
  $scope.selectedTab = "mytab1";
});

or

$routeProvider.when('/foo/{tabName}', {
   controller: 'MyController',
   resolve: {tabName: function($route){return route.current.params.tabName;}},
   ...
});

angular...controller('MyController', function(tabName, ...){
  $scope.selectedTab = tabName; // Ex: "mytab1", "mytab2"
});

Observation: crm-ui-tab-set is a thin wrapper for jQueryUI tabs. It's built with "jQuery Passhthrough" (ui-jq="tabs") from angular-ui-utils (v0.1.x). Unfortunately, the docs/examples for "jQuery Passthrough" have been scrubbed from angular-ui's website, but you can find some discussion in archive.org.

Tip: Given that ui-jq has been deprecated, we should try to limit/contain the jQuery-isms. crm-ui-tab-set would probably call some jQuery functions, but downstream extensions shouldn't.

Tip: If your UI is built on Bootstrap CSS, then consider replacing crm-ui-tab-set with uib-tabset from anguilar-ui-bootstrap.