Understanding mustaches and expressions

Modified on Thu, 21 Sep, 2023 at 6:23 AM

As an App Builder, in App Studio, you use expressions to use values and operators to derive a new value. The expressions are simple mathematical operations. Sometimes expressions derive constant values that never change, or you derive values from one or more Data Sets. As an App Builder, you use mustaches to include a reference to a Data Set or Component value that may change during the time that an App User uses your App. They are like variables in mathematical operations. You use mustaches to present dynamic information that may change during the use of your App. For example, you use an expression to toggle the visibility of a Component in your App if a User clicks a button.

In App Studio, there are many places that support the use of mustaches, so that you can pass dynamic values for evaluation and cause your App to react. In addition, the places that support mustaches, also support expressions.

You can enter mustaches and formulas in the following places:

To set the visibility of a Component	Appearance> Visible field
To Display a value in a Text Component	Configuration > Text
To set the default value of a Form field	Configuration > Field > Default value
To set a value of a Variable	Configuration > Data set > Variable and Expression
To set a value on an Event	An Event handler > Value to set

Creating a mustache

To enter a mustache:

In a place that supports a mustache, type:
```
{{
```
As you open the braces, you see existing Data Sets, and Components, to help you to complete the Data Set reference.
```
{{buttonVariable}}
```
To tag a specific field of a Data Set:
1. Type: .
2. The set of fields appears and you can tag them, for example:
```
{{object.field}}
```
To tag an element of an array or list:
1. you reference the index of the element, for example:
```
{{object.array.0}}
```

Important: When you use a mustache to reference a value your App escapes the character. If you need to use the raw content of the field use three braces to begin your mustache expression.

For example:

Field Value	Mustache	Output
A&B	{{Variable}}	A&B
A&B	{{{Variable}}}	A&B

Creating Expressions

Expressions use values and operators, that your App evaluates each time that a values changes.

You should only expect an expression to evaluate if it includes a mustache. Otherwise, your App may determine that your expression is just text. The evaluation of the expression depends on the data type of the mustache you provide. Only pass in suitable values, such as true, false, or numbers into these expressions.

The following table includes some basic examples of formulas that use operators to evaluate as either true or false. Typically, you use these to set the visibility of an Component.

Operators	Example
NOT	!{{variable}}
AND	{{variable1}} && {{variable2}}
OR	{{variable1}} \|\| {{variable2}}
EQUALS	{{variable}} == value
NOT EQUALS	{{variable}} != value
GREATER THAN	{{variable}} > 100
GREATER THAN OR EQUALS	{{variable}} >= 100
LESS THAN	{{variable}} < 100
LESS THAN OR EQUALS	{{variable}} > 100
Expressions	( {{A}} && {{B}} ) \|\| {{C}}

The following mathematical operators are available to use with numbers:

Operators	Example
ADDITION	{{VAR}} + {{VAR}}
SUBTRACTION	{{VAR}} - {{VAR}}
MULTIPLICATION	{{VAR}} * {{VAR}}
DIVISION	{{VAR}} / {{VAR}}
EXPONENT	{{VAR}} ^ {{VAR}}
Ternary operator	({{VAR}} >= 100) ? "Greater Than or Equal" : "Less Than"