0

I have a combobox where user selects LWC or Aura as component type and a boolean variable islwc which I am setting when user clicks submit button

In cmp,
   <aura:attribute name="islwc" type="Boolean"/>
   <lightning:combobox name="componentnames" label="Components" placeholder="Select component type 
   to view.." options="{!v.components}" onchange="{!c.handleComponentChange}" />
   <lightning:button variant="brand" label="Submit" title="Submit" onclick="{!c.handleSubmit}" />
In JScontroller, 
           handleSubmit : function (component, event, helper) {

                var comp= component.get("v.selectedComponent");
                if(comp=='Lwc'){
                    component.set("v.islwc", true);
    
                }
                else if (comp=='Aura'){
                    component.set("v.islwc", false);
                }

            }

If it is LWC i want to call LWC child component else Aura child component for which I am using aura:if

    <aura:if isTrue="{! or (v.islwc)}">

        <c:displayRecordDetailsLWC recordIdDetail="{!v.recordidinput}" objectName="{!v.objectname}">
        </c:displayRecordDetailsLWC>

        <aura:set attribute="else">

        <c:displayRecordDetailsChild recordIdDetail="{!v.recordidinput}" objectName="   {!v.objectname}">
            </c:displayRecordDetailsChild>

        </aura:set>
    </aura:if>

Everytime the page is opened, by default the Aura component(False condition) is loaded. enter image description here

I want to totally hide all child components and display them only when the data is submitted.

EDIT: On trying Caspar's code by adding a boolean attribute and setting an or condition, I still get the above Aura component. And when I set the component to LWC, both are displayed like below enter image description here

1 Answer 1

1

First, you can set defaults to your attributes.

<aura:attribute name="islwc" type="Boolean" default="false"/>

If you want to hide BOTH components, you'll need another attribute - loaded for example.

<aura:attribute name="isloaded" type="Boolean" default="false"/>

Then use that in your condition:

    <aura:if isTrue="{! or(v.islwc,v.isloaded)}">
        <c:displayRecordDetailsLWC recordIdDetail="{!v.recordidinput}" objectName="{!v.objectname}">
        </c:displayRecordDetailsLWC>
    </aura:if>
    
    <aura:if isTrue="{! or(not(v.islwc),v.isloaded)}">
       <c:displayRecordDetailsChild recordIdDetail="{!v.recordidinput}" objectName="   {!v.objectname}">
        </c:displayRecordDetailsChild>
    </aura:if>

I skipped the else condition, because I think it messes up the markup too much btw - and 2 if conditions work fine.

In your handleSubmit condition, set isloaded to true.

handleSubmit : function (component, event, helper) {
  component.set("v.isloaded", true);
  ...etc
7
  • I added this and by changing the isfTrue to <aura:if isTrue="{v.islwc,v.isloaded}"> & <aura:if isTrue="{not(v.islwc),v.isloaded}"> the components do not show. However, they don't show on clicking the submit button (even though I added a console.log statement and both the attributes return correct values) Jun 28, 2021 at 2:02
  • 1
    What about the or() statement that I have in my example? Jun 28, 2021 at 3:35
  • On including or it was showing again for the false condition. I think ! stands for default or something. Not sure Jun 28, 2021 at 3:59
  • 1
    The ! tells the parser that there is an expression to evaluate. You need it. Put this exact code in the isTrue expression: {! or(v.islwc,v.isloaded)}. Then make sure that your capitalization is correct and that both attributes exist, are of type Boolean and have defaults set correctly. Jun 28, 2021 at 4:05
  • 1
    actually, try and ie {! and(v.islwc,v.isloaded)} Jun 28, 2021 at 4:29

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .