A.FormBuilder Class
A base class for A.FormBuilder.
Constructor
A.FormBuilder
-
config
Parameters:
-
configObjectObject 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
- _addColMoveButton
- _addColMoveTarget
- _addFieldsChangeListener
- _addNestedField
- _addPage
- _afterActivePageNumberChange
- _afterDestroyFieldToolbar
- _afterFieldFocusedChange
- _afterFieldsChange
- _afterFieldSettingsModalHide
- _afterFieldSettingsModalSave
- _afterFieldTypesChange
- _afterLayoutBuilderColsChange
- _afterLayoutBuilderMoveEnd
- _afterLayoutBuilderMoveStart
- _afterLayoutBuilderRender
- _afterLayoutColsChange
- _afterLayoutRowsChange
- _afterLayoutsChange
- _afterSelectedFieldsSetAdd
- _afterSelectedFieldsSetRemove
- _afterSelectFieldType
- _afterUniqueFieldsMapPut
- _afterUniqueFieldsMapRemove
- _afterUpdatePageContentChange
- _bindMoveRowEvents
- _checkActiveLayoutHasFieldType
- _checkLastRow
- _checkLayoutsLastRow
- _checkListHasFieldType
- _chooseColMoveTarget
- _clickColMoveTarget
- _clickRemoveRow
- _cloneField
- _createLastRow
- _detachCancelMoveFieldEvents
- _detachCancelMoveRowEvents
- _disableAddFields
- _dropField
- _enableAddFields
- _forceRemoveRow
- _getFieldId
- _getFieldNodeIndex
- _getLastRow
- _getPageManagerInstance
- _handleCreateEvent
- _handleEditEvent
- _handleRemoveEvent
- _hasFieldType
- _initRemoveConfirmationModal
- _isColumnEmpty
- _makeEmptyFieldList
- _onCancel
- _onClickAddField
- _onClickField
- _onClickOutsideMoveColTarget
- _onClickOutsideMoveRowTarget
- _onDragEnd
- _onDragMouseDown
- _onDragStart
- _onEscKeyPressMoveTarget
- _onFocus
- _onFormBuilderToolbarHasAddedToField
- _onMouseOutField
- _onMouseOverField
- _onSave
- _openNewFieldPanel
- _removeColMoveButtons
- _removeColMoveTargets
- _removeFieldsChangeListener
- _removeLayout
- _removeLayoutCutColButtons
- _renderContentBox
- _renderEmptyColumns
- _renderTabs
- _selectFirstValidMoveTarget
- _setAvailableFields
- _setFieldsSortableListConfig
- _setFieldToolbarConfig
- _setFieldTypes
- _setLayouts
- _setMoveButtonData
- _setupAvailableFieldsSortableList
- _setupFieldsSortableList
- _syncUniqueField
- _uiSetAllowRemoveRequiredFields
- _unregisterFieldType
- _unregisterFieldTypeByIndex
- _updatePageContent
- _updateUniqueFieldType
- _valueFieldTypesModal
- addNestedField
- bindUI
- closeEditProperties
- createField
- destructor
- disableUniqueFieldType
- duplicateField
- editField
- editField
- findTypeOfField
- getActiveLayout
- getFieldClass
- getFieldProperties
- getFieldRow
- hideFieldsPanel
- initializer
- initializer
- insertField
- openEditProperties
- plotField
- plotFields
- registerFieldTypes
- removeField
- renderUI
- selectFields
- showFieldSettingsPanel
- showFieldsPanel
- simulateFocusField
- syncUI
- syncUI
- unregisterFieldTypes
- unselectFields
Properties
- ATTRS static
- ATTRS static
- CSS_PREFIX static
- EXTENDS static
- FIELDS_TAB static
- NAME static
- SETTINGS_TAB static
- UI_ATTRS static
Methods
_addColMoveButton
-
colNode -
rowNode
<p>Overrides default <code>addColMoveButton</code> attribute.</p>
_addColMoveTarget
-
col
<p>Overrides default <code>addColMoveTarget</code> attribute.</p>
Parameters:
-
colA.LayoutCol
_addFieldsChangeListener
()
protected
Attach the fieldsChange event listener from all layouts on the
layouts attribute.
_addNestedField
-
field -
nested -
index
Adds a field into field's nested list and normalizes the columns height.
Parameters:
-
fieldA.FormFieldThe Field with nested list that will receive the field
-
nestedA.FormFieldField to add as nested
-
indexNumberThe 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
Triggers after field focused change.
Parameters:
-
eventObject
_afterFieldsChange
-
event
Fired after the form-builder-field-list:fieldsChange event is triggered.
Parameters:
-
eventEventFacade
_afterFieldSettingsModalHide
()
protected
Fired when the field settings modal is hidden.
_afterFieldSettingsModalSave
-
event
Fired when the field settings modal is saved.
Parameters:
-
eventEventFacade
_afterFieldTypesChange
-
event
<p>Fired after the <code>fieldTypes</code> attribute is set.</p>
Parameters:
-
eventEventFacade
_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
<p>Executed after the <code>layout-builder:moveStart</code> is fired.</p>
Parameters:
-
eventEventFacade
_afterLayoutBuilderRender
()
protected
<p>Fired after this widget is rendered.</p>
_afterLayoutColsChange
()
protected
Fired after the layout-row:colsChange event is triggered.
_afterLayoutRowsChange
-
event
Fired after the layout:rowsChange event is triggered.
Parameters:
-
eventEventFacade
_afterSelectedFieldsSetAdd
-
event
Triggers after adding selected fields to a A.LinkedSet instance.
Parameters:
-
eventObject
_afterSelectedFieldsSetRemove
-
event
Triggers after removing selected fields from the A.LinkedSet
instance.
Parameters:
-
eventObject
_afterSelectFieldType
-
event
<p>Fired after a field type is selected by the user.</p>
Parameters:
-
eventEventFacade
_afterUniqueFieldsMapPut
-
event
Triggers after adding unique fields to a A.Map instance.
Parameters:
-
eventObject
_afterUniqueFieldsMapRemove
-
event
Triggers after removing unique fields from the A.Map instance.
Parameters:
-
eventObject
_afterUpdatePageContentChange
-
event
Fired after the activePageNumber change.
Parameters:
-
eventEventFacade
_bindMoveRowEvents
()
protected
<p>Bind events related to the cancel move row funcionality.</p>
_checkActiveLayoutHasFieldType
-
fieldType
<p>Check on all created fields if there is one of the same type of the parameter.</p>
Parameters:
-
fieldTypeObject
Returns:
_checkLastRow
-
layout
<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:
-
layoutA.Layout
_checkLayoutsLastRow
()
protected
Executes the '_checkLastRow' funciton for each layouts on 'layouts' attribute.
_checkListHasFieldType
-
fieldList -
fieldType
<p>Checks on all fields of a field list if there is one of the same type of the parameter.</p>
Parameters:
-
fieldListA.FormBuilderFIeldList -
fieldTypeObject
Returns:
_chooseColMoveTarget
-
originalFn -
cutButton -
col
<p>Overrides default <code>chooseColMoveTarget</code> attribute.</p>
Parameters:
-
originalFnFunction -
cutButtonNode -
colA.LayoutCol
_clickColMoveTarget
-
moveTarget
<p>Overrides default <code>clickColMoveTarget</code> attribute.</p>
Parameters:
-
moveTargetNode
_clickRemoveRow
-
row
<p>Overrides default <code>clickRemoveRow</code> attribute. Check if the parameter <code>row</code> has fields.</p>
Parameters:
-
rowA.LayoutRow
Returns:
_cloneField
-
field -
deep
Clones a field.
Parameters:
-
fieldObject -
deepObject
Returns:
_createLastRow
-
layout
<p>Creates a new row in the last position.</p>
Parameters:
-
layoutA.Layout
_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
Executes when the field is dropped.
Parameters:
-
dragNodeObject
_enableAddFields
()
protected
<p>Enable add fields functionality.</p>
_forceRemoveRow
()
protected
<p>Removes a row even with field.</p>
_getFieldId
-
field
Gets the field id.
Parameters:
-
fieldObject
Returns:
_getFieldNodeIndex
-
fieldNode
Gets the index from the field node.
Parameters:
-
fieldNodeObject
_getLastRow
-
layout
<p>Gets the last row.</p>
Parameters:
-
layoutA.Layout
Returns:
_getPageManagerInstance
-
config
Form Builder Pages instance initializer. Receives a custom object of configurations or using default configurations instead.
Parameters:
-
configObject
Returns:
_handleCreateEvent
-
field
Fire event of create a field.
Parameters:
-
fieldA.FormBuilderFieldBase
_handleEditEvent
-
field
Fire event of edit a field.
Parameters:
-
fieldA.FormBuilderFieldBase
_handleRemoveEvent
-
field
Fire event of remove a field.
Parameters:
-
fieldA.FormBuilderFieldBase
_hasFieldType
-
fieldType -
field
<p>Checks if the given field is of the given field type.</p>
Parameters:
-
fieldTypeA.FormBuilderFieldType -
fieldA.FormField
Returns:
_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
<p>Checks if the given column is empty.</p>
Parameters:
-
colA.LayoutCol
Returns:
_makeEmptyFieldList
-
col
Turns the given column into an empty form builder column.
Parameters:
-
colA.LayoutCol
_onCancel
-
event
Triggers on cancel. Unselect fields, stops the event propagation and prevents the default event behavior.
Parameters:
-
eventObject
_onClickAddField
-
event
Fired when the button for adding a new field is clicked.
Parameters:
-
eventEventFacade
_onClickField
-
event
Triggers when a field is clicked.
Parameters:
-
eventObject
_onClickOutsideMoveColTarget
-
event
<p>Fires when click event is triggered.</p>
Parameters:
-
eventEventFacade
_onClickOutsideMoveRowTarget
-
event
<p>Fires when click event is triggered.</p>
Parameters:
-
eventEventFacade
_onDragEnd
-
event
Triggers when the drag ends.
Parameters:
-
eventObject
_onDragMouseDown
-
event
Triggers when the drag mouse down.
Parameters:
-
eventObject
_onDragStart
-
event
Triggers when the drag starts.
Parameters:
-
eventObject
_onEscKeyPressMoveTarget
()
protected
<p>Fires when esc key press event is triggered.</p>
_onFocus
-
event
Fired when some node is focused inside content box.
Parameters:
-
eventEventFacade
_onFormBuilderToolbarHasAddedToField
-
event
<p>Fired when mouse enters a toolbar's field.</p>
Parameters:
-
eventEventFacade
_onMouseOutField
-
event
Triggers when the mouse is out a field.
Parameters:
-
eventObject
_onMouseOverField
-
event
Triggers when the mouse is over a field.
Parameters:
-
eventObject
_onSave
-
event
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:
-
eventObject
_openNewFieldPanel
-
target
Opens a panel to select a new field type.
Parameters:
-
targetNode
_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
Remove a layout from the form builder. The paramenter event has the
layout index to be removed.
Parameters:
-
eventEventFacade
_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
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:
-
valObject
Returns:
_setFieldsSortableListConfig
-
val
Set the fieldsSortableListConfig attribute.
Parameters:
-
valObject
_setFieldToolbarConfig
-
val
Sets the fieldToolbar attribute.
Parameters:
-
valObject
Returns:
_setFieldTypes
-
val
<p>Sets the <code>fieldTypes</code> attribute.</p>
Parameters:
-
valObject | A.FormBuilderFieldType
Returns:
_setLayouts
-
val
Sets the layouts attribute.
Parameters:
-
valA.Array
_setMoveButtonData
-
colNode
<p>Show or hide move item in toolbar.</p>
Parameters:
-
colNodeNode
_setupAvailableFieldsSortableList
()
protected
Setup a A.SortableList of available fields.
_setupFieldsSortableList
()
protected
Setup a A.SortableList of fields.
_syncUniqueField
-
field
Sync unique fields.
Parameters:
-
fieldObject
_uiSetAllowRemoveRequiredFields
-
val
Set the allowRemoveRequiredFields attribute on the UI.
Parameters:
-
valObject
_unregisterFieldType
-
fieldType
<p>Removes a single given field type from this form builder.</p>
Parameters:
-
fieldTypeString | A.FormBuilderFieldType
_unregisterFieldTypeByIndex
-
index
<p>Unregisters the field type at the given index.</p>
Parameters:
-
indexNumber
_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>
Returns:
addNestedField
-
field
Adds a nested field to the given field.
Parameters:
-
fieldA.FormBuilderFieldBase
bindUI
()
protected
Bind the events for the A.FormBuilder UI. Lifecycle.
closeEditProperties
()
Selects the field tab and disables the setting tabs.
createField
-
config
Creates a field and returns its configuration.
Parameters:
-
configObject
Returns:
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:
-
fieldA.FormField
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:
-
fieldObject
editField
-
field
Opens the settings panel for editing the given field.
Parameters:
-
fieldA.FormBuilderFieldBase
editField
-
field
Checks if the current field is a A.FormBuilderField instance and
selects it.
Parameters:
-
fieldObject
findTypeOfField
-
field
<p>Finds the type of the given field.</p>
Parameters:
-
fieldA.FormBuilderFieldBase
getActiveLayout
()
A.LayoutPage
Returns the active LayoutPage.
Returns:
getFieldClass
-
type
Gets the field class based on the A.FormBuilder type. If the type
doesn't exist, logs an error message.
Parameters:
-
typeObject
Returns:
getFieldProperties
-
field
Gets a list of properties from the field.
Parameters:
-
fieldObject
Returns:
getFieldRow
-
field
Returns the row of the given field.
Parameters:
-
fieldA.FormField
Returns:
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:
-
fieldObject -
indexObject -
parentObject
openEditProperties
-
field
Enables the settings tab.
Parameters:
-
fieldObject
plotField
-
field -
container
Renders a field in the container.
Parameters:
-
fieldObject -
containerObject
plotFields
-
fields -
container
Renders a list of fields in the container.
Parameters:
-
fieldsObject -
containerObject
registerFieldTypes
-
typesToAdd
<p>Adds a the given field types to this form builder.</p>
Parameters:
-
typesToAddArray | 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:
-
fieldA.FormBuilderFieldBase
renderUI
()
protected
Renders the A.FormBuilder UI. Lifecycle.
selectFields
-
fields
Adds fields to a A.LinkedSet instance.
Parameters:
-
fieldsObject
showFieldSettingsPanel
-
field -
typeName
Shows the settings panel for the given field.
Parameters:
-
fieldA.FormField -
typeNameStringThe 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:
-
fieldObject
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:
-
typesToRemoveArray | 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:
-
fieldsObject
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.
NAME
String
static
Static property provides a string to identify the class.
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
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: []