2

I am writing a new Lightning Component to conditionally render a message based on a few field values. I am close to having the conditions render like I want, but I can't figure out how to write in a not(field_name) type of condition into the aura:if statement.

Since aura:if require isTrue, I need to reverse engineer the condition so that the message displays when isTrue="not(Boolean_Field)

Here's my code. Any suggestions?

<aura:if isTrue="{!v.eventsSimple.Event_Closed__c}">
            <div style="background-color: red; font-weight: bold; color: white;">
                This event is closed.
            </div>
        </aura:if>
        <aura:if isTrue="{!and(not(v.eventsSimple.Event_Closed__c),lessthan(v.eventsSimple.Spots_Remaining__c,1))}">
            <div style="background-color: orange; font-weight: bold; color: black;">
                This event is full but accepting a waitlist. Nominees in queue: <ui:outputText value="{!abs(v.eventsSimple.Spots_Remaining__c)}"/>
            </div>
        <aura:set attribute="else">
                <div style="background-color:green; color: white; font-weight:bold;">
                    This event is available for nomination. Please make sure to review the description and eligibility rules.
                    <br/>
                    Remaining slots: &nbsp; <ui:outputText value="{!v.eventsSimple.Spots_Remaining__c}"/>
                </div>  
            </aura:set>
        </aura:if>

The 2nd aura:if statement is the one in question.

  • If v.eventsSimple.Event_Closed__c return boolean, have you tried: <aura:if isTrue="{!and(!v.eventsSimple.Event_Closed__c,lessthan(v.eventsSimple.Spots_Remaining__c,1))}"> – Lightning Evangelist Oct 8 '18 at 14:25
2

Why not completely remove the and condition in your second aura:if and do something like so:

<aura:if isTrue="{!v.eventsSimple.Event_Closed__c}">
        <div style="background-color: red; font-weight: bold; color: white;">
            This event is closed.
        </div>
        <aura:set attribute="else">
            <aura:if isTrue="{!lessthan(v.eventsSimple.Spots_Remaining__c,1)}">
                <div style="background-color: orange; font-weight: bold; color: black;">
                    This event is full but accepting a waitlist. Nominees in queue: <ui:outputText value="{!abs(v.eventsSimple.Spots_Remaining__c)}"/>
                </div>
                <aura:set attribute="else">
                    <div style="background-color:green; color: white; font-weight:bold;">
                        This event is available for nomination. Please make sure to review the description and eligibility rules.
                        <br/>
                        Remaining slots: &nbsp; <ui:outputText value="{!v.eventsSimple.Spots_Remaining__c}"/>
                    </div>  
                </aura:set>
            </aura:if>
        </aura:set>
    </aura:if>

I am glad that you got it to work based on @glls lead, but I don't see how your original condition:

<aura:if isTrue="{!and(not(v.eventsSimple.Event_Closed__c),lessthan(v.eventsSimple.Spots_Remaining__c,1))}">

would fail. It should have worked assuming v.eventsSimple.Event_Closed__c returns a Boolean value. If that is the case, FYI, this is also a valid syntax:

<aura:if isTrue="{!and(!v.eventsSimple.Event_Closed__c,lessthan(v.eventsSimple.Spots_Remaining__c,1))}">
  • Thanks, Kal. You're right. This actually solves both my issues. thank you! I was figuring how how to nest the if conditions based on criteria, but this is much simpler. Thanks!! – Erik Eitel Oct 8 '18 at 14:35
  • @Kal, nice catch and +1 for further expanding – glls Oct 8 '18 at 14:36
4

you could use a notequals operator, a quick look at the Expression Functions Reference might shed some light on the approach, but a quick example:

isTrue="{!and(notequals(v.theField, 'some value')...

or equals, if you reverse the logic.

  • You're totally right. I was over engineering... Thanks! – Erik Eitel Oct 8 '18 at 14:27

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.