+ Start a Discussion
Michael PlunkettMichael Plunkett 

Conditionally Displaying Lightning Tab

I am implementing lightning:tabset and lightning:tab to display tabs in a lightning component -- I am trying to conditionally display one particular tab based on a value returned by the controller -- but it is not rendering the tab. Does anyone have any insight into how to achieve this functionality? Also, when I try to set the selectedTabId in the init function, I get an error saying the tab does not exist.

	doInit : function(component, event, helper) {
        var action = component.get("c.getSearchFromId");
            "recordId": component.get("v.recordId")
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(state === "SUCCESS"){
                if(response.getReturnValue().Candidates_Visible__c == true){
                } else {
<aura:component controller="SecureSiteController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global" >

    <ltng:require styles="/resource/slds_2_1_3/assets/styles/salesforce-lightning-design-system-vf.css" />
    <aura:attribute name="recordId" type="String" access="global" />
    <aura:attribute name="search" type="Search__c" access="global" />
    <aura:attribute name="displayCandidates" type="Boolean" default="false" />

    <aura:handler name="init" value="{!this}" action="{!c.doInit}" access="global" />
    <!-- Display secure site tabs -->
    <lightning:tabset variant="default" selectedTabId="{!v.selTabId}">
		<aura:if isTrue="{!v.displayCandidates == true}">
            <lightning:tab aura:id="candidates" tabindex="1" id="candidates" title="Candidates" label="Candidates">
                <c:CandidateViewer recordId="{!v.recordId}" />
        <lightning:tab aura:id="searchmaterials" tabindex="2" id="searchmaterials" title="Search Materials" label="Search Materials">
            <c:SearchMaterials recordId="{!v.recordId}" />
        <lightning:tab aura:id="keydates" tabindex="3" id="keydates" title="Key Dates" label="Key Dates">
            <c:SearchKeyDates recordId="{!v.recordId}" />
        <lightning:tab aura:id="consultants" tabindex="4" id="consultants" title="Consultants" label="Consultants">
            <c:SearchConsultants recordId="{!v.recordId}" />
        <lightning:tab aura:id="securemessage" tabindex="5" id="securemessage" title="Send a Message" label="Send a Message">
            <c:SecureSiteMessage recordId="{!v.recordId}" />

Abhishek Sagar 1Abhishek Sagar 1
Did you try?

<aura:if isTrue="{!v.displayCandidates}">
Michael PlunkettMichael Plunkett
Are those not equivalent statements? Yes, I did try that -- when displayCandidates is false, the tab is not displayed. However, when displayCandidates is true, the tab is still not rendered.
Abhishek Sagar 1Abhishek Sagar 1
They are equivalent statements. Was just giving it a try as everthing else seems good.
can you try changing your if condition to following?
if(response.getReturnValue()[0].Candidates_Visible__c == true)
Michael PlunkettMichael Plunkett
The condition is working correctly as coded -- I think the issue is around timing when the tabs are rendered. If I place different content inside the <aura:if> statement, it gets rendered, for example:
<aura:if isTrue="{!v.displayCandidates}">
    Candidates are displayed.

Gets rendered just fine toggling displayCandidates on and off.
Abhishek Sagar 1Abhishek Sagar 1
Mike it would be great If I can see full code(apex controller as well). I am ready to debug this for you. Please send me an email @ sagar.abhishek1@gmail.com 
Deja BondDeja Bond
Was this able to be solved ?
@Abhishek Sagar 1