Dynamic Params
Dynamic Parameters are used to bind data to an action, e.g. from a form, a previously performed request or the current date.
General Structure
To use dynamic params in an action, you must first define delimiters
, which are used to mark the use of dynamicParams within the values of a params
object of an action. They are replaced by the actual value when the action is called in your app. Since the delimiters
within a template or event are {{
and }}
by default, it is recommended to use the curly brackets as the first characters in the delimiters
to clearly mark something as replacable. However, you are completely free to use any character string as a delimiter.
In the dyncamicParams
object you can define any number of dynamic params, which are always objects of evaluables, which are also used in dynamic values or in conditions.
The following is a simple example of displaying the current date and time in a toast message.
{
"type":"showMessage",
"leadingDelimiter": "{$",
"trailingDelimiter": "$}",
"dynamicParams": {
"variableName": {
"transform": "formatDate",
"left": {
"context": "date"
},
"right": {
"value": "dd-MM-dd HH:mm"
}
}
},
"params": {
"text": "The current dateTime is: {$variableName$}"
}
}
Examples
Goal: Have a login form layout, send a request with the e-mail and password from the form and save the authentication token in the user settings. Then set a new start config for the now logged in user.
{
"name": "c_login",
"layers": [
...
{
"type": "container",
"name": "loginContainer",
"dataKey": "loginContainer",
"constraints": [
{
"type": "size",
"height": "450pt"
},
{
"type": "pos",
"x": "10%",
"anchor": "w",
"relativeAnchor": "w"
},
{
"type": "pos",
"x": "-10%",
"anchor": "e",
"relativeAnchor": "e"
},
{
"type": "pos",
"y": "20pt",
"anchor": "n",
"relativeAnchor": "s",
"relativeTo": "headingContainer"
}
],
"children": [
...,
{
"type": "textBox",
"name": "email",
"formDataKey": "email",
"font": "Inter",
"fontSize": "22pt",
"hint": "E-Mail",
"inputType": "email",
"hintFontColor": "#F9F9F9",
"constraints": [
{
"type": "size",
"height": "60pt"
},
{
"type": "pos",
"x": "10%",
"anchor": "w",
"relativeAnchor": "w"
},
{
"type": "pos",
"x": "-10%",
"anchor": "e",
"relativeAnchor": "e"
},
{
"type": "pos",
"y": "20pt",
"anchor": "n",
"relativeAnchor": "n"
}
]
},
{
"type": "color",
"name": "backgroundColorTextBox",
"borderRadius": "8pt",
"value": "#778DA9",
"constraints": [
{
"type": "size",
"height": "60pt"
},
{
"type": "pos",
"x": "8%",
"anchor": "w",
"relativeAnchor": "w"
},
{
"type": "pos",
"x": "-8%",
"anchor": "e",
"relativeAnchor": "e"
},
{
"type": "pos",
"y": "30pt",
"anchor": "n",
"relativeAnchor": "s",
"relativeTo": "email"
}
]
},
{
"type": "textBox",
"name": "password",
"dataKey": "password",
"formDataKey": "password",
"font": "Inter",
"fontSize": "22pt",
"hint": "Passwort",
"inputType": "password",
"hintFontColor": "#F9F9F9",
"constraints": [
{
"type": "size",
"height": "60pt"
},
{
"type": "pos",
"x": "10%",
"anchor": "w",
"relativeAnchor": "w"
},
{
"type": "pos",
"x": "-10%",
"anchor": "e",
"relativeAnchor": "e"
},
{
"type": "pos",
"y": "30pt",
"anchor": "n",
"relativeAnchor": "s",
"relativeTo": "email"
}
]
},
{
"type": "container",
"name": "loginButtonContainer",
"dataKey": "loginButtonContainer",
"actions": [
{
"type": "request",
"leadingDelimiter": "{$",
"trailingDelimiter": "$}",
"dynamicParams": {
"email": {
"context": "form",
"field": "email"
},
"password": {
"context": "form",
"field": "password"
}
},
"params": {
"url": "https://example.com/authenticate",
"method": "POST",
"contentType": "json",
"post": {
"email": "{$email$}",
"password": "{$password$}"
},
"onSuccessType": "return",
"onSuccess": "result",
"onErrorType": "breakingEvent",
"onError": "loginError"
}
},
{
"type": "setDelimiters",
"params": {
"leadingDelimiter": "{&",
"trailingDelimiter": "&}"
}
},
{
"type": "setValueToUserSetting",
"params": {
"key": "loggedInToken",
"value": "{&result.token&}"
}
},
{
"type": "setCustomStart",
"params": {
"startConfig": "loggedIn",
"switchToCustomStart": true
}
}
],
"constraints": [
{
"type": "size",
"height": "60pt"
},
{
"type": "pos",
"x": "8%",
"anchor": "w",
"relativeAnchor": "w"
},
{
"type": "pos",
"x": "-8%",
"anchor": "e",
"relativeAnchor": "e"
},
{
"type": "pos",
"y": "30pt",
"anchor": "n",
"relativeAnchor": "s",
"relativeTo": "password"
}
],
"children": [
...
]
}
]
}
]
}
Goal: Read a value from a local db_table and save it into a global variable.
{
"type": "setVariable",
"leadingDelimiter": "{&",
"trailingDelimiter": "&}",
"dynamicParams": {
"amount": {
"context": "query",
"table": "cart",
"query": "getAmountByProductId",
"field": "amount",
"queryParams": [
"42"
]
}
},
"params": {
"variable": "currentAmount",
"value": "{&amount&}"
}
}