Form Component

Overview

Form component allows performing CRUD operations on an entity.

The following are the components element, the constructor: <Magento_Ui_module_dir>/view/base/web/js/form/form.js

Related UI components

The following components are used to extend the Form component:

  • DataSource
  • FieldSet
  • Field
  • Layout
  • Container

Component options

  • 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 (See examples in ‘Configuring’ section)

Create an instance of the Form component

  • Create configuration file for the instance (for example: customer_form.xml)

    • 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 your Magento layout as a node: <uiComponent name="customer_form"/>

Example:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            ...
            <uiComponent name="customer_form"/>
        </referenceContainer>
    </body>
</page>

Configure the Form component

Component could be configured in two ways:

  • globally: using any module’s view/ui_component/etc/definition.xml file. All settings declared in this file will be applied to all component’s instances
  • locally: using concrete component instance configuration, such as <Magento_Customer_module_dir>/view/base/ui_component/customer_form

Create configuration file: <Magento_Customer_module_dir>/view/base/ui_component/customer_form.xml

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="provider" xsi:type="string">customer_form.customer_form_data_source</item>
            </item>
            <item name="deps" xsi:type="string">customer_form.customer_form_data_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">Customer Information</item>
        <item name="layout" xsi:type="array">
            <item name="type" xsi:type="string">tabs</item>
            <item name="navContainerName" xsi:type="string">left</item>
        </item>
...

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:

...
<fieldset name="customer">
   <argument name="data" xsi:type="array">
       <item name="config" xsi:type="array">
           <item name="label" xsi:type="string" translate="true">Account Information</item>
       </item>
   </argument>
   <field name="entity_id">
       <argument name="data" xsi:type="array">
               <item name="config" xsi:type="array">
               <item name="visible" xsi:type="boolean">false</item>
               <item name="dataType" xsi:type="string">text</item>
               <item name="formElement" xsi:type="string">input</item>
               <item name="source" xsi:type="string">customer</item>
           </item>
        </argument>
    </field>
…

To group components you can use the component container as in example below:

<container name="container_group">
    <argument name="data" xsi:type="array">
        <item name="type" xsi:type="string">group</item>
        <item name="js_config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/form/components/group</item>
        </item>
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Group</item>
            <item name="required" xsi:type="boolean">true</item>
            <item name="dataScope" xsi:type="boolean">false</item>
            <item name="sortOrder" xsi:type="number">20</item>
        </item>
    </argument>
    <field name="group_id">
    ...
    </field>
    <field name="disable_auto_group_change">
    ...
    </field>
</container>