+ Start a Discussion
Pruthvi Raj 21Pruthvi Raj 21 

i have created three lightning tabs ,onclick next button want to move to the next tab..please help

Pruthvi Raj 21Pruthvi Raj 21
Hi Piyush,

Thanks for yor reply

My Component
========
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" 
controller="Multiplefilecontroller" >
    <aura:attribute name="isOpen" type="boolean" default="false"/>
    <aura:attribute name="fileName" type="String"/>
    <aura:attribute name="fileList" type="Array"/>
    <aura:attribute name="file1" type="Object"/>
    <aura:attribute name="file2" type="Object"/>
    <aura:attribute name="file3" type="Object"/>
    <aura:attribute name="fileContents1" type="String"/>
    <aura:attribute name="fileContents2" type="String"/>
    <aura:attribute name="fileContents3" type="String"/>
    <aura:attribute name="fileCount" type="Integer" default="0"/>
    <ltng:require styles="{!$Resource.SLDS + '/assets/styles/lightning-design-system-ltng.css'}"/>
    
    <aura:attribute name="at" type="My_Leads__c" default="{ 'sobjectType': 'My_Leads__c',
                                                          'Name': ''}"/>
    <div class="myclass">
        
        <lightning:tabset >
            
            <lightning:tab label="Basic Details">
                
                
                <div class="slds-form-element">
                    <div class="slds-form-element__control">
                        <ui:inputText aura:id="leadname" label="Full Name"
                                      class="slds-input"
                                      labelClass="slds-form-element__label"
                                      value="{!v.at.Name}"/>
                    </div>
                    
                    <div class="slds-form-element__control">
                        <ui:inputText aura:id="leadEmail" label="Email"
                                      class="slds-input"
                                      labelClass="slds-form-element__label"
                                      value="{!v.at.Email__c}"/>
                    </div>
                    
                    <div class="slds-form-element__control">
                        <ui:inputText aura:id="leadmobile" label="Mobile Number"
                                      class="slds-input"
                                      labelClass="slds-form-element__label"
                                      value="{!v.at.Mobile_Number__c}"/>
                    </div>
                    
                    <div class="slds-form-element__control">
                        <ui:inputText aura:id="leadstate" label="State"
                                      class="slds-input"
                                      labelClass="slds-form-element__label"
                                      value="{!v.at.States__c}"/>
                    </div>
                    
                    <div class="slds-form-element__control">
                        <ui:inputText aura:id="leadcity" label="City"
                                      class="slds-input"
                                      labelClass="slds-form-element__label"
                                      value="{!v.at.Cities__c}"/>
                    </div>
                    
                    <div class="slds-form-element__control">
                        <ui:inputText aura:id="leadpin" label="Pin Code "
                                      class="slds-input"
                                      labelClass="slds-form-element__label"
                                      value="{!v.at.Pin_Code__c}"/>
                    </div>
                    
                    <div class="slds-form-element__control">
                        <ui:inputTextarea aura:id="leadadd" label="Address"
                                          class="slds-textarea"
                                          labelClass="slds-form-element__label"
                                          value="{!v.at.Address__c}"/>
                    </div>
                    
                </div>
            </lightning:tab>
            
            <lightning:tab label="Company Details">
                
                
                <div class="slds-form-element">
                    <div class="slds-form-element__control">
                        <ui:inputText aura:id="leadcompany" label="Company Name "
                                      class="slds-input"
                                      labelClass="slds-form-element__label"
                                      value="{!v.at.Company_Name__c}"/>
                    </div>
                    
                    <div class="slds-form-element__control">
                        <ui:inputText aura:id="leaddesg" label="Designation "
                                      class="slds-input"
                                      labelClass="slds-form-element__label"
                                      value="{!v.at.Designation__c}"/>
                    </div>
                    
                    <div class="slds-form-element__control">
                        <ui:inputText aura:id="leadcibil" label="CIBIL Score"
                                      class="slds-input"
                                      labelClass="slds-form-element__label"
                                      value="{!v.at.CIBIL_Score__c}"/>
                    </div>
                    
                    <div class="slds-form-element__control">
                        <ui:inputText aura:id="leadgross" label="Gross Salary"
                                      class="slds-input"
                                      labelClass="slds-form-element__label"
                                      value="{!v.at.Gross_Salary__c}"/>
                    </div>
                    
                    <div class="slds-form-element__control">
                        <ui:inputText aura:id="leadadhar" label="Adhar Card Number"
                                      class="slds-input"
                                      labelClass="slds-form-element__label"
                                      value="{!v.at.Adhar_Card_Number__c}"/>
                    </div>
                    
                    <div class="slds-form-element__control">
                        <ui:inputText aura:id="leadpan" label="PAN Card Number "
                                      class="slds-input"
                                      labelClass="slds-form-element__label"
                                      value="{!v.at.PAN_Card_Number__c}"/>
                    </div>
                    
                    
                    
                </div>
                
            </lightning:tab>
            
            <lightning:tab label="Documents">
                
    <div>
        <lightning:input aura:id="file" onchange="{!c.handleFilesChange}" type="file" name="file" label="Upload Attachment" multiple="True"/>
        <div class="slds-text-body_small slds-text-color_error">
            {!v.fileName}
        </div>
        <button class="slds-button slds-button_brand" onclick="{!c.MultipleFiles}">Submit</button>
    </div>
            </lightning:tab>
        </lightning:tabset>
    </div>
    <aura:if isTrue="{!v.isOpen}">
        
        <!--###### MODAL BOX Start From Here ######--> 
        <div role="dialog" tabindex="-1" aria-labelledby="header99" class="slds-modal slds-fade-in-open ">
            <div class="slds-modal__container">
                <!-- ###### MODAL BOX HEADER Part Start From Here ######-->
                <div class="slds-modal__header">
                    <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="{!c.closeModel}">
                        X
                        <span class="slds-assistive-text">Close</span>
                    </button>
                    <h2 id="header99" class="slds-text-heading--medium">Confirmation</h2>
                </div>
                <!--###### MODAL BOX BODY Part Start From Here ######-->
                <div class="slds-modal__content slds-p-around--medium">
                    <p><b>
                        Details and Attachments are Submitted Successfully.
                        </b>
                    </p>
                </div>
                <!--###### MODAL BOX FOOTER Part Start From Here ######-->
                <div class="slds-modal__footer">
                    <button class="slds-button slds-button--neutral" onclick="{!c.closeModel}" >Okay</button>
                </div>
            </div>
        </div>
        <div class="slds-backdrop slds-backdrop--open"></div>
        <!--###### MODAL BOX Part END Here ######-->
        
    </aura:if>
</aura:component>
=============================================================

As you can see there are three slds tabs like basic details ,company details and documents
i want a next button at the end of each tab and that next button should take me to the second  tab,same for second tab also.
Pruthvi Raj 21Pruthvi Raj 21
Hi Piyush,did you get chance to check my requirement?
piyush_sonipiyush_soni
hi Pruthvi Raj ,
sorry for delay, i have create a post on it, plese refer below link for your solution :
http://www.sfdcmonkey.com/2017/11/08/lightning-tabs-next-back-button/ 

Please let me know if it helps you 
thanks 
Pruthvi Raj 21Pruthvi Raj 21
Yes Piyush,it is working fine
Thanks a lot for your response.
piyush_sonipiyush_soni
Hi Pruthvi, please close this query by choosing best answer so it make proper solution for others in future
Thanks