check multiple conditions in aura:if lightning component -- w3web.net

How to evaluate multiple conditions in aura:if else condition on Lightning Component Salesforce | How to check multiple conditions using conditional AND/OR Operators in aura:if attribute in Salesforce Lightning Component

by
5,233 views

Hey guys, today in this post we are going to learn about How to check multiple conditions using conditional AND/OR Operators in aura:if attribute in Salesforce Lightning Component Salesforce.

aura:if evaluates the isTrue expression on the server and instantiates components in either its body or else attribute. Only one branch is created and rendered.

This component allows you to conditionally render its contents. It renders its body only if isTrue evaluates to true. The else attribute allows you to render an alternative when isTrue evaluates to false.

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

 

The expression in isTrue is re-evaluated every time any value used in the expression changes. When the results of the expression change, it triggers a re-rendering of the component. Use aura:renderIf if you expect to show the components for both the true and false states, and it would require a server round trip to instantiate the components that aren’t initially rendered. To know more details about aura:if attribute, Click Here..

Files we used to check multiple conditions in Lightning Component →

AuraIfMultipleConditionCmp.cmp Lightning Component It is used to check multiple conditions AND/OR Operators in aura:if attribute in lightning component
AuraIfMultipleConditionCmpApp.app Lightning Application It is used for call the component to preview on browser.

 

 

Final Output →

check multiple conditions in aura:if lightning component -- w3web.net
 

You can download file directly from github by Click Here.

 

Other related post that would you like to learn in Salesforce
  • Find the below steps ▾

 

Create Lightning Component

Step 1:- Create Lightning Component : AuraIfMultipleConditionCmp

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!
 
 

From Developer Console >> File >> New >> Lightning Component

AuraIfMultipleConditionCmp [Lightning Component File]

  1.    <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
  2.  
  3.     <aura:attribute name="trueVarFirst" type="boolean" default="true"/>
  4.     <aura:attribute name="falseVarSecond" type="boolean" default="false"/>
  5.     <aura:attribute name="trueVarThird" type="boolean" default="true"/>
  6.     <aura:attribute name="falseVarForth" type="boolean" default="false"/>
  7.  
  8.     <div class="slds slds-p-around_large slds-card" style="font-size:15px;"> 
  9.         <h2 style="font-size:18px; color:#0000ff;">How to uses <strong>aura:if</strong> multiple conditions in Lightnig Component Salesforce [<a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer">Know more..</a>]</h2><br/>
  10.       <!--aura:if example-->
  11.     <aura:if isTrue="{!v.trueVarFirst}">
  12.         <div style="border:1px #ddd solid; padding:15px;">
  13.             Here we using of <strong>aura:if</strong>. If 'aura:if' condition does satisfied then data will be display.
  14.         </div>
  15.     </aura:if>
  16.  
  17.     <!--aura:if with aura:set else attribute example-->
  18.     <aura:if isTrue="{!v.falseVarSecond}">
  19.         <div style="border:1px #ddd solid; padding:15px;">
  20.             Here we using of <strong>aura:if</strong> with <strong>aura:set else</strong> attribute. If 'aura:if' condition doesn't satisfied, then It will be execute else condition. 
  21.         </div>
  22.         <aura:set attribute="else">
  23.             <div style="border:1px #ddd solid; padding:15px;">
  24.                It will be displayed if <strong>condition</strong> does not satisfied.
  25.             </div>
  26.         </aura:set>
  27.     </aura:if>
  28.  
  29.     <!--Using AND condition with aura:if example-->
  30.     <aura:if isTrue="{!and(v.trueVarFirst, v.falseVarSecond)}" >
  31.         <div style="border:1px #ddd solid; padding:15px;">
  32.            Here we using <strong>AND </strong>condition with <strong>aura:if</strong>. If variable <strong>'trueVarFirst'</strong> is satisfied and variable <strong>'falseVarSecond'</strong> is not satisfied, then not anything will be displayed.
  33.         </div>
  34.     </aura:if>
  35.  
  36.     <aura:if isTrue="{!and(v.trueVarFirst, v.trueVarThird)}" >
  37.         <div style="border:1px #ddd solid; padding:15px;">
  38.             If <strong>trueVarFirst</strong> is satisfied and <strong>trueVarThird</strong> should be also satisfied, then it will be displayed.
  39.         </div>
  40.     </aura:if>
  41.  
  42.     <!--Using OR condition with aura:if example-->
  43.     <aura:if isTrue="{!or(v.trueVarFirst, v.falseVarSecond)}" >
  44.         <div style="border:1px #ddd solid; padding:15px;">
  45.             Here we using of <strong>OR </strong>condition with <strong>aura:if</strong>. If <strong>'trueVarFirst'</strong> is satisfied and <strong>'trueVarThird'</strong> is not satisfied, then data will be displayed.  
  46.         </div>
  47.     </aura:if>
  48.     <aura:if isTrue="{!or(v.falseVarSecond, v.falseVarForth)}" >
  49.         <div style="border:1px #ddd solid; padding:15px;">
  50.            Here we using of <strong>OR</strong> condition with <strong>aura:if </strong>
  51.         </div>
  52.     </aura:if>
  53.  
  54.     <!--Using aura:if with or, and condition example-->
  55.     <aura:if  isTrue="{!or(and(v.trueVarFirst, v.trueVarThird) , v.falseVarSecond ) }" >
  56.         <div style="border:1px #ddd solid; padding:15px;">
  57.            Here we using of  <strong>aura:if</strong> with <strong>or</strong>, <strong>and</strong> condition. The data will be display if <strong>'trueVarFirst'</strong> is satisfied, <strong>'trueVarThird'</strong> is also satisfied and <strong>'falseVarSecond'</strong> is not satisfied.
  58.         </div>
  59.     </aura:if>
  60.  
  61.         <br/><br/>
  62.         <!--Start RelatedTopics Section-->
  63. <div style="border:1px #ddd solid; padding:10px; background:#eee; margin:40px 0;">
  64.  
  65.     <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/><strong data-aura-rendered-by="437:0"><span style="font-size:16px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;" data-aura-rendered-by="440:0">An easy way to learn step-by-step online free Salesforce tutorial, To know more Click  <span style="color:#ff8000; font-size:18px;" data-aura-rendered-by="442:0">Here..</span></a></strong></p>
  66.  
  67.             <br/><br/>
  68.         <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/07/tickMarkIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/><strong data-aura-rendered-by="437:0"><span style="font-size:17px; font-style:italic; display:inline-block; margin-right:5px; color:rgb(255 128 0);">You May Also Like →</span> </strong></p>
  69.             <div style="display:block; overflow:hidden;"> 
  70.                 <div style="width: 50%; float:left; display:inline-block">
  71.                     <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
  72.                         <li><a href="https://www.w3web.net/lwc-get-set-lightning-checkbox-value/" target="_blank" rel="noopener noreferrer">How to get selected checkbox value in lwc</a></li>
  73.                         <li><a href="https://www.w3web.net/display-account-related-contacts-in-lwc/" target="_blank" rel="noopener noreferrer">how to display account related contacts based on AccountId in lwc</a></li>
  74.                         <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to create lightning datatable row actions in lwc</a></li>
  75.                         <li><a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">how to use if and else condition in lwc</a></li>
  76.                         <li><a href="https://www.w3web.net/get-selected-radio-button-value-and-checked-default-in-lwc/" target="_blank" rel="noopener noreferrer">how to display selected radio button value in lwc</a></li>
  77.                     </ul>
  78.             </div>
  79.  
  80.             <div style="width: 50%; float:left; display:inline-block">
  81.                     <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
  82.                         <li><a href="https://www.w3web.net/display-account-related-contacts-lwc/" target="_blank" rel="noopener noreferrer">display account related contacts based on account name in lwc</a></li>
  83.                         <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to insert a record of account Using apex class in LWC</a></li>
  84.                         <li><a href="https://www.w3web.net/fetch-picklist-values-dynamic-in-lwc/" target="_blank" rel="noopener noreferrer">how to get picklist values dynamically in lwc</a></li>
  85.                         <li><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/" target="_blank" rel="noopener noreferrer">how to edit/save row dynamically in lightning component</a></li>
  86.                         <li><a href="https://www.w3web.net/update-parent-object-from-child/" target="_blank" rel="noopener noreferrer">update parent field from child using apex trigger</a></li>
  87.                     </ul>
  88.                 </div>
  89.                <div style="clear:both;"></div> 
  90.                <br/>
  91.                 <div class="youtubeIcon">
  92.                     <a href="https://www.youtube.com/channel/UCW62gTen2zniILj9xE6LmOg" target="_blank" rel="noopener noreferrer"><img src="https://www.w3web.net/wp-content/uploads/2021/11/youtubeIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong>TechW3web:-</strong> To know more, Use this <span style="color: #ff8000; font-weight: bold;">Link</span> </a>
  93.                 </div>
  94.     </div> 
  95. </div>
  96.  
  97.   <!--End RelatedTopics Section-->
  98.     </div>
  99. </aura:component>

Create Lightning Application

Step 2:- Create Lightning Application : AuraIfMultipleConditionCmpApp.app

From Developer Console >> File >> New >> Lightning Application

AuraIfMultipleConditionCmpApp.app [Component Application File]

  1.    <aura:application extends="force:slds">
  2.     <c:AuraIfMultipleConditionCmp/>
  3. </aura:application>

 
check multiple conditions in aura:if lightning component -- w3web.net
 

Further post that would you like to learn in Salesforce

 

TechW3web:- To know more, Use this Link – YouTube

 

FAQ (Frequently Asked Questions)

How do you use multiple conditions in aura?

In the aura:If tag multiple conditions can't be evaluated using logical operator like '&&,||,and,or'. For evaluating multiple conditions in the aura:if tag we are required to use logical function or(), and(). nested condition div show because in statment 1 of or()condition returns true.

How can we conditionally display content in lightning component?

Step1 : Create a component which appear when entered value is true. Step2 : Create a component which appear when entered value is false. Step3 : Create component to show the above two component on the basis of condition.

What is Aura attribute?

An aura attribute is like a variable that we use in programming language or in Apex class. These are typed fields and set on a specific instance of a component. These attributes can be used inside the component as expressions and in controller and helper as well.

Related Topics | You May Also Like

 
Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!
 
 
  

Our Free Courses →

👉 Get Free Course →

📌 Salesforce Administrators

📌 Salesforce Lightning Flow Builder

📌 Salesforce Record Trigger Flow Builder
👉 Get Free Course →

📌 Aura Lightning Framework

📌 Lightning Web Component (LWC)

📌 Rest APIs Integration


Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net

Leave a Comment