All properties in the app can be changed with variables. Variables have the same name as the default properties with a '$' at the front. 


If you add a variable to your element you also need to provide the default property without the "$" to reach a valid JSON. This default property can be empty or a fallback value if the resolving of your provided variable fails. If the given variable can be resolved the "Fallback" or default value will be ignored and the element will show the value of the variable. Below is an example:


{
  "id": "welcomeTitle",
  "type": "html",
  "config": {
    // Default property
    "html": "",
    "$html": {
      // Variable property
      "value": "Hello {{agg.sub1}}"
    }
  }
}



Article Content


Properties


Property
Type
Description
Example Value
variables.name
string
Used to set the unique name of the variable
  "name": "vars"
variables.type
string

Used to set the data type of the variable

Possible types: "string", "double", "int", "object"

  "type": "string"
variables.defaultobjectUsed to set the preset default values of the variables
  "default": {
    "var1": "Test",
    "var2": "Test",
    "colorVal": "green"
  }



Variables from Filter values

You can assign the values of filters to variables like this (Example with a Filter Element and a HTML Element. All elements setting filters (tables, charts, filter elements) can be used, though)

The syntax looks like this:

"value": "{{ filters.<id_of_the_element>.<name_of_the_column>.values }}

Syntax for DateTime Picker: 

"value": "{{ filters.<id_of_the_elememt>.<name_of_the_column>.valueRange.min }} ||

"value": "{{ filters.<id_of_the_elememt>.<name_of_the_column>.valueRange.max}}


  {
    "id": "filter_element_1",
    "type": "filter",
    "source": "filter_testSource",
    "syncSets": [
      // ... SyncSet
    ],
    "config": {
      "column": "int"
    }
  },
  {
    "id": "table",
    "type": "html",
    "config": {
      "html": "FallBack Value",
      "$html": {
        "type": "int",
        // Use the first selected value from the filter element
        "value": "{{filters.filter_element_1.int.values.0}}"
      }
    }  }



Variable Transformations

Variables can hold complex data structures. To work with them in the various contexts of apps, we have provided a system to transform variables according to your needs. you can apply these transformations by "piping" them after the variable name, e.g.

{{ myvariable.list_of_values | first }}

In this case, we would return the first element of the array stored in myvariable.list_of_values. These variable transformations do also accept options like this:

{{ myvariable.list_of_values | list?separator=;&quote=' }}

This would apply the "list" transformation that returns a comma separated list by default. We can set the separator and quote symbol to be used for strings using the options.



See the following table for a list of available transformations and their options:

For the examples, assume the following variables are set:
myFavorites = { "food": ["spaghetti", "pizza"], "number": [23, 66] }
myName = "John Doe"


Transformation
Example Usage
Example Output
first
"{{ myFavorites.food | first }}"
"spaghetti"
last
"{{ myFavorites.food | last }}"
"pizza"
length
"{{ myFavorites.food | length }}"
"{{ myName | length }}"
"2"
"10"
json
"{{ myFavorites }}"
"{\"food\":[\"spaghetti\",
\"pizza\"],
\"number\":[23,66]}"

list
Available options:

  • quote: aracter for quoting
  • strings, default: '"'
  • separator: character to separate list items, default ', '
"{{ myFavorites.food | list }}"
"{{ myFavorites.number | list }}"
"{{ myFavorites.number | list?separator=| }}"
"{{ myFavorites.food | list?quote=' }}"
"\"spaghetti\", \"pizza\""
"23, 66"
"23|66"
"'spaghetti', 'pizza'"
sqlList
""{{ myFavorites.food | sqlList }}""
"('spaghetti', 'pizza')"
upcase
"{{ myName | upcase }}"
"JOHN DOE"
downcase
"{{ myName | downcase }}"
"john doe"


You can also chain transformations, e.g.:
{{ myFavorites.food | first | upcase }} => SPAGHETTI



System Variables

Apart from the filter values (see above) that may be available if filters are set, there are also other predefined variables that are always available. See the following table for a list of them:

Name
Description
Example Value
apps.appSessionId
Unique for each user each time an app is opened (via the list). Refreshing an open app (via F5 / Ctrl+R) does not create a new sessionId.
12345678-1234-5678-1234-567812345678


Example Configuration

Short example of a KPI Element with variables and fallback: 

  "elements": [
      {
        "id": "kpi-test1",
        "type": "kpi",
        "source": "raw_testSource2",
        "config": {
          "title": "Fallback or emtpy Title",
          "$title": {
            "value": "Customer {{vars.var1}} Payment {{vars.var2}}"
          },
          "footer": "Footer",
          "$footer": {
            "value": "{{vars.var2}}"
          }
        },
      }
    ],



Complete example with KPI variables to change the 'header', 'footer' and the 'value color' of the KPI element with variables:

{
  "version": "0.1",
  "screens": [
    {
      "layout": "layout1",
      "conditions": {
        "minScreenWidth": 0
      }
    }
  ],
  "global": {
    "variables": [
      {
        "name": "vars",
        "type": "string",
        "default": {
          "var1": "Test",
          "var2": "Test",
          "colorVal": "green"
        }
      }
    ],
    "columnStyles": [],
    "styles": {
      "backgroundColor": "#eee",
      "chartColors": [
        "rgb(252, 3, 3)",
        "rgb(252, 219, 3)",
        "rgb(69, 252, 3)",
        "rgb(3, 36, 252)"
      ]
    }
  },
  "layouts": [
    {
      "id": "layout1",
      "type": "fixedGrid",
      "config": {
        "dim": {
          "x": 24,
          "y": 24
        },
        "containers": [
          {
            "id": "kpiContainer1",
            "pos": {
              "x": 7,
              "y": 9,
              "z": 2
            },
            "size": {
              "w": 12,
              "h": 7
            }
          },
          {
            "id": "chartContainer",
            "pos": {
              "x": 7,
              "y": 10
            },
            "size": {
              "w": 12,
              "h": 5
            }
          },
          {
            "id": "varSelection",
            "pos": {
              "x": 7,
              "y": 16,
              "z": 1
            },
            "size": {
              "w": 12,
              "h": 3.5
            }
          }
        ]
      },
      "cellPadding": "5px",
      "placements": [
        {
          "containerId": "kpiContainer1",
          "elementId": "kpi-test1"
        },
        {
          "containerId": "chartContainer",
          "elementId": "chartVis"
        },
        {
          "containerId": "varSelection",
          "elementId": "varSelection1"
        }
      ]
    }
  ],
  "datasources": [
    {
      "id": "raw_testSource2",
      "origin": "raw",
      "config": {
        "schema": "table",
        "data": [
          {
            "otherValue": "218,422"
          }
        ]
      }
    },
    {
      "id": "raw_testSource",
      "origin": "raw",
      "config": {
        "schema": "table",
        "data": [
          {
            "Categories": "Jan",
            "Berlin": 1.5,
            "Tokyo": 2.2,
            "New York": 2.3,
            "London": 1.1
          },
          {
            "Categories": "Feb",
            "Berlin": 2.1,
            "Tokyo": 2.8,
            "New York": 2.9,
            "London": 3.1
          },
          {
            "Categories": "Mar",
            "Berlin": 1.2,
            "Tokyo": 2.8,
            "New York": 2.1,
            "London": 2.4
          },
          {
            "Categories": "Apr",
            "Berlin": 0.2,
            "Tokyo": 4.2,
            "New York": 3.7,
            "London": 2.5
          }
        ]
      }
    }
  ],
  "elements": [
    {
      "id": "kpi-test1",
      "type": "kpi",
      "source": "raw_testSource2",
      "styles": {
        "backgroundColor": "rgba(255,255,255,0.9)"
      },
      "config": {
        "$title": {
          "value": "Customer {{vars.var1}} Payment {{vars.var2}}"
        },
        "$footer": {
          "value": "{{vars.var2}}"
        },
        "layout": {
          "orientation": "vertical",
          "large": true
        },
        "$color": {
          "value": "{{vars.colorVal}}"
        },
        "kpiName": {
          "column": ""
        },
        "unit": {
          "text": ""
        },
        "value": {
          "column": "otherValue"
        }
      }
    },
    {
      "id": "chartVis",
      "type": "highcharts",
      "source": "raw_testSource",
      "config": {
        "xAxis": {
          "labels": false
        },
        "yAxis": {
          "labels": false,
          "title": ""
        },
        "title": "",
        "exporting": {},
        "chart": {
          "type": "column",
          "polar": false
        },
        "plotOptions": {
          "series": {
            "dataLabels": {
              "enabled": false
            },
            "animation": true
          }
        },
        "series": [
          {
            "name": "Tokyo",
            "turboThreshold": 0
          },
          {
            "name": "New York",
            "turboThreshold": 0
          },
          {
            "name": "Berlin",
            "turboThreshold": 0
          },
          {
            "name": "London",
            "turboThreshold": 0
          }
        ],
        "legend": {
          "enabled": false
        }
      }
    },
    {
      "id": "varSelection1",
      "type": "variableConfigSingleSelect",
      "config": {
        "variable": "vars",
        "options": [
          {
            "label": "Valueset1",
            "id": "vals1",
            "value": {
              "var1": "Test1",
              "var2": "Test2",
              "colorVal": "pruple"
            }
          },
          {
            "label": "Valueset2",
            "id": "vals2",
            "value": {
              "var1": "Test3",
              "var2": "Test4",
              "colorVal": "red"
            }
          }
        ],
        "label": "Select Variables"
      }
    }
  ]
}