Aura if and order of execution on conditions

Question

I'm working on showing a component if he is not admin, nor from France, Suisse or Canada :

v.userProfile --> true for admins, false otherwise.

Even for Swiss users, the component was displayed.

I worked hard on trying to understand why my condition wasn't working for them ;

Then I interverted my second condition from

to :

and then BINGO !

I knew programatics behaviors about evaluating (a && b) : if the first (here a) is false, the evaluation stops ;

But here how does it work ?? How can I do, then, with my multiple conditions ? (I think I should use the isVisible CreateCre's attribute, but I wasn't able to plainly understand how it works and I got deadlines ...)

I thought that in the first case, connected as a regular user (so v.userProfile evaluates to false and !v.userProfile to true), it would evaluates as it :

If I'm a french user, not admin, it evaluates to : or (false, or (true and false)) --> so false ; If I'm a Suiss user, not admin, it evaluates to : or (false, or(true and [true and true and false])) --> so false ...

I'm unable to understand how this work, any help would be appreciate, I couldn't find a lot of documentation !

Answer 1

You have 3 options how to fix your code. They are sorted by the most preferred solutions.

1. Refactor the component and move the logic into the helper and check only one boolean aura:attribute
2. Use nasted expression functions
   • and(and(v.userCountry != 'France', v.userCountry != 'Canada'), v.userCountry != 'Suisse'))
3. Use corresponding logical operators
   • v.userCountry != 'France' && v.userCountry != 'Canada' && v.userCountry != 'Suisse'
   • Please note escaped && instead of && becuase Aura component bundle is based on XML
   • For multiple or() you can use not escaped ||

---

Here is an example of what you can do, to make your code more readable, easier to debug and maintain.

Aura Component Markup

<aura:attribute name="canSeeComponent" type="Boolean" />
<aura:handler name="init" action="{!c.onInit}" value="{!this}" />

<aura:if isTrue="{!v.canSeeComponent}">
    <!-- Some component or another markup not visible to some users -->
</aura:if>

Aura Controller

onInit: function(component, event, helper) {
    component.set('v.canSeeComponent', helper.canUserSeeComponent(component, event, helper));
}

Aura Helper

canUserSeeComponent: function(component, event, helper) {
    var isAdmin = component.get('v.userProfile');
    var isFrancophonic = helper.isUserFromFrancophonicCountry(component, event, helper);

    console.log('User isAdmin', isAdmin);
    console.log('User isFrancophonic', isFrancophonic);

    // For admin, France, Suisse or Canada users return false
    return !(isAdmin || isFrancophonic);
},

isUserFromFrancophonicCountry: function(component, event, helper) {
    var country = component.get('v.userCountry');
    return country === 'France' || 
           country === 'Canada' ||
           country === 'Suisse';
}