function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Madhu DkMadhu Dk 

I wan create a custom lightning template with Tabs

Hi All,
Need to give tabs in template.
I tried, but not able to select the other tab to drag drop the components.
Here is my code
 
<aura:component implements="lightning:recordHomeTemplate" description="Two tabs one for Tab1 and Tab2, Tab1  two section, left and righr. Tab 2 has one section">

    <aura:attribute name="header" type="Aura.Component[]" />
    <aura:attribute name="column1" type="Aura.Component[]" />
    <aura:attribute name="column2" type="Aura.Component[]" />
    <aura:attribute name="column3" type="Aura.Component[]" />
    
    <div>
        <div>{!v.header}</div><br></br>
        <lightning:layout horizontalAlign="spread" pullToBoundary="small">
                        <lightning:layoutItem  flexibility="grow"
                                              padding="around-small">
            <lightning:tabset variant="scoped">
                <lightning:tab label="Tab1" id="Tab1">
                    <lightning:layout horizontalAlign="spread" pullToBoundary="small">
                        <lightning:layoutItem size="8" flexibility="grow"
                                              padding="around-small">
                            {!v.column1}
                        </lightning:layoutItem>
                        <lightning:layoutItem size="4" flexibility="grow"
                                              padding="around-small">        
                            {!v.column2}
                        </lightning:layoutItem>
                    </lightning:layout>
                </lightning:tab>
                <lightning:tab onactive="{! c.handleActive }" label="Tab2" id="Tab2">
                    <lightning:layout horizontalAlign="spread" pullToBoundary="small">
                       
                        <lightning:layoutItem flexibility="grow"
                                              padding="around-small">        
                            {!v.column3}
                        </lightning:layoutItem>
                    </lightning:layout>
                </lightning:tab>
                
            </lightning:tabset>
                            </lightning:layoutItem>
                    </lightning:layout>
        
    </div>
</aura:component>
Kindly help me out.
Thanks
 
Fernando Sánchez JiménezFernando Sánchez Jiménez

Hello, I don't know how to select the second tab, but I used a workarround. I set the components for the first tab, save and changed the default tab to the second:

<lightning:tabset variant="Default" selectedTabId="Tab2">

Them you can select th components for de second tab. It's not the best, but is a workaround... maybe too late.

Xiang Li 46Xiang Li 46
Disappointed to see Salesforce still doesn't support tabs very well when it comes to Custom Lightning Page Template. Encountered the same issue and I think the regions are configured in the template component, it's actually lightning app builder doesn't support tab switching, thus we have this issue.

After seeing Fernando's answer, I tried something similar using metadata api. I created a flexipage with my custom template, then put all components into tab 1 since I can't switch tabs in UI. Then I retrieved my flexipage, open it with text editor, and carefully cut and paste the componentInstance into desired tabs. Lastly, deployed the same flexipage back to my sandbox. And it worked.

Now another issue is about the tab names - I don't think you have a way to configure that. I tried to give aura attributes in template's design but it's not allowed.