1

I have a lightning:select picklist on a Lightning component called "Best Method of Contact" which is a required picklist, but the required picklist defaults to a blank 'placeholder' value that the user must change. The values are as follows:

  • -SELECT ONE- (Default/Undefined)
  • Phone
  • Email

Issue: I also want to present the user with a lightning:input to enter either a Phone Number, or an Email, and I want this rendered dynamically onChange of the picklist so that if the user chooses "Email" they get the Email input, and the Phone input for Phone.

However, when the user hasn't selected either option yet, and is still set to the default -SELECT ONE- option, I don't want to render EITHER of the lightning:input fields on the page.

I know aura:if is the lightning equivalent of If X, Do Y, ELSE do Z but it doesn't appear to have an ELSE IF condition in the documentation, so it really is only a boolean as far as I can tell. If the condition is met, render A, otherwise render B.

This doesn't work in my case because I have 3 conditions not 2, A (Phone), B (Email), and C (None).

Question: I imagine I can wrap an aura:if around another aura:if to use it very similarly to an IF statement in a Formula field, but before I went down that route I wanted to make sure I wasn't missing any other (better or more reliable) option that I might be able to use for this. Lightning:input doesn't have a rendered variable like the apex:outputPanel component does, so I can't set it there, and I can't find an equivalent to the rendered variable on the lightning: components

Is there a more correct way to do this?

  • Why not just use 3 different aura:if blocks with different conditions? At any given point of time, you will only have one of those values. – Jayant Das Oct 22 '18 at 21:31
  • because sometimes it takes someone elses brain to adapt for when yours stops working anymore ;) (I hadn't thought of that to be honest), a valid point. I guess I was too focused on using the aura:if along with its ELSE condition that I didn't consider that I could use it without it. I guess aura:if is the go-to options then yeah? – Morgan Marchese Oct 22 '18 at 21:35
  • And sometimes you just have to live with what you get, and as you rightly figured out that there's no easy way for using an if, else, else-if here :) – Jayant Das Oct 22 '18 at 21:37
3

I would think the simplest way to achieve is to just write 3 different aura:if blocks. Something as below?

<aura:if isTrue="{!v.selectedVal == 'Phone'}">
    .. do something ..
</aura:if>
<aura:if isTrue="{!v.selectedVal == 'Email'}">
    .. do something ..
</aura:if>
<aura:if isTrue="{!v.selectedVal == 'None'}">
    .. do something ..
</aura:if>
  • 1
    +1 or, alternatively, nested aura:if. – sfdcfox Oct 22 '18 at 21:40
  • 1
    Thanks! Just wanted to make sure there wasn't a different way to approach rendering in Lightning than this. In the end I suppose I only need 2 Aura:ifs since the third condition is just to have a blank area, but the answer works just the same. – Morgan Marchese Oct 22 '18 at 21:42
  • @sfdcfox Just restricted myself to the most "simplest" approach :) – Jayant Das Oct 22 '18 at 21:42
  • Totally works here, but sometimes you really want/need nested elements, so it's good to know that there's more than one possible way to do things. :D – sfdcfox Oct 22 '18 at 21:44
1

You can use if, else-if, else with nested elements:

<aura:if isTrue="{!v.selected == 'None'}">
  <aura:set attribute="else">
    <aura:if isTrue="{!v.selected == 'Phone'}">
      <lightning:input label="Phone" ... />
      <aura:set attribute="else">
        <lightning:input label="Email" ... />
      </aura:set>
    </aura:if>
  </aura:set>
</aura:if>

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.