Tabs

Organize complex forms using a standard tab element

Tab Modes

A tabs element can be constructed in either Data Mode or Form Mode. Form mode allows you to define each tab individually as its own form, very similar to how a tab element would work in FileMaker. Data Mode takes an array of data and generates a tab for each item in the array, with identical elements in each tab containers.

  • To use Data Mode, set "type": "vtabs"

  • To use Form Mode set "type": "tabs_form"

Otherwise, all other parts of this page apply to both modes.

Additional Keys

Vertical Tabs give you the ability to contain repeating records (tab) of data and allow the user to add additional tabs.

v-tab's can contain full form schema. This means you can build forms within forms!

Notes

Set the min and max values to the same number to permanently hide the add and delete icons. Data within your data models array will still render rows accordingly.

// typical v-tab object
// DATA MODE

{
  "hint": "You can set the 'max' property to limit number of records",
  "label": "Enter Some Contacts (4 max)",
  "min": 1,
  "max": 4,
  "model": "contacts",
  "schema": {
    "fields": [
      {
        "inputType": "text",
        "label": "First Name",
        "model": "nameFirst",
        "styleClasses": "col-md-6",
        "type": "input"
      },
      {
        "inputType": "text",
        "label": "Last Name",
        "model": "nameLast",
        "styleClasses": "col-md-6",
        "type": "input"
      },
      {
        "inputType": "select",
        "label": "Street 1",
        "model": "street1",
        "styleClasses": "col-md-12",
        "type": "input"
      }
    ]
  },
  "styleClasses": "col-md-8",
  "tabLabelModel": "nameFirst",
  "type": "vtabs"
}

Last updated