Fields

Fields types

button, checkbox, combo, date, hidden, line, number, password, radio, segbutton, set, string, switcher, tab, textarea.

button

button field type.


items: [{
...
},{
  label: 'Label',
  type: 'button',
  name: 'button',
  buttonText: true
},{
...

checkbox

Boolean

checkbox field type.


items: [{
...
},{
  label: 'Married',
  type: 'checkbox',
  name: 'married',
  value: true
},{
...

combo

Mixed

combo field type.


items: [{
  type: 'combo',
  label: 'Country',
  name: 'country',
  data: [
    {index: 0, country: 'USA'},
    {index: 1, country: 'Canada'}
  ],
  displayKey: 'country',
  valueKey: 'index',
  value: 0
...

date

String

date field type.


items: [{
  type: 'date',
  label: 'Birthday',
  name: 'birthday',
  value: new Date()

hidden

Mixed

hidden field type.


items: [{
  type: 'hidden',
  name: 'param',
  value: true
},{
...

line

line field type.


items: [{
  type: 'line',
  defaults: {
    labelAlign: 'top'
  },
  items: [{
    type: 'string',
    label: 'Name',
    emptyText: 'Name',
    name: 'name'
  },{
    type: 'string',
    label: 'SurName',
    emptyText: 'SurName',
    name: 'surname'
  }]
}]
...

number

Number

number field type.


items: [{
  type: 'number',
  label: 'Age',
  name: 'age',
...

password

Mixed

password field type.


items: [{
  label: 'Pass',
  name: 'pass',
  type: 'password'
...

radio

Mixed

radio field type.


items: [{
  type: 'radio',
  label: 'Favorite car brand?',
  name: 'brand',
  value: 'kia',
  items: [{
    text: 'KIA',
    value: 'kia'
  },{
    text: 'Honda',
    value: 'honda'
  },{
    text: 'Land Rover',
    value: 'lr'
  },{
    text: 'Toyota',
    value: 'toyota'
  }]
},{
...

segbutton

String

segmented button field type.


items: [{
...
},{
  label: 'Education',
  type: 'segbutton',
  multiToggle: true,
  items: [{
    text: 'Bachelor'
  },{
    text: 'Master',
    pressed: true
  },{
    text: 'PhD',
    pressed: true
  },{
    text: 'Doctor'
  }]
},{
...

set

set field type.



items: [{
  type: 'set',
  label: 'User Info',
  checkbox: true,
  defaults: {
    inputWidth: 180,
    labelWidth: 90,
  },
  items: [{
    type: 'string',
    label: 'Login',
    emptyText: 'Login',
    name: 'login'
  },{
    type: 'password',
    label: 'Password',
    emptyText: 'Password',
    name: 'password'
  }]
},{
...

string

String

string field type.


items: [{
  type: 'string',
  label: 'Name',
  name: 'name',
...

switcher

Boolean

switcher field type.


items: [{
  type: 'switcher',
  label: 'Active',
  name: 'active',
  value: true
...

tab

String

tab field type.


activeTab: 0,
items: [{
  type: 'tab',
  defaults: {
    type: 'string'
  },
  items: [{
    label: 'Name',
    name: 'name'
  },{
    label: 'SurName',
    name: 'surname'
  }]
},{
  type: 'tab',
  items: [{
    type: 'number',
    label: 'Age',
    name: 'age'
  },{
    type: 'checkbox',
    label: 'Married',
    name: 'married'
  }]
},{
  type: 'tab',
  items: [{
    type: 'combo',
    label: 'Country',
    name: 'country',
    data: [
      {index: 0, country: 'USA'},
      {index: 1, country: 'Canada'}
    ],
    displayKey: 'country',
    valueKey: 'index',
    value: 0
  },{
    type: 'textarea',
    inputWidth: 250,
    height: 110,
    emptyText: 'About',
    label: false,
    name: 'about'
  }]
}],
...

textarea

Array

textarea field type.


items: [{
  label: 'About',
  type: 'textarea',
  name: 'about',
  emptyText: 'About'
...

defaults

All listed properties can be auto set to columns if they do not already exist.

defaults

Object

Defaults fields properties.


defaults: {
  type: 'string'
},

All field configs

allowToggle

Boolean

It is used only for segbutton field.
It enables toggle.


...
items: [{
  label: 'Military',
  type: 'segbutton',
  name: 'military',
  items: [{
    text: 'Yes',
    value: 'yes'
  },{
    text: 'No',
    pressed: true,
    value: 'no'
  }]
},{
...
true

column

Boolean

It is used only for radio field.
Placing radio elements in column.


...
items: [{
  type: 'radio',
  label: 'Favorite car brand?',
  name: 'brand',
  value: 'kia',
  items: [{
    text: 'KIA',
    value: 'kia'
  },{
    text: 'Honda',
    value: 'honda'
  },{
    text: 'Land Rover',
    value: 'lr'
  },{
    text: 'Toyota',
    value: 'toyota'
  }]
},{
...
false

data

Mixed

It is used only for combo field.
Combo values.


...
items: [{
  type: 'combo',
  label: 'Country',
  name: 'country',
  data: [
    {index: 0, country: 'USA'},
    {index: 1, country: 'Canada'}
  ],
  displayKey: 'country',
  valueKey: 'index',
  value: 0,
  events: [{
    change: function(field, value){
      
    }
  }]
},{
...

...
items: [{
  type: 'combo',
  label: 'Country',
  name: 'country',
  data: {
    proxy: {
      url: 'countries.json'
    }
  },
  displayKey: 'country',
  valueKey: 'index',
  value: 0,
  events: [{
    change: function(field, value){
      
    }
  }]
},{
...

defaults

Object

It is used only for fields: radio, set, tab .


items: [{
  type: 'set',
  label: 'User Info',
  checkbox: true,
  defaults: {
    type: 'string'
  },
  items: [{
    label: 'Name',    
    name: 'name'
  },{
    label: 'SurName',
    name: 'surname'
  }]
},{
...

displayKey

String

Combo data key to display.
It is used only for combo field.


items: [{
  type: 'combo',
  label: 'Country',
  name: 'country',
  data: [
	{index: 0, country: 'USA'},
	{index: 1, country: 'Canada'}
  ],
  displayKey: 'country',
  valueKey: 'index',
  value: 0
}]
...

editable

Boolean

It is used only for combo field.
It enables editing combo field value.


...
items: [{
  label: 'Text',
  displayKey: 'valueText',
  valueKey: 'index',
  editable: false,
  data: [{
    index: "AL",
    valueText: "Alabama"
  },{
    index: "AK",
    valueText: "Alaska"
...
true

emptyText

String

Placeholder text.


...
items: [{
  type: 'number',
  label: 'Age',
  name: 'age',
  emptyText: 'Write your age',
},{
...

events

Array

Set event handler to field.


...
items: [{
  label: 'Married',
  type: 'checkbox',
  name: 'married',
  value: true,
  events: [{
    change: function(){
      
    }
  }]
},{
...

format

Object

Formatting fields.


...
items: [{
  type: 'date',
  label: 'Birthday',
  name: 'birthday',
  emptyText: 'm.d.Y',
  format: {
    read: 'm.d.Y',
    write: 'm.d.Y',
    edit: 'm.d.Y'
  }
...

...
items: [{
  type: 'number',
  label: 'Salary',
  name: 'salary',
  emptyText: '$80,000',
  format: {
    inputFn: function salaryInputFn(value){
      value = value.toString().replace('$', '').replace(/\,/g,'').replace('-', '').replace('.', '');
        
      if(value.length === 0){
        value = '';
      }     
      else if(value.length > 6){
        value = value.substr(0, 6);
        value = '$' + value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      }
      else{
        value = '$' + value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      }
      
      return value;
    }
  }
...

items

Array

It is used for fields: line, set, tab, radio, segbutton.

Line field

items: [{
  type: 'line',
  defaults: {
    labelAlign: 'top'
  },
  items: [{
    type: 'string',
    label: 'Name',
    emptyText: 'Name',
    name: 'name'
  },{
    type: 'string',
    label: 'SurName',
    emptyText: 'SurName',
    name: 'surname'
  }]
}]
...

Radio field

items: [{
  type: 'radio',
  label: 'Favorite car brand?',
  name: 'brand',
  value: 'kia',
  items: [{
    text: 'KIA',
    value: 'kia'
  },{
    text: 'Honda',
    value: 'honda'
  },{
    text: 'Land Rover',
    value: 'lr'
  },{
    text: 'Toyota',
    value: 'toyota'
  }]
},{
...

Tab field

activeTab: 0,
items: [{
  type: 'tab',
  defaults: {
    type: 'string'
  },
  items: [{
    label: 'Name',
    name: 'name'
  },{
    label: 'SurName',
    name: 'surname'
  }]
},{
  type: 'tab',
  items: [{
    type: 'number',
    label: 'Age',
    name: 'age'
  },{
    type: 'checkbox',
    label: 'Married',
    name: 'married'
  }]
},{
  type: 'tab',
  items: [{
    type: 'combo',
    label: 'Country',
    name: 'country',
    data: [
      {index: 0, country: 'USA'},
      {index: 1, country: 'Canada'}
    ],
    displayKey: 'country',
    valueKey: 'index',
    value: 0
  },{
    type: 'textarea',
    inputWidth: 250,
    height: 110,
    emptyText: 'About',
    label: false,
    name: 'about'
  }]
}],
...

SegButton field

},{
  label: 'Education',
  type: 'segbutton',
  multiToggle: true,
  items: [{
    text: 'Bachelor'
  },{
    text: 'Master',
    pressed: true
  },{
    text: 'PhD',
    pressed: true
  },{
    text: 'Doctor'
  }]
},{

label

String/Boolean

Text of field.


...
items: [{
  label: 'Married',
  type: 'checkbox',
  name: 'married',
  value: true
},{
...

labelAlign

String

Align of label.

Values: right, left, top..


...
items: [{
  label: 'Married',
  type: 'checkbox',
  name: 'married',
  value: true,
  labelAlign: 'right'
},{
...
left

multiToggle

Boolean

It is used only for segbutton field.
Enables multi toggle.


...
items: [{
  label: 'Education',
  type: 'segbutton',
  name: 'education',
  multiToggle: true,
  items: [{
    text: 'Bachelor'
  },{
    text: 'Master',
    pressed: true
  },{
    text: 'PhD',
    pressed: true
  },{
    text: 'Doctor'
  }]
},{
...
true

name

String

Name of field over which it is possible to get value of field.


...
items: [{
  label: 'Married',
  type: 'checkbox',
  name: 'married',
  value: true,
  labelAlign: 'right'
},{
...

spin

Boolean

Enable a pair of up/down spinner buttons.
It is used only for number field.


items: [{
  label: 'Salary',
  name: 'salary',
  value: 70000,
  spin: true,
  step: 1000,
  type: 'number',
  min: 0,
  max: 150000,
...

step

Number

increment/decrement value for number field if spin is true


items: [{
  label: 'Salary',
  name: 'salary',
  value: 70000,
  spin: true,
  step: 1000,
  type: 'number',
  min: 0,
  max: 150000,
...
1

type

String

Type of field.


{
  label: 'Married',
  type: 'checkbox',
  name: 'married',
  value: true,
  labelAlign: 'right'
}

value

Mixed

Value of field.


items: [{
  label: 'Married',
  type: 'checkbox',
  name: 'married',
  value: true,
  labelAlign: 'right'
...

valueKey

String

Combo data key to associate as value.


items: [{
  type: 'combo',
  label: 'Country',
  name: 'country',
  data: comboData,
  displayKey: 'country',
  valueKey: 'index',
  value: 0
...