Salesforce.com: Expression Operators in Salesforce lightning Components

Generally In every component implementation we have a need to change the UI conditionally, or show/hide a section/column based on certain conditions. We need simple ways to do this instead of having every handler in code. Below are key operators and their syntax to handle any such situation

Ternary Operator

This expression uses the ternary operator to conditionally output one of two values dependent on a condition.

1
<a class="{!v.location == '/active' ? 'selected' : ''}" href="#/active">Active</a>

The {!v.location == ‘/active’ ? ‘selected’ : ”} expression conditionally sets the class attribute of an HTML <a>tag, by checking whether the location attribute is set to /active. If true, the expression sets class to selected.

Using <aura:if> for Conditional Markup

<aura:attribute name="edit" type="Boolean" default="true"/>
<aura:if isTrue="{!v.edit}">
    <ui:button label="Edit"/>
    <aura:set attribute="else">
        You can’t edit this.
    </aura:set>
</aura:if>

If the edit attribute is set to true, a ui:button displays. Otherwise, the text in the else attribute displays.

The expression language supports operators to enable you to create more complex expressions.

Arithmetic Operators

Expressions based on arithmetic operators result in numerical values.

Operator	Usage	Description
`+`	`1 + 1`	Add two numbers.
`–`	`2 – 1`	Subtract one number from the other.
`*`	`2 * 2`	Multiply two numbers.
`/`	`4 / 2`	Divide one number by the other.
`%`	`5 % 2`	Return the integer remainder of dividing the first number by the second.
`–`	`-v.exp`	Unary operator. Reverses the sign of the succeeding number. For example if the value of `expenses`is `100`, then `-expenses` is `-100`.

Numeric Literals

Literal	Usage	Description
Integer	`2`	Integers are numbers without a decimal point or exponent.
Float	`3.14` `-1.1e10`	Numbers with a decimal point, or numbers with an exponent.
Null	`null`	A literal null number. Matches the explicit null value and numbers with an undefined value.

String Operators

Expressions based on string operators result in string values.

Operator	Usage	Description
`+`	`‘Title: ‘ + v.note.title`	Concatenates two strings together.

String Literals

String literals must be enclosed in single quotation marks ‘like this’.

Literal	Usage	Description
string	`‘hello world’`	Literal strings must be enclosed in single quotation marks. Double quotation marks are reserved for enclosing attribute values, and must be escaped in strings.
\<escape>	`‘\n’`	Whitespace characters: `\t` (tab) `\n` (newline) `\r` (carriage return) Escaped characters: `\”` (literal “) `\’` (literal ‘) `\\` (literal \)
Unicode	`‘\u####’`	A Unicode code point. The # symbols are hexadecimal digits. A Unicode literal requires four digits.
null	`null`	A literal null string. Matches the explicit null value and strings with an undefined value.

Comparison Operators

Expressions based on comparison operators result in a true or false value. For comparison purposes, numbers are treated as the same type. In all other cases, comparisons check both value and type.

Operator	Alternative	Usage	Description
`==`	`eq`	`1 == 1` `1 == 1.0` `1 eq 1` `undefined==null`evaluates to `true`.	Returns `true` if the operands are equal. This comparison is valid for all data types. Don’t use the `==` operator for objects, as opposed to basic types, such as Integer or String. For example, `object1==object2` evaluates inconsistently on the client versus the server and isn’t reliable.
`!=`	`ne`	`1 != 2` `1 != true` `1 != ‘1’` `null != false` `1 ne 2`	Returns `true` if the operands are not equal. This comparison is valid for all data types.
`<`	`lt`	`1 < 2` `1 lt 2`	Returns `true` if the first operand is numerically less than the second. You must escape the `<` operator to `<` to use it in component markup. Alternatively, you can use the `lt` operator.
`>`	`gt`	`42 > 2` `42 gt 2`	Returns `true` if the first operand is numerically greater than the second.
`<=`	`le`	`2 <= 42` `2 le 42`	Returns `true` if the first operand is numerically less than or equal to the second. You must escape the `<=` operator to `<=` to use it in component markup. Alternatively, you can use the `le` operator.
`>=`	`ge`	`42 >= 42` `42 ge 42`	Returns `true` if the first operand is numerically greater than or equal to the second.

Logical Operators

Expressions based on logical operators result in a true or false value.

Operator	Usage	Description
`&&`	`isEnabled && hasPermission`	Returns `true` if both operands are individually true. You must escape the `&&` operator to `&&` to use it in component markup. Alternatively, you can use the `and()` function and pass it two arguments. For example, `and(isEnabled, hasPermission)`.
`\|\|`	`hasPermission \|\| isRequired`	Returns `true` if either operand is individually true.
`!`	`!isRequired`	Unary operator. Returns `true` if the operand is false. This operator should not be confused with the `!` delimiter used to start an expression in `{!`. You can combine the expression delimiter with this negation operator to return the logical negation of a value, for example, `{!!true}` returns `false`.

Logical Literals

Logical values are never equivalent to non-logical values. That is, only true == true, and only false == false; 1 != true, and 0 != false, and null != false.

Literal	Usage	Description
true	`true`	A boolean `true` value.
false	`false`	A boolean `false` value.

Conditional Operator

There is only one conditional operator, the traditional ternary operator.

Operator	Usage	Description
`? :`	`(1 != 2) ? “Obviously” : “Black is White”`	The operand before the `?` operator is evaluated as a boolean. If true, the second operand is returned. If false, the third operand is returned.

Source : http://www.saasanalogy.com/conditional-expressions-in-salesforce-lightning-components/

Search This Blog

salesforce