1

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?

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.