Form Component
Form UI Component
<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<settings>
<deps>
<dep>form.form_data_source</dep>
</deps>
<jslinks>
<link name="destroy">
<link>destroy</link>
</link>
</jslinks>
</settings>
<!-- Data Source -->
<dataSource name="form_data_source">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
</item>
</argument>
<dataProvider class="Magento\Ui\Model\DataProvider" name="form_data_source">
<settings>
<requestFieldName>id</requestFieldName>
</settings>
</dataProvider>
</dataSource>
<!-- Form Fields -->
<fieldset name="general">
<settings>
<collapsible>true</collapsible>
<label translate="true">General Information</label>
</settings>
<field name="name" formElement="input">
<settings>
<dataScope>name</dataScope>
<label translate="true">Name</label>
<validation>
<rule name="required-entry" xsi:type="boolean">true</rule>
</validation>
</settings>
</field>
<field name="status" formElement="select">
<settings>
<dataScope>status</dataScope>
<label translate="true">Status</label>
<options>
<option name="1" xsi:type="array">
<item name="value" xsi:type="string">1</item>
<item name="label" xsi:type="string">Enabled</item>
</option>
<option name="0" xsi:type="array">
<item name="value" xsi:type="string">0</item>
<item name="label" xsi:type="string">Disabled</item>
</option>
</options>
</settings>
</field>
</fieldset>
</form>
Field Types
Available Form Elements
<!-- Text input -->
<field name="text_field" formElement="input">
<settings>
<dataScope>text_field</dataScope>
<label translate="true">Text Field</label>
<validation>
<rule name="required-entry" xsi:type="boolean">true</rule>
<rule name="max-text-length" xsi:type="number">255</rule>
</validation>
</settings>
</field>
<!-- Textarea -->
<field name="description" formElement="textarea">
<settings>
<dataScope>description</dataScope>
<label translate="true">Description</label>
<elementTmpl>ui/form/field</elementTmpl>
</settings>
</field>
<!-- Select -->
<field name="category" formElement="select">
<settings>
<dataScope>category</dataScope>
<label translate="true">Category</label>
<options>
<option name="1" xsi:type="array">
<item name="value" xsi:type="string">1</item>
<item name="label" xsi:type="string">Category 1</item>
</option>
</options>
</settings>
</field>
<!-- Date -->
<field name="date_field" formElement="date">
<settings>
<dataScope>date_field</dataScope>
<label translate="true">Date</label>
<elementTmpl>ui/form/element/date</elementTmpl>
</settings>
</field>
<!-- Checkbox -->
<field name="is_active" formElement="checkbox">
<settings>
<dataScope>is_active</dataScope>
<label translate="true">Is Active</label>
</settings>
</field>
<!-- WYSIWYG Editor -->
<field name="content" formElement="wysiwyg">
<settings>
<dataScope>content</dataScope>
<label translate="true">Content</label>
<wysiwyg>true</wysiwyg>
</settings>
</field>
Form Data Providers
Form Data Provider
namespace Vendor\Module\Ui\DataProvider\Form;
class FormDataProvider extends \Magento\Ui\Model\DataProvider
{
public function __construct(
string $name,
string $primaryFieldName,
string $requestFieldName,
\Magento\Framework\Api\Search\SearchResultInterface $searchResult,
array $meta = [],
array $data = []
) {
parent::__construct($name, $primaryFieldName, $requestFieldName, $searchResult, $meta, $data);
}
public function getData(): array
{
$items = $this->getCollection()->getItems();
$result = [];
foreach ($items as $item) {
$result[$item->getId()] = $item->getData();
}
return [
'totalRecords' => $this->getCollection()->getSize(),
'items' => $result,
];
}
public function getMeta(): array
{
$meta = parent::getMeta();
$meta['general']['children']['name']['arguments']['data']['config'] = [
'dataType' => 'text',
'formElement' => 'input',
'component' => 'Magento_Ui/js/form/element/text',
'label' => __('Name'),
'dataScope' => 'name',
'sortOrder' => 10,
];
return $meta;
}
}
Data Provider Configuration
<dataSource name="form_data_source">
<dataProvider class="Vendor\Module\Ui\DataProvider\Form\FormDataProvider" name="form_data_source">
<settings>
<requestFieldName>id</requestFieldName>
<filterUrlParams>
<param name="id">entity_id</param>
</filterUrlParams>
</settings>
</dataProvider>
</dataSource>
Form Modifiers
Form Modifier
namespace Vendor\Module\Ui\DataProvider\Form;
class Modifier implements \Magento\Ui\Data\Form\Modifier\ModifierInterface
{
public function modifyData(array $data): array
{
$entityId = $data['entity_id'] ?? null;
if ($entityId) {
// Modify data before form display
$data['custom_field'] = $this->getCustomValue($entityId);
}
return $data;
}
public function modifyMeta(array $meta): array
{
// Modify form structure
$meta['general']['children']['custom_field'] = [
'arguments' => [
'data' => [
'config' => [
'dataType' => 'text',
'formElement' => 'input',
'component' => 'Magento_Ui/js/form/element/text',
'label' => __('Custom Field'),
'dataScope' => 'custom_field',
'sortOrder' => 50,
],
],
],
];
return $meta;
}
}
Modifier Pool
<!-- Register modifier in di.xml -->
<config>
<virtualType name="VendorModuleFormDataProvider" type="Magento\Ui\Model\DataProvider\ModifierPool">
<arguments>
<argument name="modifiers" xsi:type="array">
<item name="custom_modifier" xsi:type="array">
<item name="class" xsi:type="string">Vendor\Module\Ui\DataProvider\Form\Modifier</item>
<item name="sortOrder" xsi:type="number">10</item>
</item>
</argument>
</arguments>
</virtualType>
</config>
Quiz
1. What is the root element of a form UI component?
2. How do you add validation to a field?
3. What does a form modifier do?
Flashcards
Question
Form root element?
Click to reveal answer
Answer
<form> with <dataSource> and <fieldset> children
Question
Field formElement types?
Click to reveal answer
Answer
input, textarea, select, date, checkbox, wysiwyg
Question
Form modifier methods?
Click to reveal answer
Answer
modifyData() for content, modifyMeta() for structure
Question
Field validation?
Click to reveal answer
Answer
<validation><rule name="required-entry">true</rule></validation>
Revision Notes
Key Takeaways
- 1. Form UI components use <form> root with dataSource and fieldsets
- 2. Fields use formElement attribute to define input type
- 3. Validation rules are defined in <validation> elements
- 4. Form data providers supply data and meta configuration
- 5. Form modifiers programmatically alter form data and structure
Interview Tips
- • Explain the form component structure and field configuration
- • Describe how form modifiers work with the modifier pool
- • Discuss field validation and custom form elements
Cheat Sheet
Form Structure:
<form> root
<dataSource> → PHP provider
<fieldset name="group"> → field groups
<field name="field" formElement="input"> → fields
Field Types:
input, textarea, select, date, checkbox, wysiwyg
Validation:
<rule name="required-entry" xsi:type="boolean">true</rule>
Modifiers:
modifyData() → alter data
modifyMeta() → alter structure