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&}"
  }
}