Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ 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.

Controller: 
({
	doInit : function(component, event, helper) {
        var action = component.get("c.getSearchFromId");
        action.setParams({
            "recordId": component.get("v.recordId")
        });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(state === "SUCCESS"){
                if(response.getReturnValue().Candidates_Visible__c == true){
                    component.set('v.displayCandidates',true);
                } else {
                    component.set('v.displayCandidates',false);
                }
                component.set('v.search',response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
	}
})
Component:
  
<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:if>
        <lightning:tab aura:id="searchmaterials" tabindex="2" id="searchmaterials" title="Search Materials" label="Search Materials">
            <c:SearchMaterials recordId="{!v.recordId}" />
        </lightning:tab>
        <lightning:tab aura:id="keydates" tabindex="3" id="keydates" title="Key Dates" label="Key Dates">
            <c:SearchKeyDates recordId="{!v.recordId}" />
        </lightning:tab>
        <lightning:tab aura:id="consultants" tabindex="4" id="consultants" title="Consultants" label="Consultants">
            <c:SearchConsultants recordId="{!v.recordId}" />
        </lightning:tab>
        <lightning:tab aura:id="securemessage" tabindex="5" id="securemessage" title="Send a Message" label="Send a Message">
            <c:SecureSiteMessage recordId="{!v.recordId}" />
        </lightning:tab>
    </lightning:tabset>
    
</aura:component>


 
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.
</aura:if>

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