Until now we have presented components that take care of all the data grid exhibition with regard to filtering, paging, navigation, and even functionality to temporary recording parameters (Bookmark). Beside all these elements that provide indispensable functionalities to a data grid, it is necessary to have a specific component that takes care of CRUD operations on specific elements of the grid. This is the Form component scope of action.
In the previous section of this chapter, it was possible to observe that the File uploader component integrates part of the Form component scope so that it is a common item to HTML forms.
The following components extend the functionalities of the Form component:
- DataSource
- FieldSet
- Field
- Layout
- Container
To better understand this dynamic, make an analysis of the configuration file definition responsible for forms management of the customer module in Magento 2. Open the file <magento_root>/vendor/magento/module-customer/view/base/ui_component/customer_form.xml and observe the following operating logic:
- The
<form>tag is declared using the URN patterns of Magento UI - In the tag
<argument>it is possible to visualize the initial layout settings and also the buttons that will be part of the forms - Then
<dataSource>is defined, which aims to parameterize the recording layer and validation of persisted data in the form - In the tags
<fieldset>and<field>a grouping of form fields and definitions of inputs, respectively, occurs - Through the
<container>it is possible to group the fieldsets and the form fields in the same scope inside the system
At first it seems a little complicated, but it is simpler to deepen these concepts when it is possible to understand both the logic application and what benefits it can bring to developers.
It's necessary to understand these initial concepts to take advantage of the good practice that can be applied in developing new layouts to modules and even to your theme.
Tip
For more information, access the Magento 2 official documentation available at: http://devdocs.magento.com/guides/v2.0/ui-components/ui-form.html