Answers.Body: <p>At time of writing (circa <code>4.7.20</code>), the <code>crm-ui-tab-set</code> directive does not support an option to manage the active tab.</p>
  
  <p>I think a patch to support that would be welcome. For example, one might update <code>crm-ui-tab-set</code> (in <code>ang/crmUi.js</code>) to support an extra variable <code>active-tab</code> with an interface like this:</p>
  
  <pre><code>&lt;div crm-ui-tab-set active-tab="selectedTab"&gt;
    &lt;div id="mytab1" crm-ui-tab crm-title="ts('Tab 1')"&gt;
      This is Tab 1.
    &lt;/div&gt;
    &lt;div id="mytab2" crm-ui-tab crm-title="ts('Tab 2')"&gt;
      This is Tab 2.
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>You could then initialize <code>selectedTab</code> from the controller, e.g.</p>
  
  <pre><code>angular...controller('MyController', function(...){
    $scope.selectedTab = "mytab1";
  });
  </code></pre>
  
  <p>or</p>
  
  <pre><code>$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"
  });
  </code></pre>
  
  <p><strong>Observation</strong>: <code>crm-ui-tab-set</code> is a thin wrapper for <a href="https://jqueryui.com/tabs/" rel="nofollow noreferrer">jQueryUI <code>tabs</code></a>. It's built with "jQuery Passhthrough" (<code>ui-jq="tabs"</code>) from <code>angular-ui-utils</code> (<code>v0.1.x</code>). Unfortunately, the docs/examples for "jQuery Passthrough" have been scrubbed from <code>angular-ui</code>'s website, but you can find some discussion in <a href="http://web.archive.org/web/20150515012057/http://angular-ui.github.io/ui-utils/#/jq" rel="nofollow noreferrer">archive.org</a>.</p>
  
  <p><strong>Tip</strong>: Given that <code>ui-jq</code> has been deprecated, we should try to limit/contain the jQuery-isms. <code>crm-ui-tab-set</code> would probably call some jQuery functions, but downstream extensions shouldn't.</p>
  
  <p><strong>Tip</strong>: If your UI is built on Bootstrap CSS, then consider replacing <code>crm-ui-tab-set</code> with <a href="https://angular-ui.github.io/bootstrap/" rel="nofollow noreferrer"><code>uib-tabset</code> from <code>anguilar-ui-bootstrap</code></a>.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-06-06T22:46:57.393Z
Answers.Text: Thanks, Tim Otten. Issue with PR filed here: https://issues.civicrm.org/jira/browse/CRM-20692
Answers.UserDisplayName: TwoMice
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-06-05T21:19:43.947Z
Answers.LastActivityDate: 2017-06-05T21:19:43.947Z
Answers.UserDisplayName: Tim Otten
Body: <p>With AngularJS, I have a page (created with <code>civix generate:angular-page</code>) that includes a set of tabs like so:</p>
  
  <pre><code>  &lt;div crm-ui-tab-set&gt;
      &lt;div id="mytab1" crm-ui-tab crm-title="ts('Tab 1')"&gt;
        This is Tab 1.
      &lt;/div&gt;
      &lt;div id="mytab2" crm-ui-tab crm-title="ts('Tab 2')"&gt;
        This is Tab 2.
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Let's say this page is at <code>/a/#/foo</code>. 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.</p>
  
  <p>How can I link to <code>/a/#/foo</code> in a way that Tab 2 is opened by default?</p>
  
Tags: <angular>
Title: How can I link to a specific tab in crm-ui-tab-set
ThreadText: # How can I link to a specific tab in crm-ui-tab-set
  
  (Asked by: username_0 on 2017-06-05)
  
  With AngularJS, I have a page (created with civix generate:angular-page) that includes a set of tabs like so:
    
      
        This is Tab 1.
      
      
        This is Tab 2.
      
    
  
  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?
  
  **Tags:** angular
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2017-06-05. Score: 1 | Accepted answer
  
  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:
  
    
      This is Tab 1.
    
    
      This is Tab 2.
    
  
  
  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.
  
  > **Comments:**
  > **username_0**: Thanks, username_1. Issue with PR filed here: https://issues.civicrm.org/jira/browse/CRM-20692  
  
  ---
  
  