Article Content

  1. Data Input
  2. Variable Input


Data Input

type = "dataInput"

With this Element you can input values which will be assigned to a column of your Datasource.


Properties

Property
Type
Description
Example Value
id
string
The unique id assigned to the Element.
  "id": "input"
type
string
Type of your Element.
  "type": "dataInput"
config
object
Configuration of the Element.

column: The column to edit. The component will take the value in the first row of this column.

label: Override for the input label which defaults to 'Change <column name>'.


inputType: Type of the input.

placeholder: The placeholder to show while the input is empty
  "config": {
    "column": "Name",
    "label": "The name is"
    "inputType": "textarea" //|| "input"
    "placeholder": "Placeholder Name"
    "editing": {
       "labels": {
         "startEditing": "Start",
         "stopEditing": "Stop"
      }
    }
  }


Full Example:

    {
      "id": "textarea",
      "type": "dataInput",
      "source": "frt_1",
      "config": {
        "column": "Name",
        "inputType": "input",
        "label": "The name is",
        "placeholder": "Placeholder Name"
      }
    },



Variable Input

type = "variableInput"

With this Element you can input values which will be assigned to a Variable.


Properties

Property
Type
Description
Example Value
id
string
The unique id assigned to the Element
  "id": "variableInputElement"
type
string
Type of the Element
  "type": "variableInput"
config
object
Configuration of the Element
  "config": {
    "variable": "variable1",
    "inputType": "input || textarea",
    "label": "My Variable Input",
    "placeholder": "Placeholer"
  }


Example

  "global": {
    "variables": [
      {
        "name": "userName",
        "type": "string",
        "default": "User"
      },
      {
        "name": "userAge",
        "type": "int",
        "default": 31
      },
      {
        "name": "userData",
        "type": "object",
        "default": {
          "city": "Passau",
          "country": "Germany"
        }
      }
    ]
  },
  "elements": [
    {
      "id": "text",
      "type": "html",
      "config": {
        "html": "",
        "$html": {
          "value": "Hello <strong>{{userName}}</strong>!<br> You're <em>{{userAge}}</em>
                    years old and live in <em>{{userData.city}}</em>,
                    <em>{{userData.country}}</em>"
        }
      }
    },
    {
      "id": "nameInput",
      "type": "variableInput",
      "config": {
        "variable": "userName",
        "inputType": "input",
        "label": "Name"
      }
    },
    {
      "id": "ageInput",
      "type": "variableInput",
      "config": {
        "variable": "userAge",
        "inputType": "input",
        "label": "Age",
        "placeholder": "Your age"
      }
    },
    {
      "id": "dataInput",
      "type": "variableInput",
      "config": {
        "variable": "userData",
        "inputType": "textarea",
        "label": "Data"
      }
    }
  ]