Vue auto form field documentation

Fields

With no options

Simple input

Json

field:
{
  "@label": "Primitive Visualization",
  "@hint": "optional",
}
value: "first"

Preview

optional

Array

Json

field:
{
  "@label": "Array Visualization",
  "@default": ["stringAdded"]
}
value: ["string1", "string2", "string3"]

Preview

Array Visualization

Object

Json

field:
{
  "@label": "object",
  "@data": {
    "key1": {
      "@label": "key1 Visualization"
    },
    "key2": {
      "@label": "key2 Visualization"
    }
  }
}
value:
{
    "key1": "key1Value",
    "key2": "key2Value"
}

TIP

You can add a label on the object

WARNING

When the field is in object, you need to wrap the object in "@data" object.

Preview

Object Visualization

Array of Object

Json

field:
{
  "@label": "Array of Object",
  "@data": [
    {
      "key1Item": {
        "@label": "key1 of item",
        "@default": "string"
      },
      "key2Item": {
        "@label": "key2 of item",
        "@default": "string"
      }
    }
  ]
}
value:
[
    {
        key1Item: "string",
        key2Item: "string"
    },
    {
        key1Item: "string",
        key2Item: "string"
    }
]

TIP

You can add a label on the array of object

WARNING

When the field is an array of object, you need to wrap the array in "@data" object.

Preview

  • Array of Object 1

  • Array of Object 2

With options

Checkbox

Json

field:
{
  "@label": "Chekbox Visualization",
  "@options": {"displayAs": "checkbox"}
}
value: true

data: Nothing

Preview

Select

Data as object

Json

field
{
  "@label": "Select Object Visualization",
  "@options": {"displayAs": "select", "data": [
    {"label": "Choice 1", "value": 1},
    {"label": "Choice 2", "value": 2},
    {"label": "Choice 2", "value": 3}
  ]}
}
value: 2

data: Array of choice or Array of object: {"label": "choice 1", "value": "1"}

Preview

Choice 2

Data as array

Json

field:
{
  "@label": "Select Array Visualization",
  "@options": {"displayAs": "select", "data": [1,2,3]}
}
value: 3

data: Array of choice [1,2,3]

Preview

1

Specific or general media

Json

"image": {
  "@label": "image",
  "@hint": "",
  "@default": "images/loose.png",
  "@options": {"displayAs": "image"}
},
"sound": {
  "@label": "sound",
  "@hint": "",
  "@default": "sounds/loop.wav",
  "@options": {"displayAs": "sound"}
},
"video": {
  "@label": "video",
  "@hint": "",
  "@default": "videos/finalSonAmeliorer.mp4",
  "@options": {"displayAs": "video"}
},
"file": {
  "@label": "file",
  "@hint": "",
  "@default": "files/manifest.json",
  "@options": {"displayAs": "file"}
},
"media": {
  "@label": "media",
  "@hint": "",
  "@default": "images/loose.png",
  "@options": {"displayAs": "media"}
}
value: {
    "image": "images/picture.png",
    "sound": "sounds/sound.mp3",
    "video": "videos/video.mp4",
    "file": "files/data.json",
    "media": "images/anything.png"
}

data: Nothing

Preview

Preview is unavailable because media visualisation need configuration and a backend server. See Media components documentation for more informations

Multiple Checkbox

Json

field:
{
  "@label": "Multiple Checkbox Visualization",
  "@options": {"displayAs": "multiplecheckbox", "data": ["check1", "check2", "check3", "check4"]}
}
value: ["check1", "check4"],

data: Array of choice possible to enable and disable or Array of object: {"label": "choice 1", "value": "1"}

Preview

Number

Json

field:
{
  "@label": "Number Visualization",
  "@default": 42,
  "@options": {"displayAs": "number"}
}
value: 42

data: Object with 1 key: step. For allowing float number. Default is 60

Preview

Duration

Days

Json

