... field note

formBuilder 2.0 Released

date April 29, 2017 author Kevin

Version 2.0 came with a large number of features, fixes and changes. In this post we’ll review some of the more critical- potentially app break changes and highlight some of the new features.

Migration Tips:

Initialization

The first major change from v1.x to v2.x is the way the plugin is initialized. Previously it was recommended to initialize formBuilder like so:

const formBuilder = $(container).formBuilder().data('formBuilder');

No longer is data('formBuilder') needed and including it may even break your app.

dataType

The default dataType has changed from 'xml' to 'json'. If your app uses xml you should now set the dataType option to 'xml'.

News features:

Custom Fields

One of the most requested features (second only to columns) is the ability to add custom fields. V2.0 added the ability to define fields using 2 options, templates and fields. Check out the documentation for these options for more info.

Automatic i18n

formBuilder has been translatable from the very beginning but previously it was a tedious task where translated strings were passed through options on initialization. Version 2.0 brought automatic translation, requiring setting only a locale via options for the most popular languages. Here is a list of currently supported languages:

  • ar-TN Arabic Tunisian
  • de-DE German
  • en-US English (US)
  • es-ES Spanish (Spain)
  • fa-IR Persian (Iran)
  • fi-FI Finnish
  • fr-FR French (France)
  • it-IT Italian
  • nb-NO Norwegian
  • nl-NL Dutch (Netherlands)
  • pt-BR Portuguese (Brasil)
  • ro-RO Romanian
  • ru-RU Russian
  • tr-TR Turkish
  • vi-VN Vietnamese
  • zh-CN Chinese (Simplified, China)
  • zh-TW Chinese (Traditional, Taiwan)

If you don’t see your language in the list feel free to open a pull-request to the languages repo, all submissions are welcome.

Options

  • actionButtons – view
    • define custom action buttons to appear below the control list example:
    • [{ label: 'revertChanges', // String or key id: 'revert', // button id className: 'btn btn-default', events: { click: revertChanges(formData) // event callback } }]
  • disabledActionButtons – view
    • accepts an array of buttons to disable ie ['data']
  • fields – view
    • define custom fields to appear in the control list, resolves #47
  • templates
    • define or redefine the output for the fields resolves #342, #resolves #171
  • onSave, save callback
  • onClearAll, clearAll callback
  • subtypes, define custom subtypes resolves #359, resolves #192