A.FormBuilder Class
A base class for A.FormBuilder
.
Constructor
A.FormBuilder
-
config
Parameters:
-
config
ObjectObject 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:
-
col
A.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:
-
field
A.FormFieldThe Field with nested list that will receive the field
-
nested
A.FormFieldField to add as nested
-
index
NumberThe 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:
-
event
Object
_afterFieldsChange
-
event
Fired after the form-builder-field-list:fieldsChange
event is triggered.
Parameters:
-
event
EventFacade
_afterFieldSettingsModalHide
()
protected
Fired when the field settings modal is hidden.
_afterFieldSettingsModalSave
-
event
Fired when the field settings modal is saved.
Parameters:
-
event
EventFacade
_afterFieldTypesChange
-
event
<p>Fired after the <code>fieldTypes</code> attribute is set.</p>
Parameters:
-
event
EventFacade
_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:
-
event
EventFacade
_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:
-
event
EventFacade
_afterSelectedFieldsSetAdd
-
event
Triggers after adding selected fields to a A.LinkedSet
instance.
Parameters:
-
event
Object
_afterSelectedFieldsSetRemove
-
event
Triggers after removing selected fields from the A.LinkedSet
instance.
Parameters:
-
event
Object
_afterSelectFieldType
-
event
<p>Fired after a field type is selected by the user.</p>
Parameters:
-
event
EventFacade
_afterUniqueFieldsMapPut
-
event
Triggers after adding unique fields to a A.Map
instance.
Parameters:
-
event
Object
_afterUniqueFieldsMapRemove
-
event
Triggers after removing unique fields from the A.Map
instance.
Parameters:
-
event
Object
_afterUpdatePageContentChange
-
event
Fired after the activePageNumber
change.
Parameters:
-
event
EventFacade
_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:
-
fieldType
Object
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:
-
layout
A.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:
-
fieldList
A.FormBuilderFIeldList -
fieldType
Object
Returns:
_chooseColMoveTarget
-
originalFn
-
cutButton
-
col
<p>Overrides default <code>chooseColMoveTarget</code> attribute.</p>
Parameters:
-
originalFn
Function -
cutButton
Node -
col
A.LayoutCol
_clickColMoveTarget
-
moveTarget
<p>Overrides default <code>clickColMoveTarget</code> attribute.</p>
Parameters:
-
moveTarget
Node
_clickRemoveRow
-
row
<p>Overrides default <code>clickRemoveRow</code> attribute. Check if the parameter <code>row</code> has fields.</p>
Parameters:
-
row
A.LayoutRow
Returns:
_cloneField
-
field
-
deep
Clones a field.
Parameters:
-
field
Object -
deep
Object
Returns:
_createLastRow
-
layout
<p>Creates a new row in the last position.</p>
Parameters:
-
layout
A.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:
-
dragNode
Object
_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:
-
field
Object
Returns:
_getFieldNodeIndex
-
fieldNode
Gets the index from the field node.
Parameters:
-
fieldNode
Object
_getLastRow
-
layout
<p>Gets the last row.</p>
Parameters:
-
layout
A.Layout
Returns:
_getPageManagerInstance
-
config
Form Builder Pages instance initializer. Receives a custom object of configurations or using default configurations instead.
Parameters:
-
config
Object
Returns:
_handleCreateEvent
-
field
Fire event of create a field.
Parameters:
-
field
A.FormBuilderFieldBase
_handleEditEvent
-
field
Fire event of edit a field.
Parameters:
-
field
A.FormBuilderFieldBase
_handleRemoveEvent
-
field
Fire event of remove a field.
Parameters:
-
field
A.FormBuilderFieldBase
_hasFieldType
-
fieldType
-
field
<p>Checks if the given field is of the given field type.</p>
Parameters:
-
fieldType
A.FormBuilderFieldType -
field
A.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:
-
col
A.LayoutCol
Returns:
_makeEmptyFieldList
-
col
Turns the given column into an empty form builder column.
Parameters:
-
col
A.LayoutCol
_onCancel
-
event
Triggers on cancel. Unselect fields, stops the event propagation and prevents the default event behavior.
Parameters:
-
event
Object
_onClickAddField
-
event
Fired when the button for adding a new field is clicked.
Parameters:
-
event
EventFacade
_onClickField
-
event
Triggers when a field is clicked.
Parameters:
-
event
Object
_onClickOutsideMoveColTarget
-
event
<p>Fires when click event is triggered.</p>
Parameters:
-
event
EventFacade
_onClickOutsideMoveRowTarget
-
event
<p>Fires when click event is triggered.</p>
Parameters:
-
event
EventFacade
_onDragEnd
-
event
Triggers when the drag ends.
Parameters:
-
event
Object
_onDragMouseDown
-
event
Triggers when the drag mouse down.
Parameters:
-
event
Object
_onDragStart
-
event
Triggers when the drag starts.
Parameters:
-
event
Object
_onEscKeyPressMoveTarget
()
protected
<p>Fires when esc key press event is triggered.</p>
_onFocus
-
event
Fired when some node is focused inside content box.
Parameters:
-
event
EventFacade
_onFormBuilderToolbarHasAddedToField
-
event
<p>Fired when mouse enters a toolbar's field.</p>
Parameters:
-
event
EventFacade
_onMouseOutField
-
event
Triggers when the mouse is out a field.
Parameters:
-
event
Object
_onMouseOverField
-
event
Triggers when the mouse is over a field.
Parameters:
-
event
Object
_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:
-
event
Object
_openNewFieldPanel
-
target
Opens a panel to select a new field type.
Parameters:
-
target
Node
_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:
-
event
EventFacade
_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:
-
val
Object
Returns:
_setFieldsSortableListConfig
-
val
Set the fieldsSortableListConfig
attribute.
Parameters:
-
val
Object
_setFieldToolbarConfig
-
val
Sets the fieldToolbar
attribute.
Parameters:
-
val
Object
Returns:
_setFieldTypes
-
val
<p>Sets the <code>fieldTypes</code> attribute.</p>
Parameters:
-
val
Object | A.FormBuilderFieldType
Returns:
_setLayouts
-
val
Sets the layouts
attribute.
Parameters:
-
val
A.Array
_setMoveButtonData
-
colNode
<p>Show or hide move item in toolbar.</p>
Parameters:
-
colNode
Node
_setupAvailableFieldsSortableList
()
protected
Setup a A.SortableList
of available fields.
_setupFieldsSortableList
()
protected
Setup a A.SortableList
of fields.
_syncUniqueField
-
field
Sync unique fields.
Parameters:
-
field
Object
_uiSetAllowRemoveRequiredFields
-
val
Set the allowRemoveRequiredFields
attribute on the UI.
Parameters:
-
val
Object
_unregisterFieldType
-
fieldType
<p>Removes a single given field type from this form builder.</p>
Parameters:
-
fieldType
String | A.FormBuilderFieldType
_unregisterFieldTypeByIndex
-
index
<p>Unregisters the field type at the given index.</p>
Parameters:
-
index
Number
_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:
-
field
A.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:
-
config
Object
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:
-
field
A.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:
-
field
Object
editField
-
field
Opens the settings panel for editing the given field.
Parameters:
-
field
A.FormBuilderFieldBase
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:
-
field
A.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:
-
type
Object
Returns:
getFieldProperties
-
field
Gets a list of properties from the field.
Parameters:
-
field
Object
Returns:
getFieldRow
-
field
Returns the row of the given field.
Parameters:
-
field
A.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:
-
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:
-
field
A.FormBuilderFieldBase
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
StringThe 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.
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: []