Button field Options

All options are optional and can be left empty

Name Type Default Description
namestringlowercase label and replace spaces with '_'

no label -> name is generated i.e. 'f1'
This value is is the variable name used
labelstring | boolfield.nameThis is the label displayed for the field, if you want to hide the label then set this to false

The string can also contain mustache i.e.
'My choice {{value}}'
valuestring | function''Function will run once at instantiation
helpstring''This text is used to provide context or help in filling out the field
columnsinteger12The form is divided into a grid 12 columns wide, this is setting how many of those columns to display this element at, using this you can make milti-column forms
targetselector | nodeIf the target is not set then the field is appended to the parent element which is usually the main form but may be a fieldset
showconditiontrueThis option controls whether this field should be visible to the user, allowing for fields to only be used if certain conditions are met
editconditiontrueSimilar to show but this option controls whether the field is enabled for interaction

examples


Name

new gform({fields: [
    {type: 'button', name: 'name_example'},
    {type: 'button', label: 'Label Example'},	
    {type: 'button'}
]})


Label

new gform({fields: [
{
    type: 'button', 
    label: 'Label Example'
}
]})


Value

new gform({fields: [
{
  type: 'button',
  label: 'Value Example',
  value: 'This is a test'
}
]})


Help

new gform({fields: [
  {
    type: 'button',
    label: 'Help Example',
    help: 'This is some help text'
  }
]})


Columns

new gform({fields: [
  {
    type: 'button',
    label: 'Column 1',
    columns: 4
  },
  {
    type: 'button',
    label: 'Column 2',
    columns: 8
  }
]})


Target

new gform({fields: [
    {type: 'button', name: 'name_example'},
    {type: 'button', label: 'Label Example'},	
    {type: 'button'}
]})


Show

new gform({fields: [
  {
    label: 'Show button Field',
    name: 'show',
    type: 'checkbox'
  },
  {
    type: 'button',
    label: 'button Field',
    show:[{
      type: 'matches',
      name: 'show',
      value: true
    }]
  }
]})


Edit

new gform({fields: [
  {
    label: 'Edit button Field',
    name: 'edit',
    type: 'checkbox'
  },
  {
    type: 'button',
    label: 'button Field',
    edit:[{
      type: 'matches',
      name: 'edit',
      value: true
    }]
  }
]})


© Escher Labs 2019