Control Salesforce Lightning Tabs With Next & Back Buttons

Control Salesforce Lightning Tabs With Next & Back Buttons

Hello, In this post, we are going to create a sample lightning component to control <lightning:tab> with Next and Back buttons.

In this code we are using the lightning:tab and lightning:tabset standard component for creating tabs in a Salesforce Lightning Component.

Lightning Component : LightningTabs.cmp



Apple

Banana

Mango

Potato

Tomato

Carrots

Red

Green

Blue

BMW

Maserati

Audi


JavaScript Controller : LightningTabsController.js

({
next : function(component, event, helper) {
// get the current selected tab value
var currentTab = component.get("v.selTabId");

if(currentTab == '1'){
component.set("v.selTabId" , '2');
}else if(currentTab == '2'){
component.set("v.selTabId" , '3');
}else if(currentTab == '3'){
component.set("v.selTabId" , '4');
}else if(currentTab == '4'){
alert('Complete !');
}
},

back : function(component, event, helper) {
// get the current selected tab value
var currentTab = component.get("v.selTabId");

if(currentTab == '2'){
component.set("v.selTabId" , '1');
} else if(currentTab == '3'){
component.set("v.selTabId" , '2');
}else if(currentTab == '4'){
component.set("v.selTabId" , '3');
}
}
})

demo.app [Lightning Application]






 

Responses

Popular Salesforce Blogs