field:
{
  "@label": "Duration Days Visualization",
  "@options": {
    "displayAs": "duration",
    "data": {
      "periods" : ["years", "months", "days"],
      "min": 5,
      "max": 800
    }
}
value: 455

data: Object with 3 possible keys: "periods", "min" and "max":

  • periods: Array of time units to display: ["years", "months", "days", "hours", "minutes", "seconds"]
    The unit of the value depend of the smaller time unit in the array. Ex: ["years", "months", "days"] returns a number of days And ["hours", "minutes"] returns a number of minutes

  • min: Integer representing the value of minimum duration value representing as the smaller time unit precised in periods key.
    Ex: if min equal 90 for periods ["hours", "minutes"] this mean a minimal value equal to 1 hour and 30 minutes

  • max: Integer representing the value of maximum duration value representing as the smaller time unit precised in periods key.
    Ex: if min equal 730 for periods ["years", "months", "days"] this mean a maximal value equal to 2 years

Preview

Minutes

Json

field:
{
  "@label": "Duration Minutes Visualization",
  "@default": 25,
  "@options": {
        "displayAs": "duration",
        "data": {
            "periods" : ["hours", "minutes"],
            "min": 5,
            "max": 50,
        }
    }
}
value: 90

data: Object with 3 possible keys: "periods", "min" and "max":

  • periods: Array of time units to display: ["years", "months", "days", "hours", "minutes", "seconds"]
    The unit of the value depend of the smaller time unit in the array. Ex: ["years", "months", "days"] returns a number of days And ["hours", "minutes"] returns a number of minutes

  • min: Integer representing the value of minimum duration value representing as the smaller time unit precised in periods key.
    Ex: if min equal 90 for periods ["hours", "minutes"] this mean a minimal value equal to 1 hour and 30 minutes

  • max: Integer representing the value of maximum duration value representing as the smaller time unit precised in periods key.
    Ex: if min equal 730 for periods ["years", "months", "days"] this mean a maximal value equal to 2 years

Preview

ReadOnly

Json

field:
{
  "@label": "readOnly",
  "@hint": "",
  "@default": "foo",
  "@options": {"displayAs": "readonly"}
}
value: "foo"

data: Nothing

Preview

foo

Hidden

Json

field: {
  "@label": "hidden",
  "@options": {"displayAs": "hidden"}
}
value: "bar"

data: Nothing

Preview

No Preview

Password

Json

field:
{
  "@label": "password",
  "@options": {"displayAs": "password"}
}
value: "mySecretPassword",

data: Nothing

Preview

Datetime, Date and Time

Json

"date": {
  "@label": "date",
  "@hint": "",
  "@default": "01-07-2016",
  "@options": {"displayAs": "datetime", "data": {"type": "date", "format": "DD-MM-YYYY", "dateFormat": "YYYY-MM-DD"}}
}

data: Object with three keys: type, format and dateFormat. Type can be date, datetime ot time depend of the element you want to see on the picker. Format is the date format you want when we update the value with the date picker. DateFormat is the format used to display the date on the label (please use only format like YYYY-MM-DD and not like YYYY-MM-DDTHH:mm:ssZ for this one).

Ex: {"type": "date", "format": "DD-MM-YYYY", "dateFormat": "YYYY-MM-DD"} {"type": "datetime", "format: "DD-MM-YYYYTHH:mm:ss", "dateFormat": "YYYY-MM-DD"} {"type": "time", "format: "HH:mm:ss"}

Preview

Slider

Json

field:
{
  "@label": "slider",
  "@options": {"displayAs": "slider", "data": {"min": 100, "max": 1000, "step": 5}}
}
value: 300

data: Object with 3 keys helping to define to slider parameters: max, min and step. Default: max: 100, min: 0, step: 1

Preview

Textarea

Json

field: {
  "@label": "textarea",
  "@options": {"displayAs": "textarea"}
}
value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

data: Nothing

Preview

Color

Json

field:
{
  "@label": "color",
  "@hint": "",
  "@default": "#6A1BBD",
  "@options": {"displayAs": "color"}
}
value: "#6A1BBD"

data: Nothing

Preview