I am currently developing a lightning component in which I am using lightning:tabset.Within this tabset, there are two lightning:tab being used in it.By default, when the component loads, the first tab is active and visible.I have a button on the lightning component named Search.Once i click on this button, i am calling an apex method from the Javascript controller.Once this button is clicked, i need to make my second lightning:tab active and visible.
Below is my code for the component:
<aura:component controller="UserSearchController" access="global" implements="flexipage:availableForAllPageTypes,force:appHostable,force:hasRecordId">
<ltng:require styles="/resource/SLDS203/assets/styles/salesforce-lightning-design-system.min.css" />
<aura:attribute name="userName" type="String" description="Search String for user name"/>
<aura:attribute name="empOrgUnit" type="String" description="Employee Org Unit"/>
<aura:attribute name="dateOfBirth" type="Date" description="Date of Birth"/>
<aura:attribute name="lstUsers" type="List" description="List of users"/>
<aura:attribute name="lstExistPerm" type="RecordShareWrapper[]" description="List of exisiting permissions"/>
<aura:attribute name="recordId" type="Id" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:handler event="aura:waiting" action="{!c.waiting}"/>
<aura:handler event="aura:doneWaiting" action="{!c.doneWaiting}"/>
<span id="Accspinner" style="display:none"><lightning:spinner /></span>
<div class="modal-content" >
<div class="slds-modal__header">
<div class="slds-p-horizontal_small slds-size_1-of-1">
<h2 id="header43" class="slds-text-heading_medium">Search
Users</h2>
</div>
</div>
<div class="slds-grid slds-wrap" >
<div class="slds-p-horizontal_small slds-medium-size_1-of-3 slds-size_1-of-1 slds-m-bottom_medium">
<label class="slds-form-element__label">User Name</label><br/>
<ui:inputText aura:id="orgName" class="slds-input" value="{!v.userName}"/>
</div>
<div class="slds-p-horizontal_small slds-medium-size_1-of-3 slds-size_1-of-1 slds-m-bottom_medium">
<label class="slds-form-element__label">Employee Org Unit</label><br/>
<ui:inputText aura:id="organisationIdentifier" value="{!v.empOrgUnit}" class="slds-input"/>
</div>
<div class="slds-p-horizontal_small slds-medium-size_1-of-3 slds-size_1-of-1 slds-m-bottom_medium" >
<label class="slds-form-element__label">Date of Birth</label>
<br/>
<ui:inputDate displayDatePicker="true" class="slds-input test"
value="{!v.dateOfBirth}" />
</div>
</div>
<div class="slds-p-horizontal_small slds-size_1-of-1">
<div class="slds-align_absolute-center" >
<button class="slds-button slds-button--brand slds-p-horizontal--large" type="button"
id="btnSearch" onclick="{!c.searchButtonClicked}" >Search</button>
</div>
</div>
<div class="slds-p-horizontal--small slds-size--1-of-1">
<div
class="slds-page-header slds-page-header--object-home modal-content">
<div class="slds-grid">
<div class="slds-col slds-has-flexi-truncate">
<div class="slds-media slds-no-space slds-grow">
<div class="slds-media__body">
<h1 class="slds-page-header__title slds-p-right--x-small">
<span class="slds-truncate">Users</span>
</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<lightning:tabset>
<lightning:tab label="Add New Permission" id="tab1">
<table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
<thead>
<tr class="slds-text-heading--label">
<th scope="col"><div class="slds-truncate" title="ID">Name</div></th>
<th scope="col"><div class="slds-truncate" title="Name">Email</div></th>
<th scope="col"><div class="slds-truncate" title="Email">DOB</div></th>
<th scope="col"><div class="slds-truncate" title="DOB">Profile</div></th>
</tr>
</thead>
<tbody>
<!-- Use the Apex model and controller to fetch server side data -->
<aura:iteration items="{!v.lstUsers}" var="user">
<tr>
<th scope="row"><div class="slds-truncate" title="{!user.Name}">{!user.Name}</div></th>
<td><div class="slds-truncate" title="{!user.Email}">{!user.Email}</div></td>
<td><div class="slds-truncate" title="{!user.DOB__c}">{!user.DOB__c}</div></td>
<td><div class="slds-truncate" title="{!user.Profile.Name}">{!user.Profile.Name}</div></td>
</tr>
</aura:iteration>
</tbody>
</table>
</lightning:tab>
<lightning:tab id="tab2" label="View Current Permissions">
Sample Content One
</lightning:tab >
</lightning:tabset>
</div>
</aura:component>
Best Answer
You can use "selectedTabId" attribute for this purpose.
Controller