Expressions
The Mobi Low-Code Development Platform uses a flexible expression system. This topic describes what expressions are, their common uses, and important considerations.
What is an expression
An expression is a core concept in logic development. An expression can be static text or can embed JavaScript expressions using interpolation syntax. The embedded JavaScript expression can access data within a specific scope. When the data that an expression depends on changes, the expression is automatically re-evaluated. This process creates a dynamic data binding between the expression's value and its dependencies. The automatic re-evaluation of expressions is a key part of the data-driven flow on the Mobi Low-Code Development Platform.
Expression syntax
Expressions can be static, dynamic, or mixed. Dynamic and mixed expressions use interpolation syntax.
Static expressions
A static expression is text written without interpolation syntax. You can use it to configure static content.
For example, to set the text for a button component to "OK", you can enter OK.
The initial type of a static expression is `string`. Therefore, it is typically used for configuration items where the expected type is `string`. If the expected type is not `string`, the platform attempts to convert the expression's value from the `string` type to the expected type. To prevent the platform from performing a type conversion, you can write static content, such as literals, in a dynamic expression. For example, {{ true }}.
Dynamic expressions
To configure dynamic content or specify a non-`string` type, you can write a JavaScript expression inside {{ }}.
For example, to bind the content of a text component to the value of the `input1` component, you can enter {{ input1.value }}.
Mixed expressions
To combine static and dynamic text, you can use interpolation syntax to write a mixed expression.
For example, to set a text component to display the values of the `input1` and `input2` components, you can enter The value of input1 is: {{ input1.value }}, and the value of input2 is: {{ input2.value }}.
Note that a mixed expression concatenates static text and the results of dynamic expressions into a single string. Therefore, the type of a mixed expression is always `string`.
Interpolation syntax parsing rules
The parser scans an expression from left to right. When it encounters {{, it enters a JavaScript expression context. The parser exits this context when it encounters a matching }}. The parser correctly handles nested braces, such as in object literals. If a matching }} is not found by the end of the string, the initial {{ and all subsequent content are treated as static text.
The following examples illustrate the edge cases of interpolation syntax.
Edge case |
Parsing result |
Example |
No |
Static text |
|
Unclosed |
Treated as a JavaScript expression in the expression editor, but the parsing result is static text. |
|
String inside |
JavaScript string |
|
|
JavaScript object |
Because the parser recognizes {{ and }} as special characters, you must wrap certain literal text inside a dynamic expression. For example, to display the literal text {{ a }}, you must enter it as a string within a dynamic expression, such as {{ "{{ a }}" }}.
Common uses
Expressions are widely used for data binding tasks on the Mobi Low-Code Development Platform. The following sections describe some common use cases.
Use expressions for data binding in component configuration
In a component's configuration panel, you can use expressions for any property that supports dynamic configuration. This lets you make component rendering data-driven.
For example, assume a page has an input component `input1` and a text component `text1`. If you enter {{input1.value}} in the Text Content property of `text1`, you create a dependency between the text content of `text1` and the value of `input1`. When the value of `input1` changes, the content of `text1` updates automatically.
Use expressions to dynamically build SQL statements in database integration operations
In database integration operations, the SQL statement that you enter is treated as an expression. You can write a static SQL statement or use interpolation syntax to dynamically build the statement.
For example, to query data from the `users` table where the `name` column matches the value of the `input1` component, you can enter the mixed expression shown in the following figure.
Use expressions for dynamic default values in parameters
When you add parameters to frontend functions or integration operations, the default value of a parameter is treated as an expression. You can configure a static or dynamic default value.
For example, to define a parameter named `name` whose default value is bound to the value of the `input1` component, you can configure the parameter as shown in the following figure.
Notes
Side effects: Expressions must be free of side effects. A side effect is an action that modifies state outside of the expression's scope. For example, an expression cannot modify platform data, call a frontend function, or send a network request.
Asynchronous operations: Expressions are synchronous. They cannot contain asynchronous operations, such as `await` or Promises.
Automatic execution: Expressions are re-evaluated automatically. However, this does not guarantee that logic that depends on the expression's result also runs automatically. For example, an integration operation can be configured to trigger automatically when its parameters change, but a frontend function must be called manually.
Type conversion: When an expression is evaluated, the platform attempts to convert its result to the expected type for the configuration item. You can use the preview feature in the expression editor to check the final result and type.
Mixed expression concatenation: Whitespace in the static text portion of a mixed expression is significant. For example, a{{b}} is different from
a {{b}}. However, whitespace within the dynamic part{{ }}is ignored, soa{{b}}is the same asa{{ b }}.