function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Abhishek Pande 47Abhishek Pande 47 

Switching of tabs in Salesforce Lightning

Hi ,
Based on my requiremnets i have created a single compenent in which i am showing the details.On page launch it will show a particular tab for instance the Channel tab  in this case but on click of other tabs like Overview or Team Members ,it is suppose to show the tab specific detail on the same page but it is not working as intended .I have placed the tab specific details in <div> tag but still on click of a tab its not showing the details.I also want the selected tab to be highlighted with the same background.I would like to have a  solution on this issue.Please help on this.I have attached the screenshot .Please refer it .Thanks in advance.
Feel free to ask any qusetion sif you have any doubt.Salesforce Lightning
Balasubramaniam 07Balasubramaniam 07
Hi Abhishek 
Are yu using the sample code available in getslds.com?? 
JaiChaturvediJaiChaturvedi
Hi,

Basically in SLDS by deafult Tabs are not in working condition because they dont have any scripting done, it is just UI framework.
You have to utilize nested component architect and component level event framework to make Tabs working.

1. Create component TabComponent 
<aura:component >
<aura:attribute name="index" default="" required="true" type="Integer" description="the tabIndex for Tabs created" />
<aura:attribute name="stateClass" type="String" default="" description="class derived from the state for the tab" />
<aura:attribute name="active" default="false" required="true" type="Boolean" description="one of active, blank(in active)" />
<aura:attribute name="label" default="" required="true" type="String" description="what the user sees as Tab name" />

<aura:handler name="change" value="{!v.active}" action="{!c.doUpdate}"/>
<aura:registerEvent name="settingSelectedTab" type="c:SettingSelectedTab"/>

<li class="{!v.stateClass}" role="presentation" id="{!'innertab' + v.index}">
        <a class="slds-tabs--default__link" onclick="{!c.fireEvent}" href" role="tab"
           tabindex="{!v.tabindex}" aria-selected="{!v.ariaselected}" >{!v.label}</a>
    </li>

</aura:component>
TabComponentController.js
  
({
    doInit : function(cmp, event, helper) {
        var current = cmp.get("v.active");
        //setting the default tab as ACTIVe tab.
        cmp.set("v.link", currentlink);
        if(current){
            cmp.set("v.stateClass", "slds-tabs--default__item  slds-text-heading--label slds-active"); 
        }else{
            cmp.set("v.stateClass", "slds-tabs--default__item slds-text-heading--label");
        }    
    },
    //Function used on onClick of tab links.
    fireEvent : function(cmp, event, helper) {
        helper.fireEventHelper(cmp,  cmp.get("v.index"));
    },
    
    //Function used for updating the style of selected tab as ACTIVE.
    doUpdate : function(cmp, event, helper) {
        helper.calcStyle(cmp);
    }
})
TabComponentHelper
  
({
    //Calculates the style of Tabs and sets the ACTIVE tab as highlighted in red color.
    calcStyle : function(cmp) {
        var active = cmp.get("v.active");
        var styles = "slds-tabs--default__item slds-text-heading--label";
        if (active) {
            styles += " slds-active";
        }
        cmp.set("v.stateClass", styles);
    },
    
    //Fires the Component level event to set the Tab as Active.
    fireEventHelper : function(cmp, indexNum){
        var cmpEvent = cmp.getEvent("SettingSelectedTab");
        cmpEvent.setParams({
            "activeTab": indexNum
        });
        cmpEvent.fire();
    }
})


2. Component level event - SettingSelectedTab: 
<aura:event type="COMPONENT">
	<aura:attribute name="activeTab" type="Integer"/>
</aura:event>

3. Finally create component which contains the Tabs: TabContainer.cmp 
<aura:component>
    <aura:handler name="tabevent" event="c:SettingSelectedTab" action="{!c.handleSettingSelectedTab}" />

    <div class="slds-grid slds-wrap slds-grid--pull-padded">
        <div class="slds-col--padded slds-size--1-of-1 slds-m-bottom--large">
            <div class="slds-tabs--default">
                <ul class="slds-tabs--default__nav" role="tablist" aura:id="list">
                    <aura:iteration items="{!v.accList}" var="acc" indexVar="index">
                        <c:TabComponent label="{!acc.name}" active="false" index='{!index}' />
                    </aura:iteration>
                </ul>
            </div>
        </div>
    </div>
                       
</aura:component>
  
handleSettingSelectedTab: function(component, event, helper) {
        var cmpnentChildList = component.find("list").find({
                instancesOf: "c:TabComponent"
            })
            //finding the child components and setting the active status
        for (var i = 0; i < cmpnentChildList.length; i++) {
            var outputCmpArr = cmpnentChildList[i];
            outputCmpArr.set("v.active", outputCmpArr.get("v.index") == event.getParam("activeTab"));
        }
}

Let me know if any issues.