0

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>
3
  • This looks like incredible but this is not possible yet.. Commented Nov 21, 2017 at 8:20
  • @MartinLezer what alternatives do i have for this, then? Do i have to create tabs through html?
    – Abhijeet
    Commented Nov 21, 2017 at 9:57
  • I tried everything with the component but I didn't find any trick to do it. So yes you should code the whole thing yourself using the lightning design system and some standard Javascript. Commented Nov 21, 2017 at 10:34

1 Answer 1

1

You can use "selectedTabId" attribute for this purpose.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<aura:attribute name="tabId" type="String" default="google" />
<lightning:tabset variant="scopped" selectedTabId="{! v.tabId }">

    <lightning:tab label="Google Search" id="google">
        Google Search
    </lightning:tab>

    <lightning:tab label="Yahoo" id="yahoo">
        <lightning:button variant="brand" label="Navigate To Google Tab" onclick="{! c.navigateToGoogleTab }" />
    </lightning:tab>        

</lightning:tabset>

Controller

({
    navigateToGoogleTab : function(component, event, helper) {
    component.set("v.tabId","google");
}
})
2
  • you are welcome @Abhijeet. It will work for sure :). Please mark it as "Answer" if it solves the issue. Commented Nov 21, 2017 at 14:46
  • thanks for the solution.This actually worked like a charm :)
    – Abhijeet
    Commented Nov 24, 2017 at 19:22

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .