Docs
API
  • Fields

    Fields types

    button, checkbox, combo, date, hidden, html, 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
    },{
    ...
    

    html

    String

    html field type.

    
    items: [{
      type: 'html',
      value: [
        '<b>Kia Sportage</b><br>',
        '<img src="img/kia-sportage.png">'
      ].join("")
    },{
    ...
    

    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

    cls

    String

    The CSS class that will be added to field.
    It is used for custom styling field.

    
    items: [{
      type: 'string',
      label: 'Name',
      cls: 'field-name'
    },{
    ...
    }]
    

    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

    columns

    Number

    It is used only for radio field.
    It defines number of columns to place radio-s.

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

    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){
          
        }
      }]
    },{
    ...
    
    countries.json
    {
      "data": [
        {"index": 0, "country": "Canada"},
        {"index": 1, "country": "Finland"},
        {"index": 2, "country": "France"},
        {"index": 3, "country": "Japan"},
        {"index": 4, "country": "UK"},
        {"index": 5, "country": "USA"}
      ]
    }
    

    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'
      }]
    },{
    ...
    

    disabled

    Boolean

    Disable field.

    
    items: [{
      label: 'Name',    
      name: 'name',
      disabled: true
    }]
    ...
    //Enable field
    field.enable();
    
    //Disable field
    field.disable();
    

    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 enables/disable editing 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',
    },{
    ...
    

    enableToggle

    Boolean

    It is used only for field button.
    Enables toggle for button.

    
    ...
    items: [{
      type: 'button'
      enableToggle: true,
      label: 'active',
      name: 'active',
      pressed: true,
      handler: function(b){
        b.toggle();
      }
    },{
    ...
    

    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;
        }
      }
    ...
    

    handler

    Function

    Item handler on item click.
    It is used only for button type.

    
    items: [{
      label: 'Name',
      type: 'button',
      name: 'name',
      buttonText: 'Button'
      handler: function(){}
    },{
    ...
    }]
    

    hidden

    Boolean

    If set to true than field is hidden.

    
    tbar: [{
      type: 'number',
      id: 'employee',
      hidden: true,
      value: 1
    },{
    ...
    }]
    

    id

    String

    If to set id, it will be possible to get link on widget over Fancy.getWidget.

    
    tbar: [{
      type: 'number',
      id: 'employee',
      value: 1
    },{
    ...
    }] 
    
    ...
    var numberField = Fancy.getWidget('employee'),
      newValue = numberField.get() + 2;
    
    numberField.set(newValue);
    

    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'
      }]
    },{
    

    inputHeight

    Number

    Field input height. It influence only on fields with input element inside.

    
    ...
    items: [{
      label: 'Salary',
      type: 'number',
      name: 'salary',
      inputHeight: 35
    },{
    ...
    

    itemCheckBox

    Boolean

    Adds checkboxes for filter combo list.

    
    },{
      type: 'combo',
      label: 'Country',
      name: 'country',
      multiSelect: true,
      itemCheckBox: true,
      data: [{
    	index: 0,
    	country: 'USA'
      }, {
    	index: 1,
    	country: 'Canada'
      }],
      displayKey: 'country',
      valueKey: 'index'
    },{
    
    true

    inputHeight

    Number

    Field input height. It influence only on fields with input element inside.

    
    ...
    items: [{
      label: 'Salary',
      type: 'number',
      name: 'salary',
      inputHeight: 35
    },{
    ...
    

    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

    leftTpl

    String

    Template for left input element.

    This property is presented for only combo field.

    
    ...
    items: [{
      width: 300,
      label: 'Phone',
      displayKey: 'country',
      valueKey: 'country',
      itemCheckBox: true,
      value: 'UK',
      emptyText: 'Select Language',
      leftTpl: '<span class="flag {cls}"></span><span class="phone-code">{code}</span>',
      leftWidth: 55,
      displayTpl: '<span class="flag {cls}"></span> <span class="phone-code">{code}</span> <span class="country">{country}</span>',
      listItemTpl: '<span class="flag {cls}"></span> <span class="phone-code">{code}</span> <span class="country">{country}</span>',
      data: [{
        index: 'uk',
    	country: 'UK',
    	code: '+44',
    	cls: 'flag-uk'
      },{
    	index: 'in',
    	country: 'India',
    	code: '+91',
    	cls: 'flag-in'
      },{
    	index: 'usa',
    	country: 'USA',
    	code: '+1',
    	cls: 'flag-usa'
      },{
    	index: 'ja',
    	country: 'Japan',
    	code: '+81',
    	cls: 'flag-ja'
      }];
    },{
    ...
    
    undefined

    leftWidth

    Number

    Width for for left input element.

    This property is presented for only combo field and requires leftTpl.

    
    ...
    items: [{
      width: 300,
      label: 'Phone',
      displayKey: 'country',
      valueKey: 'country',
      itemCheckBox: true,
      value: 'UK',
      emptyText: 'Select Language',
      leftTpl: '<span class="flag {cls}"></span><span class="phone-code">{code}</span>',
      leftWidth: 55,
      displayTpl: '<span class="flag {cls}"></span> <span class="phone-code">{code}</span> <span class="country">{country}</span>',
      listItemTpl: '<span class="flag {cls}"></span> <span class="phone-code">{code}</span> <span class="country">{country}</span>',
      data: [{
        index: 'uk',
    	country: 'UK',
    	code: '+44',
    	cls: 'flag-uk'
      },{
    	index: 'in',
    	country: 'India',
    	code: '+91',
    	cls: 'flag-in'
      },{
    	index: 'usa',
    	country: 'USA',
    	code: '+1',
    	cls: 'flag-usa'
      },{
    	index: 'ja',
    	country: 'Japan',
    	code: '+81',
    	cls: 'flag-ja'
      }];
    },{
    ...
    
    20|0

    max

    Number|Date

    Maximum value.
    It is used only for number and date fields.

    
    ...
    items: [{
      type: 'number',
      label: 'Age',
      name: 'age',
      min: 0
      min: 100
    },{
    ...
    
    
    ...
    items: [{
      type: 'sale',
      label: 'Sale',
      name: 'sale',
      max: new Date() //today
    },{
    ...
    
    undefined

    maxListRows

    Number

    Max number of row in list.
    This property is used only for combo field.

    
    maxListRows: 7,
    
    9

    min

    Number|Date

    Minimal value.
    It is used only for number field.

    
    ...
    items: [{
      type: 'number',
      label: 'Age',
      name: 'age',
      min: 0
    },{
    ...
    
    
    ...
    items: [{
      type: 'sale',
      label: 'Sale',
      name: 'sale',
      max: new Date(), //today
      min: new Date(2017, 1, 1)
    },{
    ...
    
    undefined

    minListWidth

    Number

    The minimum width of list for combo.
    When field is not wide but values in list are long than for better look
    it is possible to set minListWidth

    
    minListWidth: 150,
    

    multiSelect

    Boolean

    Enables multiSelect for combo.

    
    },{
      type: 'combo',
      label: 'Country',
      name: 'country',
      multiSelect: true,
      itemCheckBox: true,
      data: [{
    	index: 0,
    	country: 'USA'
      }, {
    	index: 1,
    	country: 'Canada'
      }],
      displayKey: 'country',
      valueKey: 'index'
    },{
    

    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'
    },{
    ...
    

    showPassTip

    Boolean

    Special right side element to show/hide password.

    
    {
      label: 'Pass',
      name: 'pass',
      showPassTip: true,
      type: 'password'
    }
    
    false

    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

    subSearch

    Boolean

    Enables search field in list with values.
    This property disables editable property.
    It is used only for combo type.

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

    tabIndex

    Number

    Sets a DOM tabIndex for this field.
    tabIndex may be set to -1 in order to remove the field from the tab rotation.
    Available for fields with input.

    
    {
      label: 'Age',
      type: 'number',
      name: 'age',
      tabIndex: 2
    }
    
    undefined

    tip

    String|Function

    Tip of field.

    
    {
      label: 'Name',
      name: 'name',
      tip: 'Name'
    }
    
    
    {
      label: 'Name',
      name: 'name',
      tip: function(field, value, label){
        return field.label;
      }
    }
    
    undefined

    type

    String

    Type of field.

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

    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
    ...
    

    vtype

    Mixed

    Validation.

    
    },{
      name: 'age',
      label: 'Age',
      type: 'number',
      vtype: {
        before: ['notempty', 'notnan'],
        type: 'max',
        param: 70
      }
    }]
    
    
    },{
      name: 'email',
      label: 'Email',
      vtype: 'email'
    },{
    

    width

    Number

    Field width.

    
    items: [{
      label: 'Name',
      width: 100,
      type: 'string',
      name: 'name',
      labelAlign: 'right'
    ...