In this Salesforce tutorial, we will talk about Salesforce lightning Expression. In our previous tutorial we learn about Aura:attribute and how we can use aura attribute in Salesforce lightning app and lightning component.

What is Salesforce Lightning Expression ?

Salesforce lightning Expression allows you to make calculations and access property values and is evaluated and dynamically replaced when component is evaluated.

Expression syntax :

  • Syntax is {!<expression>}

When ever we have an expression, that expression will not be written on the screen the value of the expression is written on the screen.

ADVERTISEMENT

Rules to use Expression.

  • Only use the {!} syntax in the markup in .app file or .cmp resources.
  • If we using an expression inside a javascript, use string syntax to evaluate an expression.

Example

var theLabel=cmp.set("v.label");

As shown above, we have a variable called theLabel and we getting a component attribute whose named is label. Here we have not used any ! symbol.

Attributes

Attributeattribute typeRequired
bodyComponentDefRef[]yes
elseComponentDefRef[]
isTrueBoolean yes

Lightning Component

In this example we are going to learn about how to use an expression in Lightning component and lightning application using If else statement.

<aura:component &gt;
    <aura:attribute name="Edit" type="Boolean" default="false" /&gt;
    <aura:if isTrue="{!v.Edit}"&gt;
        <ui:button label="Submit" /&gt;
    <aura:set attribute="else"&gt;
        Welcome to Tutorialkart.com
    </aura:set&gt;
    </aura:if&gt;
</aura:component&gt;

Lightning Application.

<aura:application &gt;
    <c:expression /&gt;
</aura:application&gt;
  • Click on Preview button.
Salesforce Lightning Expression

From above, we have added <aura:component> and included a nested component called <aura:attribute> and the name of the attribute is Edit, attribute type is Boolean and the default value is “false”. Now there is another component available called <aura:if>. Using this attribute we can check the value of  {!v.Edit} expression. If the value of this expression is True, it will display “Submit” button. Then if the statement is “false” then the following string is displayed.

Output

Salesforce Lightning Expression

When the expression is True then “Submit” button will appear.

Salesforce Lightning Expression