setProperty - Setting the value of a variable

This function allows the user to override a specific value at using a button. To do this, target and value must also be defined. target binds a variable to the state object, which is changed according to the value in value.

Example

The following simple example demonstrates the use of setProperty. In practice, this function can be used, among other things, to navigate between different pages of a form, as shown here.

setProperty.json

{
  "$schema": "https://forms.virtimo.net/4.1.x/schema.json",
  "metaData": {
    "id": 0,
    "version": 0
  },
  "components": [
    {
      "type": "container",
      "label": "setProperty Example",
      "components": [
        {
          "type": "html",
          "value": "'<p>Current value of variable: ' + /data/someValue + '</p> New value of variable after click on subtract: ' + (/data/someValue - /data/subtractValue)"
        },
        {
          "type": "numberfield",
          "label": "Changeable value of variable",
          "value": "/data/someValue"
        },
        {
          "type": "numberfield",
          "label": "Input value which is subtracted from above variable if subtract button is clicked",
          "value": "/data/subtractValue"
        },
        {
          "type": "button",
          "label": "Increment",
          "action": "setProperty",
          "target": "/data/someValue",
          "value": "/data/someValue +1"
        },
        {
          "type": "button",
          "label": "Subtract",
          "action": "setProperty",
          "target": "/data/someValue",
          "value": "/data/someValue - /data/subtractValue"
        },
        {
          "type": "button",
          "label": "Set to 1",
          "action": "setProperty",
          "target": "/data/someValue",
          "value": 1
        }
      ]
    }
  ],
  "configuration": {
  },
  "state": {
    "data": {
      "someValue": 5,
      "subtractValue": 3,
      "readOnlyVariable": true
    }
  }
}

Embedded preview

Open preview in a separate window

Keywords: