Show:

A base class for A.FormBuilder.

Constructor

A.FormBuilder

(
  • config
)

Parameters:

  • config Object

    Object literal specifying widget configuration properties.

Example:

<div id="myFormBuilder"></div>
                                    
YUI().use(
                                     'aui-form-builder',
                                     function(Y) {
                                       new Y.FormBuilder(
                                         {
                                           availableFields: [
                                             {
                                               iconClass: 'form-builder-field-icon-text',
                                               id: 'uniqueTextField',
                                               label: 'Text',
                                               readOnlyAttributes: ['name'],
                                               type: 'text',
                                               unique: true,
                                               width: 75
                                             },
                                             {
                                               hiddenAttributes: ['tip'],
                                               iconClass: 'form-builder-field-icon-textarea',
                                               label: 'Textarea',
                                               type: 'textarea'
                                             },
                                             {
                                               iconClass: 'form-builder-field-icon-checkbox',
                                               label: 'Checkbox',
                                               type: 'checkbox'
                                             },
                                             {
                                               iconClass: 'form-builder-field-icon-button',
                                               label: 'Button',
                                               type: 'button'
                                             },
                                             {
                                               iconClass: 'form-builder-field-icon-select',
                                               label: 'Select',
                                               type: 'select'
                                             },
                                             {
                                               iconClass: 'form-builder-field-icon-radio',
                                               label: 'Radio Buttons',
                                               type: 'radio'
                                             },
                                             {
                                               iconClass: 'form-builder-field-icon-fileupload',
                                               label: 'File Upload',
                                               type: 'fileupload'
                                             },
                                             {
                                               iconClass: 'form-builder-field-icon-fieldset',
                                               label: 'Fieldset',
                                               type: 'fieldset'
                                             }
                                           ],
                                           boundingBox: '#myFormBuilder',
                                           fields: [
                                             {
                                               label: 'City',
                                               options: [
                                                 {
                                                   label: 'Ney York',
                                                   value: 'new york'
                                                 },
                                                 {
                                                   label: 'Chicago',
                                                   value: 'chicago'
                                                 }
                                               ],
                                               predefinedValue: 'chicago',
                                               type: 'select'
                                             },
                                             {
                                               label: 'Colors',
                                               options: [
                                                 {
                                                   label: 'Red',
                                                   value: 'red'
                                                 },
                                                 {
                                                   label: 'Green',
                                                   value: 'green'
                                                 },
                                                 {
                                                   label: 'Blue',
                                                   value: 'blue'
                                                 }
                                               ],
                                               type: 'radio'
                                             }
                                           ]
                                         }
                                       ).render();
                                     }
                                    );
                                    

Index

Methods

Properties

Methods

_addColMoveButton

(
  • colNode
  • rowNode
)
protected

<p>Overrides default <code>addColMoveButton</code> attribute.</p>

Parameters:

_addColMoveTarget

(
  • col
)
protected

<p>Overrides default <code>addColMoveTarget</code> attribute.</p>

Parameters:

_addFieldsChangeListener

() protected

Attach the fieldsChange event listener from all layouts on the layouts attribute.

_addNestedField

(
  • field
  • nested
  • index
)
protected

Adds a field into field's nested list and normalizes the columns height.

Parameters:

  • field A.FormField

    The Field with nested list that will receive the field

  • nested A.FormField

    Field to add as nested

  • index Number

    The position where the nested field should be added

_addPage

() protected

Adds a new page on form builder.

_afterActivePageNumberChange

() protected

Fired after the activePageNumber change.

_afterDestroyFieldToolbar

() protected

Fired after the Field Toolbar be destroyed.

_afterFieldFocusedChange

(
  • event
)
protected

Triggers after field focused change.

Parameters:

  • event Object

_afterFieldsChange

(
  • event
)
protected

Fired after the form-builder-field-list:fieldsChange event is triggered.

Parameters:

_afterFieldSettingsModalHide

() protected

Fired when the field settings modal is hidden.

_afterFieldSettingsModalSave

(
  • event
)
protected

Fired when the field settings modal is saved.

Parameters:

_afterFieldTypesChange

(
  • event
)
protected

<p>Fired after the <code>fieldTypes</code> attribute is set.</p>

Parameters:

_afterLayoutBuilderColsChange

() protected

<p>Executed after the <code>layout:rowsChange</code> is fired.</p>

_afterLayoutBuilderMoveEnd

() protected

<p>Executed after the <code>layout-builder:moveEnd</code> is fired.</p>

_afterLayoutBuilderMoveStart

(
  • event
)
protected

<p>Executed after the <code>layout-builder:moveStart</code> is fired.</p>

Parameters:

_afterLayoutBuilderRender

() protected

<p>Fired after this widget is rendered.</p>

_afterLayoutColsChange

() protected

Fired after the layout-row:colsChange event is triggered.

_afterLayoutRowsChange

(
  • event
)
protected

Fired after the layout:rowsChange event is triggered.

Parameters:

_afterLayoutsChange

(
  • event
)
protected

Fires after layouts changes.

Parameters:

_afterSelectedFieldsSetAdd

(
  • event
)
protected

Triggers after adding selected fields to a A.LinkedSet instance.

Parameters:

  • event Object

_afterSelectedFieldsSetRemove

(
  • event
)
protected

Triggers after removing selected fields from the A.LinkedSet instance.

Parameters:

  • event Object

_afterSelectFieldType

(
  • event
)
protected

<p>Fired after a field type is selected by the user.</p>

Parameters:

_afterUniqueFieldsMapPut

(
  • event
)
protected

Triggers after adding unique fields to a A.Map instance.

Parameters:

  • event Object

_afterUniqueFieldsMapRemove

(
  • event
)
protected

Triggers after removing unique fields from the A.Map instance.

Parameters:

  • event Object

_afterUpdatePageContentChange

(
  • event
)
protected

Fired after the activePageNumber change.

Parameters:

_bindMoveRowEvents

() protected

<p>Bind events related to the cancel move row funcionality.</p>

_checkActiveLayoutHasFieldType

(
  • fieldType
)
Boolean protected

<p>Check on all created fields if there is one of the same type of the parameter.</p>

Parameters:

  • fieldType Object

Returns:

Boolean:

_checkLastRow

(
  • layout
)
protected

<p>Checks if the last row has more than one col or if it has at least one field, if true a new row is created and set on the last position.</p>

Parameters:

_checkLayoutsLastRow

() protected

Executes the '_checkLastRow' funciton for each layouts on 'layouts' attribute.

_checkListHasFieldType

(
  • fieldList
  • fieldType
)
Boolean protected

<p>Checks on all fields of a field list if there is one of the same type of the parameter.</p>

Parameters:

  • fieldList A.FormBuilderFIeldList
  • fieldType Object

Returns:

Boolean:

_chooseColMoveTarget

(
  • originalFn
  • cutButton
  • col
)
protected

<p>Overrides default <code>chooseColMoveTarget</code> attribute.</p>

Parameters:

_clickColMoveTarget

(
  • moveTarget
)
protected

<p>Overrides default <code>clickColMoveTarget</code> attribute.</p>

Parameters:

_clickRemoveRow

(
  • row
)
Boolean protected

<p>Overrides default <code>clickRemoveRow</code> attribute. Check if the parameter <code>row</code> has fields.</p>

Parameters:

Returns:

Boolean:

_cloneField

(
  • field
  • deep
)
Object protected

Clones a field.

Parameters:

  • field Object
  • deep Object

Returns:

Object:

_createLastRow

(
  • layout
)
protected

<p>Creates a new row in the last position.</p>

Parameters:

_detachCancelMoveFieldEvents

() protected

<p>Detaches events related to the cancel move field funcionality.</p>

_detachCancelMoveRowEvents

() protected

<p>Detaches events related to the cancel move row funcionality.</p>

_disableAddFields

() protected

<p>Disable add fields functionality.</p>

_dropField

(
  • dragNode
)
protected

Executes when the field is dropped.

Parameters:

  • dragNode Object

_enableAddFields

() protected

<p>Enable add fields functionality.</p>

_forceRemoveRow

() protected

<p>Removes a row even with field.</p>

_getFieldId

(
  • field
)
String protected

Gets the field id.

Parameters:

  • field Object

Returns:

String:

_getFieldNodeIndex

(
  • fieldNode
)
protected

Gets the index from the field node.

Parameters:

  • fieldNode Object

_getLastRow

(
  • layout
)
A.LayoutRow protected

<p>Gets the last row.</p>

Parameters:

Returns:

_getPageManagerInstance

(
  • config
)
A.FormBuilderPages protected

Form Builder Pages instance initializer. Receives a custom object of configurations or using default configurations instead.

Parameters:

  • config Object

Returns:

_handleCreateEvent

(
  • field
)
protected

Fire event of create a field.

Parameters:

_handleEditEvent

(
  • field
)
protected

Fire event of edit a field.

Parameters:

_handleRemoveEvent

(
  • field
)
protected

Fire event of remove a field.

Parameters:

_hasFieldType

(
  • fieldType
  • field
)
Boolean protected

<p>Checks if the given field is of the given field type.</p>

Parameters:

Returns:

Boolean:

_initRemoveConfirmationModal

() protected

<p>Create a confirmation modal to be used when a remove row button from a row with fields is clicked.</p>

_isColumnEmpty

(
  • col
)
Boolean protected

<p>Checks if the given column is empty.</p>

Parameters:

Returns:

Boolean:

_makeEmptyFieldList

(
  • col
)
protected

Turns the given column into an empty form builder column.

Parameters:

_onCancel

(
  • event
)
protected

Triggers on cancel. Unselect fields, stops the event propagation and prevents the default event behavior.

Parameters:

  • event Object

_onClickAddField

(
  • event
)
protected

Fired when the button for adding a new field is clicked.

Parameters:

_onClickField

(
  • event
)
protected

Triggers when a field is clicked.

Parameters:

  • event Object

_onClickOutsideMoveColTarget

(
  • event
)
protected

<p>Fires when click event is triggered.</p>

Parameters:

_onClickOutsideMoveRowTarget

(
  • event
)
protected

<p>Fires when click event is triggered.</p>

Parameters:

_onDragEnd

(
  • event
)
protected

Triggers when the drag ends.

Parameters:

  • event Object

_onDragMouseDown

(
  • event
)
protected

Triggers when the drag mouse down.

Parameters:

  • event Object

_onDragStart

(
  • event
)
protected

Triggers when the drag starts.

Parameters:

  • event Object

_onEscKeyPressMoveTarget

() protected

<p>Fires when esc key press event is triggered.</p>

_onFocus

(
  • event
)
protected

Fired when some node is focused inside content box.

Parameters:

_onFormBuilderToolbarHasAddedToField

(
  • event
)
protected

<p>Fired when mouse enters a toolbar's field.</p>

Parameters:

_onMouseOutField

(
  • event
)
protected

Triggers when the mouse is out a field.

Parameters:

  • event Object

_onMouseOverField

(
  • event
)
protected

Triggers when the mouse is over a field.

Parameters:

  • event Object

_onSave

(
  • event
)
protected

Triggers on saving a field. First checks if the field is being edited, if it is then sets the data and syncs on the UI.

Parameters:

  • event Object

_openNewFieldPanel

(
  • target
)
protected

Opens a panel to select a new field type.

Parameters:

_removeColMoveButtons

() protected

<p>Overrides default <code>removeColMoveButtons</code> attribute.</p>

_removeColMoveTargets

() protected

<p>Overrides default <code>removeColMoveTargets</code> attribute.</p>

_removeFieldsChangeListener

() protected

Detach the fieldsChange event listener from all layouts on the layouts attribute.

_removeLayout

(
  • event
)
protected

Remove a layout from the form builder. The paramenter event has the layout index to be removed.

Parameters:

_removeLayoutCutColButtons

() protected

<p>Remove original layout cut col buttons.</p>

_renderContentBox

() protected

Render the form builder UI parts

_renderEmptyColumns

() protected

Renders some content inside the empty columns of the current layout.

_renderTabs

() protected

Overrides PropertyBuilderSettings's _renderTabs method, which renders the builder's tabs.

_selectFirstValidMoveTarget

() protected

<p>Find and focus on first valid move target.</p>

_setAvailableFields

(
  • val
)
Array protected

Set list of available fields by checking if a field is a A.PropertyBuilderAvailableField instance. If not creates a new instance of A.FormBuilderAvailableField.

Parameters:

  • val Object

Returns:

Array:

_setFieldsSortableListConfig

(
  • val
)
protected

Set the fieldsSortableListConfig attribute.

Parameters:

  • val Object

_setFieldToolbarConfig

(
  • val
)
Object

Sets the fieldToolbar attribute.

Parameters:

  • val Object

Returns:

Object:

_setFieldTypes

(
  • val
)
A.FormBuilderFieldType protected

<p>Sets the <code>fieldTypes</code> attribute.</p>

Parameters:

_setLayouts

(
  • val
)
protected

Sets the layouts attribute.

Parameters:

  • val A.Array

_setMoveButtonData

(
  • colNode
)
protected

<p>Show or hide move item in toolbar.</p>

Parameters:

_setupAvailableFieldsSortableList

() protected

Setup a A.SortableList of available fields.

_setupFieldsSortableList

() protected

Setup a A.SortableList of fields.

_syncUniqueField

(
  • field
)
protected

Sync unique fields.

Parameters:

  • field Object

_uiSetAllowRemoveRequiredFields

(
  • val
)
protected

Set the allowRemoveRequiredFields attribute on the UI.

Parameters:

  • val Object

_unregisterFieldType

(
  • fieldType
)
protected

<p>Removes a single given field type from this form builder.</p>

Parameters:

_unregisterFieldTypeByIndex

(
  • index
)
protected

<p>Unregisters the field type at the given index.</p>

Parameters:

_updatePageContent

() protected

Fired after the activePageNumber change.

_updateUniqueFieldType

() protected

<p>Enable or disable unique FieldTypes based on created Fields.</p>

_valueFieldTypesModal

() A.FormBuilderFieldTypesModal protected

<p>Default value for the modal displayed to select a field.</p>

addNestedField

(
  • field
)

Adds a nested field to the given field.

Parameters:

bindUI

() protected

Bind the events for the A.FormBuilder UI. Lifecycle.

closeEditProperties

()

Selects the field tab and disables the setting tabs.

createField

(
  • config
)
Object

Creates a field and returns its configuration.

Parameters:

  • config Object

Returns:

Object:

destructor

() protected

Destructor lifecycle implementation for the A.FormBuilder class. Lifecycle.

disableUniqueFieldType

(
  • field
)

<p>Disables unique fields for the field class that the given field is an instance of.</p>

Parameters:

duplicateField

(
  • field
)

Gets the current field index and then clones the field. Inserts the new one after the current field index, inside of the current field parent.

Parameters:

  • field Object

editField

(
  • field
)

Opens the settings panel for editing the given field.

Parameters:

editField

(
  • field
)

Checks if the current field is a A.FormBuilderField instance and selects it.

Parameters:

  • field Object

findTypeOfField

(
  • field
)

<p>Finds the type of the given field.</p>

Parameters:

getActiveLayout

() A.LayoutPage

Returns the active LayoutPage.

Returns:

A.LayoutPage:

getFieldClass

(
  • type
)
Object | null

Gets the field class based on the A.FormBuilder type. If the type doesn't exist, logs an error message.

Parameters:

  • type Object

Returns:

Object | null:

getFieldProperties

(
  • field
)
Array

Gets a list of properties from the field.

Parameters:

  • field Object

Returns:

Array:

getFieldRow

(
  • field
)
Node

Returns the row of the given field.

Parameters:

Returns:

Node:

The row where is the field parameter

