Understanding mustaches and expressions

TABLE OF CONTENTS

• Introduction to Mustaches and Expressions
• Where to Use Mustaches and Expressions
• Creating Mustaches
• Creating Expressions
  • Logical Operators in Expressions
  • Mathematical Operators in Expressions

Introduction to Mustaches and Expressions

As an App Builder in App Studio, you use expressions to combine values and operators to derive new results. These expressions often involve simple mathematical operations. Some expressions produce constant values that remain unchanged, while others derive dynamic values from one or more data sets. Additionally, you use mustaches ({{ }}) to reference data set values or component properties that may change as users interact with your App. Think of mustaches as dynamic placeholders or variables in mathematical operations, enabling your App to present dynamic information. For instance, an expression can toggle the visibility of a component when a user clicks a button.

App Studio supports the use of mustaches in many areas, allowing you to pass dynamic values for evaluation and create responsive, interactive apps. Moreover, wherever mustaches are supported, expressions can also be used.

Where to Use Mustaches and Expressions

You can enter mustaches and formulas in various parts of App Studio.

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 assign a value to a Variable	App > Configuration > Data set > Variable  > Expression
To define a value for an Event	Configuration > Event handler > Set a variable > Value to set
To set a value for a Validation Rule in a Form Component	Configuration > Form validation > Custom expression ('fx' icon next to the Condition field)

Creating Mustaches

To create a mustache expression, follow these steps:

1. Enter a mustache in a supported area. Type {{to begin.

   {{

2. As you open the braces, a list of available Data Sets and Components appears to help you complete the reference. For example,

   {{buttonVariable}}

    
3. To tag a specific field of a Data Set:
   1. After typing the mustache, type .  to access fields within the object.
   2. The set of fields appears and you can tag them, for example:

      {{object.field}}

4. To tag an element of an array or list, use the index of the element to reference it, for example:

   {{object.array.0}}

Important: When referencing a value with a mustache, your App automatically escapes special characters. To include raw content without escaping, use three braces ({{{ }}}) instead of two ({{ }}). 

For example,

Creating Expressions

Expressions allow your App to evaluate values dynamically using operators and variables, updating automatically whenever the referenced values change. 

Key considerations for expressions:

• An expression must include at least one mustache ({{ }}) to be evaluated. Otherwise, your App might treat the expression as plain text. 
• The evaluation depends on the data type of the mustache. Use appropriate values such as true, false, or numbers to ensure proper results.

Logical Operators in Expressions

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

Mathematical Operators in Expressions

The following mathematical operators are available to use with numbers: