Category Archives: Salesforce

Set Default Value in Picklist in Lightning Component

Here in below example the default value in picklist is “Apple”.
Lightning Component:

<aura:component>
    <ui:inputSelect aura:Id="brandId" multiple="false" label="Select Brand">
        <ui:inputSelectOption label="Apple" text="Apple" value="true"/>
        <ui:inputSelectOption label="Nokia" text="Nokia"/>
        <ui:inputSelectOption label="Samsung" text="Samsung"/>
        <ui:inputSelectOption label="Google" text="Google"/>
        <ui:inputSelectOption label="Mi" text="Mi"/>
    </ui:inputSelect>
</aura:component>

Output:

Multiple Conditions in aura:if on Lightning Component

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. Switching condition unrenders and destroys the current branch and generates the other.

In aura:if tag we can not use &&,AND,||,OR operator for multiple conditions in isTrue attribute, but we can use logical functions in aura:if tag like or(), and().

Here is the example how to use multiple Boolean conditions in aura:if tag.

Lightning Component:

<!--TestComponent-->
<aura:component >
    <aura:attribute name="ATrue" type="boolean" default="true"/>
    <aura:attribute name="BFalse" type="boolean" default="false"/>
    <aura:attribute name="CTrue" type="boolean" default="true"/>
    <aura:attribute name="DFalse" type="boolean" default="false"/>
    
    <!--aura:if Sample -->
    <aura:if  isTrue="{!and(v.ATrue, v.CTrue)}" >
        <div style="padding:15px; background-color:LightBlue">
            And => This div show because both A and C attributes are true
        </div>
    </aura:if>
    <!--aura:if with aura:set sample-->
    <aura:if  isTrue="{!or(v.DFalse, v.BFalse)}">
        <div style="padding:15px;">
            Or => This div show because one attribute is true
        </div>
        <aura:set attribute="else">
            <div style="padding:15px;">
                Or => This div show because both attributes are false
            </div>
        </aura:set>
    </aura:if>
    <!--aura:if with nested and condition-->
    <aura:if  isTrue="{!or(and(v.ATrue, v.CTrue), v.BFalse)}" >
        <div style="padding:15px; background-color:LightGreen  ">
            Nested condition div show because in statment one of or condition returns true
        </div>
    </aura:if>
</aura:component>

Lightning App:

<!--TestApp-->
<aura:application>
    <c:TestComponent/>
</aura:application>

Output: