Let us assume there is a situation to check a value in List attribute within Component markup and render the body if the value is present in the List. What do you generally do in this scenario ? You may take advantage of Javascript and do some hack and set one attribute ( may be boolean ) and then do your action. Huh. Why don’t we think in different way ?
Lets see an example with approach we wanted and an alternate approach below:
Example:
We have a lightning component, in this component we have a attribute of list of strings:
|
1 2 3 4 5 |
<aura:attribute name="listItems" type="list" default="['Name' , 'Phone']"> |
based on the ‘listItems‘ attribute, we need to conditionally render the component body like this :
- if listItems list attribute contains or include Name element then display the paragraph (first one)
- if listItems list attribute contains or include Phone element then display the paragraph (second one)
|
1 2 3 4 5 6 7 8 9 10 11 |
<aura:if isTrue="{!CONTAINS(v.listItems, 'Name')}"> <p>Print if value contains in list</p> </aura:if> <aura:if isTrue="{!CONTAINS(v.listItems, 'Phone')}"> <p>Print if value contains in list</p> </aura:if> |
OOPS !!
Currently, there is NO Expression operators [ contains(), include() ] available in lightning which can check that item are in the list or not. :
Let’s see an awesome way of achieving this and to make it generic.
Step 1 : Create a Lightning Component : auraIfContains.cmp
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<aura:component > <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> <aura:attribute name="items" type="List" /> <aura:attribute name="element" type="String" /> <aura:attribute name="condition" type="Boolean" /> <aura:if isTrue="{!v.condition}"> {!v.body} </aura:if> </aura:component> |
Component javaScript controller : auraIfContainsController.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
({ doInit: function(component, event, helper) { var getList = component.get('v.items'); var getElement = component.get('v.element'); var getElementIndex = getList.indexOf(getElement); // if getElementIndex is not equal to -1 it's means list contains this element. if(getElementIndex != -1){ component.set('v.condition',true); }else{ component.set('v.condition',false); } } }) |
How to use :
- Use our custom auraIfWithContains lightning component instead of aura:if to render component body based on list values. You just have to pass the list of items and element to search in this component.
- If the given value/element present in list then the component body will be rendered. In this case, paragraphs.
Step 2 : Create Lightning Component : auraIfContainsContainer.cmp
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<aura:component> <!-- create aura:attribute with list/array type--> <aura:attribute name="listItems" type="List" default="['Name','Phone']"/> <!-- use 'auraIfWithContains' component with passing item list and contains element name.--> <c:auraIfWithContains items="{!v.listItems}" element="Name"> <p><b>yes name is contains in list</b></p> </c:auraIfWithContains> <c:auraIfWithContains items="{!v.listItems}" element="Email"> <p><b> No Email is not contains in list, so it's not showing</b></p> </c:auraIfWithContains> <c:auraIfWithContains items="{!v.listItems}" element="Phone"> <p><b> yes Phone is contains in list</b></p> </c:auraIfWithContains> </aura:component> |
Step 3 : Create Lightning Application for Testing: demo.app
From Developer Console >> File >> New >> Lightning Application
|
1 2 3 4 5 6 7 8 |
<aura:application extends="force:slds"> <c:auraIfContainsContainer/> <!-- here c: is org. default namespace prefix--> </aura:application> |
Output :
check also : How to Change lightning:Icon Color In Salesforce Lightning Component
Wow. It looks to be working great. Thanks for reading this post.
Please like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.
if you have any suggestions or issue with it, you can share your thoughts in comment box.
Happy Learning 🙂
Such an awesome post. Thanks for sharing !!!
If you’re using this on a component where list of items might change, you may want to add an onchange handler to the list. Add this line to the component:
If you’re using this in a context where the list of items might change, you want to add an onchange handler:
This is amazing. Thank you!
I’ve been trying to limit the number of characters in the label displayed. Thought I’d go with left() function, but it isn’t supported. Can you help? The label of the lightning:input field comes from the object’s field label itself. Sometimes if the label is long, it overlaps with the next field or makes the layout unpleasant.