I have a Lightning page in which the default tab has been set to "Product Selector". Is there a way by which I can manually switch the default tab to the 'Detail' tab via a lightning event? Alternatively, instead of re-setting the default tab, is there a way to just force the 'Detail' tab to open following a Lightning event, e.g an onclick action?

App example

  • Why would you need a lightning event? You can just edit the record page and change the default tab selected. – Martin Lezer Jul 5 '18 at 14:37
  • Suggest you update the title to 'programmatically' or 'dynamically' instead of 'manually'. – Lightning Evangelist Jul 6 '18 at 11:00

At the moment it would appear we don't have programmatic control over App Builder tab state. Somewhere on the Lightning roadmap - SAFE HARBOUR - is the ability to deep-link on a record page.


You can change default subtab using the lightning App Builder.

  1. Go to object manager, select Object and choose Lightning Record Page.

  2. If you already have a lightning record page, edit it you click on the component containing subtab and click on + symbol. On the right side a component popup with a default tab setting Change it to detail tab. With this component you can add and remove tabs also.

  3. If you do not have an existing Lightning record page, create a new choose type as Record Page. Click Next enters label and select Object click next, choose page template and click finish.

  4. Perform Step 2 to choose default tab.

Note: - Programmatically, we cannot have control over AppBuilder components.


You are out of luck here (at least at the time of writing this answer). All the standard lightning components (unless documented otherwise) do not contain events/attributes you can interact with publicly, they are kind of little black boxes. So you must resort to creating a custom component to accomplish your objective this time.

Something in lines of:


<aura:attribute name="tabId" type="String" default="1"/>

<aura:handler name="init" value="{!this}" action="{!c.setTabId}"/>

<lightning:tabset aura:id="tabs" selectedTabId="{!v.tabId}">
    <lightning:tab label="Tab 1" id="1">
        <!-- Tab 1 content here -->
    <lightning:tab label="Tab 2" id="2">
        <!-- Tab 2 content here -->


setTabId: function(component, event, helper){
            var tabIdAttribute = component.get("v.tabId");
                component.set("v.tabId", helper.fetchTabId(component, event, helper));
        } catch(err){
            console.log('-------> setTabId ERROR: ' + err + ' ** MESSAGE: ' + err.message + ' ** STACK: ' + err.stack);


fetchTabId: function(component, event, helper) {
    var tabId = 2; //customize here. This value could come from URL or hardcoded or determined based on which button was pressed or ...
    if(tabId && !isNaN(tabId) && parseInt(tabId) > 0)
        return tabId; 

    return 1;

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.