Home

Welcome to the formbuilder wiki!

Examples

Example 1: Creating a FormBuilder instance with predefined data

One use-case that most developers will encounter is that of the end-user building a form, saving it, leaving the page and needs to edit the same form. In other words: an edit mode of existing forms. This is done by the following snippet:

fb = new Formbuilder({
  selector: '.fb-main',
  bootstrapData: [{"field_type": "date", "required": true, "label": "Date", "field_options": {}, "cid": "date0"}]
});

The 'bootstrapData' option sets the fields that need to be preloaded. Note that the save event dumps JSON like so:

{"fields": [{"field_type": "date", "required": true, "label": "datum", "field_options": {}, "cid": "c2"}]}

So the round trip from save to load requires you to get the value for the 'fields' key.

Example 2: adding the 'name' attribute

Form fields usually have a 'name' attribute. To enable editing this attribute on a form, instead of using the generated 'cid' attribute, override the formbuilder template 'edit/common' like so:

Formbuilder["templates"]["edit/common"] = function(obj) {
  obj || (obj = {});
  var __t, __p = '', __e = _.escape;
  with (obj) {
    __p += '<label>Name</label> ' +
      '<input type=\'text\' data-rv-input=\'model.name\' />\n' +          
      '<div class=\'fb-edit-section-header\'>Label</div>\n\n<div class=\'fb-common-wrapper\'>\n' +
      '<div class=\'fb-label-description\'>\n    ' +
      ((__t = ( Formbuilder.templates['edit/label_description']() )) == null ? '' : __t) +
      '\n  </div>\n  <div class=\'fb-common-checkboxes\'>\n    ' +
      ((__t = ( Formbuilder.templates['edit/checkboxes']() )) == null ? '' : __t) +
      '\n  </div>\n  <div class=\'fb-clear\'></div>\n</div>\n';
    
  }
  return __p
};

You can do this in your own JS files, after formbuilder.js has been loaded. When using jQuery for example 'jQuery.ready' is a nice place for it.