2

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

enter image description here

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 enter image description here

to : enter image description here

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 :

enter image description here

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 !

  • 1
    wouldnt this be easier to manage in a client side controller? – glls Apr 8 at 15:37
  • With an aura:id, and a class to hide or show ? ...Yes, maybe. It is TMA, so I'm discovering the code and I'm trying to respect the work that has already been done, but also I'm alone and junior =/ – Alexis MASSON Apr 8 at 15:39
  • 2
    I would strongly suggest you reconsider your approach =) and do your validations cleint side, mostly due to the amount of conditions you have. if there were 1 or 2, ok, no big deal and setting them as conditions in your markup is fine. No need to hide/show, just 'create the component' if the condition is met – glls Apr 8 at 15:42
  • From the beginning, I knew my solution was very poor... So I'm hearing your comment, obviously ! Thanks :) – Alexis MASSON Apr 9 at 7:56
3

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';
}
  • Wow, thanks for this so documented answer ; It seems logic to use the helper for conditions. But also, I understand aura:if is not a strong component, where logic could be stored, or a couple of conditions -as glls told me. Thanks !! – Alexis MASSON Apr 9 at 8:07
  • 1
    Rule of thumb is always try to keep markup code without any business logic. The responsibility of markup should be only rendering. In Lightning Web Components markup code you can't use any expression functions, try to apply that to Aura Components as well. The primary reason is performance, secondary the code readability. – Michal Vavra Apr 9 at 15: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.