hideFieldsPanel

()

<p>Hides the fields modal.</p>

initializer

() protected

Construction logic executed during the A.FormBuilder instantiation. Lifecycle.

initializer

() protected

Construction logic executed during A.FormBuilder instantiation. Lifecycle.

insertField

(
  • field
  • index
  • parent
)

Removes field from previous parent and inserts into the new parent.

Parameters:

  • field Object
  • index Object
  • parent Object

openEditProperties

(
  • field
)

Enables the settings tab.

Parameters:

  • field Object

plotField

(
  • field
  • container
)

Renders a field in the container.

Parameters:

  • field Object
  • container Object

plotFields

(
  • fields
  • container
)

Renders a list of fields in the container.

Parameters:

  • fields Object
  • container Object

registerFieldTypes

(
  • typesToAdd
)

<p>Adds a the given field types to this form builder.</p>

Parameters:

  • typesToAdd Array | Object | A.FormBuilderFieldType

    <p>This can be either an array of items or a single item. Each item should be either an instance of <code>A.FormBuilderFieldType</code>, or the configuration object to be used when instantiating one.</p>

removeField

(
  • field
)

Removes the given field from the form builder.

Parameters:

renderUI

() protected

Renders the A.FormBuilder UI. Lifecycle.

selectFields

(
  • fields
)

Adds fields to a A.LinkedSet instance.

Parameters:

  • fields Object

showFieldSettingsPanel

(
  • field
  • typeName
)

Shows the settings panel for the given field.

Parameters:

  • field A.FormField
  • typeName String

    The name of the field type.

showFieldsPanel

()

<p>Shows the fields modal.</p>

simulateFocusField

(
  • field
)

Triggers a focus event in the current field and a blur event in the last focused field.

Parameters:

  • field Object

syncUI

() protected

Syncs the UI. Lifecycle.

syncUI

() protected

Sync the A.FormBuilder UI. Lifecycle.

unregisterFieldTypes

(
  • typesToRemove
)

<p>Removes the given field types from this form builder.</p>

Parameters:

  • typesToRemove Array | String | A.FormBuilderFieldType

    <p>This can be either an array of items, or a single one. For each item, if it's a string, the form builder will remove all registered field types with a field class that matches it. For items that are instances of <code>A.FormBuilderFieldType</code>, only the same instances will be removed.</p>

unselectFields

(
  • fields
)

Removes fields from the A.LinkedSet instance.

Parameters:

  • fields Object

Properties

ATTRS

Object static

Static property used to define the default attribute configuration for the A.FormBuilder.

ATTRS

Object static

Static property used to define the default attribute configuration for the A.FormBuilder.

CSS_PREFIX

String static

Static property provides a string to identify the CSS prefix.

EXTENDS

String static

Static property used to define which component it extends.

FIELDS_TAB

Number static

Static property used to define the fields tab.

Default: 0

NAME

String static

Static property provides a string to identify the class.

SETTINGS_TAB

Number static

Static property used to define the settings tab.

Default: 1

UI_ATTRS

Array static

Static property used to define the UI attributes.

Attributes

allowRemoveRequiredFields

Boolean

Checks if removing required fields is permitted or not.

Default: false

enableEditing

Boolean

Enables a field to be editable.

Default: true

fieldsSortableListConfig

Object

Collection of sortable fields.

Default: null

fieldToolbarConfig

Object

A configuration object for the creation of the A.FormBuilderFieldToolbar instance to be used for the form builder field toolbars.

fieldTypes

Array

<p>The collection of field types that can be selected as fields for this form builder.</p>

Default: []

fieldTypesModal

A.FormBuilderFieldTypesModal

<p>The modal that will be used to select a field type.</p>

layouts

Array

The layouts where the forms fields will be rendered.

Default: [A.Layout]

pages

A.FormBuilderPages

A Form Builder Pages instance.

strings

Object

Collection of strings used to label elements of the UI.

strings

Object

Collection of strings used to label elements of the UI.

tabView

Object

Stores an instance of A.TabView.

Default: null