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.. Nov 21 '17 at 8:20
  • @MartinLezer what alternatives do i have for this, then? Do i have to create tabs through html?
    – Abhijeet
    Nov 21 '17 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. Nov 21 '17 at 10:34
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. Nov 21 '17 at 14:46
  • thanks for the solution.This actually worked like a charm :)
    – Abhijeet
    Nov 24 '17 at 19:22

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.