Form Builder

• Introduction
• Basic Example

Provides a graphic user interface method for contructing forms.

---

Getting Started

First load the seed and CSS files, if you haven't yet.

<script src="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="https://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

Then initialize AlloyUI and load the Form Builder module.

YUI().use(
  'aui-form-builder',
  function (Y) {
    // code goes here
  }
);

---

Using Form Builder

Create an HTML element to house your Form Builder.

<div id="myFormBuilder"></div>

Then initialize a new instance of Form Builder using your element as the boundingBox and render it.

YUI().use(
  'aui-form-builder',
  function(Y) {
    new Y.FormBuilder(
      {
        boundingBox: '#myFormBuilder'
      }
    ).render();
  }
);

When Form Builder is first initialized, it contains no available fields, such elements must be specified in the Form Builder under availableFields. Lets make text fields and checkboxes available.

YUI().use(
  'aui-form-builder',
  function(Y) {
    new Y.FormBuilder(
      {
        availableFields: [
          {
            iconClass: 'form-builder-field-icon-text',
            label: 'Text',
            type: 'text'
          },
          {
            iconClass: 'form-builder-field-icon-checkbox',
            lebel: 'Checkbox',
            type: 'checkbox'
          }
        ],
        boundingBox: '#myFormBuilder'
      }
    ).render();
  }
);

---

Configuring Form Builder

Additional configuration includes setting a field type to unique (making that field type only usable once), setting the width of the element, and specifying which attributes of the element are read only.

YUI().use(
  'aui-form-builder',
  function(Y) {
    new Y.FormBuilder(
      {
        availableFields: [
          {
            iconClass: 'form-builder-field-icon-text',
            label: 'Text',
            readOnlyAttributes: ['name'],
            type: 'text',
            unique: true,
            width: 100
          }
        ],
        boundingBox: '#myFormBuilder'
      }
    ).render();
  }
);

Predefined fields can be specified in the Form Builder so that fields are already included in the form on load.

YUI().use(
  'aui-form-builder',
  function(Y) {
    new Y.FormBuilder(
      {
        boundingBox: '#myFormBuilder',
        fields: {
          {
            label: 'City',
            predefinedValue: 'Chicago',
            type: 'text'
          }
        }
      }
    ).render();
  }
);