Skip to content

Latest commit

 

History

History
141 lines (112 loc) · 5.11 KB

ui-form.md

File metadata and controls

141 lines (112 loc) · 5.11 KB
layout group subgroup title menu_title menu_node github_link redirect_from
default
UI Library
D_UI Library Form Component
Form Component
Form Component
parent
ui-components/ui-form.md
/guides/v2.0/ui-library/ui-form.html
  • TOC {:toc}

##Overview Form component allows performing CRUD operations on an entity.

The following are the components element, the constructor: app\code\Magento\Ui\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 Magento layout as a node: <uiComponent name="customer_form"/>

Example:

{% highlight xml %} ... {% endhighlight %}

##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 <your module root dir>/Magento/Customer/view/base/ui_component/customer_form

Create configuration file: <your module root dir>/Magento/Customer/view/base/ui_component/customer_form.xml

{% highlight xml%}

customer_form.customer_form_data_source customer_form.customer_form_data_source Customer Information tabs left ... {% endhighlight%}

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:

{%highlight xml%} ...

Account Information false text input customer … {% endhighlight%}

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

{% highlight xml%} group Magento_Ui/js/form/components/group Group true false 20 ... ... {% endhighlight %}