The Form component is a collection of fields that can be grouped in tabs and fieldsets. It enables CRUD operations.
Form is a basic component.
Related UI components
The following components can be used in the scope of the Form component:
Form configuration extends the
||Save Form values by AJAX.||Boolean||
||There are two possible approaches to collect form data for ajaxSave:
||The path to the component’s JS constructor in terms of RequireJS.||String||
Used to notify some external entity about property
Used for tracking changes of an external entity property.
||The CSS class assigned to the
The name that can be used to address the block to which this
attribute is assigned. The name must be unique per
generated page. If not specified, the name is
assigned automatically in the following format:
The path to the component’s
Create an instance of the Form component
To create an instance of the Form component, you need to do the following:
- In your custom module, add a configuration file for the instance, for example:
- Add a set of fields (the Fieldset component with the component of the Field) for entity or to implement the upload of meta info in the DataProvider.
- Create the DataProvider class for the entity that implements DataProviderInterface
- Add a component in Magento layout
as a node:
- Add a component in Magento layout as a node:
Configure the Form component
Component could be configured in two ways:
- globally: using any module’s
view/ui_component/etc/definition.xmlfile. All settings declared in this file will be applied to all component’s instances
- locally: using concrete component instance configuration, such as
<your module root dir>view/base/ui_component/customer_form
Create configuration file:
<your module root dir>view/base/ui_component/customer_form.xml
Nodes are optional and contain parameters required for component:
js_config -> deps - sets the dependency on component initialization
js_config -> config -> provider - specifies the name of the component data
layout - configuration class meets the visualization component. Names for deps and provider are specified with a complete path from the root component with the separator “.”
Add a description of the fields in the form using components and Field Fieldset:
To group components you can use the component container as in example below:
You need to configure component’s DataSource in order to provide data and meta information for your Form component.
DataSource aggregates an object of class implements the interface
An example of the configuration of the DataSource object:
argument “dataProvider” - contains configuration, class name and arguments
js_config -> component - > JS indication of a responsible component
Data provided by data source is shared and available for all components in the Assembly (in this case for all child components of UI Form).
Data Source is another UI Component that provides data in specific format which is shared among all UI Components.
Replacing principles are the same for all UI Components.
To replace all instances of a UI Form with a custom implementation redefine link to a constructor in
To replace one instance of a UI Form Component redefine link to a constructor in your module’s form configuration file: