Mixing
Conditional Rendering in Lightning Component with more than Aura:If(True, ELSE)
Clash Royale CLAN TAG#URR8PPP
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;
up vote
1
down vote
favorite
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
Issue: I also want to present the user with a
lightning:inputto 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 thelightning:inputfields 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:ifaround anotheraura:ifto 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:inputdoesn't have arenderedvariable like the
apex:outputPanelcomponent does, so I can't set it there, and I
can't find an equivalent to the rendered variable on thelightning:
components
Is there a more correct way to do this?
rendered conditional lightning-inputfield aura-if
asked 44 mins ago
Morgan Marchese
1,369426
add a comment |Â
up vote
1
down vote
favorite
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
Issue: I also want to present the user with a
lightning:inputto 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 thelightning:inputfields 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:ifaround anotheraura:ifto 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:inputdoesn't have arenderedvariable like the
apex:outputPanelcomponent does, so I can't set it there, and I
can't find an equivalent to the rendered variable on thelightning:
components
Is there a more correct way to do this?
rendered conditional lightning-inputfield aura-if
asked 44 mins ago
Morgan Marchese
1,369426
Why not just use 3 differentaura:ifblocks with different conditions? At any given point of time, you will only have one of those values.
– Jayant Das
37 mins ago
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
33 mins ago
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
31 mins ago
add a comment |Â
up vote
1
down vote
favorite
up vote
1
down vote
favorite
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
Issue: I also want to present the user with a
lightning:inputto 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 thelightning:inputfields 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:ifaround anotheraura:ifto 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:inputdoesn't have arenderedvariable like the
apex:outputPanelcomponent does, so I can't set it there, and I
can't find an equivalent to the rendered variable on thelightning:
components
Is there a more correct way to do this?
rendered conditional lightning-inputfield aura-if
asked 44 mins ago
Morgan Marchese
1,369426
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
Issue: I also want to present the user with a
lightning:inputto 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 thelightning:inputfields 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:ifaround anotheraura:ifto 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:inputdoesn't have arenderedvariable like the
apex:outputPanelcomponent does, so I can't set it there, and I
can't find an equivalent to the rendered variable on thelightning:
components
Is there a more correct way to do this?
rendered conditional lightning-inputfield aura-if
rendered conditional lightning-inputfield aura-if
asked 44 mins ago
Morgan Marchese
1,369426
asked 44 mins ago
Morgan Marchese
1,369426
asked 44 mins ago
Morgan Marchese
1,369426
asked 44 mins ago
Morgan Marchese
1,369426
asked 44 mins ago
Morgan Marchese
1,369426
1,369426
Why not just use 3 differentaura:ifblocks with different conditions? At any given point of time, you will only have one of those values.
– Jayant Das
37 mins ago
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
33 mins ago
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
31 mins ago
add a comment |Â
Why not just use 3 differentaura:ifblocks with different conditions? At any given point of time, you will only have one of those values.
– Jayant Das
37 mins ago
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
33 mins ago
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
31 mins ago
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
37 mins ago
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
37 mins ago
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
33 mins ago
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
33 mins ago
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
31 mins ago
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
31 mins ago
add a comment |Â
2 Answers
2
active
oldest
votes
up vote
2
down vote
accepted
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>
answered 33 mins ago
Jayant Das
8,1352320
1
+1 or, alternatively, nested aura:if.
– sfdcfox
28 mins ago
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
27 mins ago
@sfdcfox Just restricted myself to the most "simplest" approach :)
– Jayant Das
26 mins ago
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
24 mins ago
add a comment |Â
up vote
1
down vote
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>
answered 25 mins ago
sfdcfox
234k10180396
add a comment |Â
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
accepted
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>
answered 33 mins ago
Jayant Das
8,1352320
1
+1 or, alternatively, nested aura:if.
– sfdcfox
28 mins ago
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
27 mins ago
@sfdcfox Just restricted myself to the most "simplest" approach :)
– Jayant Das
26 mins ago
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
24 mins ago
add a comment |Â
up vote
2
down vote
accepted
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>
answered 33 mins ago
Jayant Das
8,1352320
1
+1 or, alternatively, nested aura:if.
– sfdcfox
28 mins ago
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
27 mins ago
@sfdcfox Just restricted myself to the most "simplest" approach :)
– Jayant Das
26 mins ago
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
24 mins ago
add a comment |Â
up vote
2
down vote
accepted
up vote
2
down vote
accepted
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>
answered 33 mins ago
Jayant Das
8,1352320
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>
answered 33 mins ago
Jayant Das
8,1352320
answered 33 mins ago
Jayant Das
8,1352320
answered 33 mins ago
Jayant Das
8,1352320
answered 33 mins ago
Jayant Das
8,1352320
8,1352320
1
+1 or, alternatively, nested aura:if.
– sfdcfox
28 mins ago
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
27 mins ago
@sfdcfox Just restricted myself to the most "simplest" approach :)
– Jayant Das
26 mins ago
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
24 mins ago
add a comment |Â
1
+1 or, alternatively, nested aura:if.
– sfdcfox
28 mins ago
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
27 mins ago
@sfdcfox Just restricted myself to the most "simplest" approach :)
– Jayant Das
26 mins ago
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
24 mins ago
1
1
+1 or, alternatively, nested aura:if.
– sfdcfox
28 mins ago
+1 or, alternatively, nested aura:if.
– sfdcfox
28 mins ago
1
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
27 mins ago
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
27 mins ago
@sfdcfox Just restricted myself to the most "simplest" approach :)
– Jayant Das
26 mins ago
@sfdcfox Just restricted myself to the most "simplest" approach :)
– Jayant Das
26 mins ago
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
24 mins ago
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
24 mins ago
add a comment |Â
up vote
1
down vote
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>
answered 25 mins ago
sfdcfox
234k10180396
add a comment |Â
up vote
1
down vote
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>
answered 25 mins ago
sfdcfox
234k10180396
add a comment |Â
up vote
1
down vote
up vote
1
down vote
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>
answered 25 mins ago
sfdcfox
234k10180396
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>
answered 25 mins ago
sfdcfox
234k10180396
answered 25 mins ago
sfdcfox
234k10180396
answered 25 mins ago
sfdcfox
234k10180396
answered 25 mins ago
sfdcfox
234k10180396
234k10180396
add a comment |Â
add a comment |Â
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f236917%2fconditional-rendering-in-lightning-component-with-more-than-auraiftrue-else%23new-answer', 'question_page');
);
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Why not just use 3 different
aura:ifblocks with different conditions? At any given point of time, you will only have one of those values.– Jayant Das
37 mins ago
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
33 mins ago
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
31 mins ago