About PHP modifiers in UI components
What’s in this topic
This topic describes how to use PHP modifiers that are the server-side part of UI components configuration. Using modifiers is optional and might be necessary when static declaration in XML configuration files is not suitable for the tasks. For example, in cases when additional data should be loaded from database. Or the other specific example is the default product creation form, for which the modifier is a place where validations are added to display only certain fields for certain product types.
General implementation overview
DataProvider() is a PHP part of a UI component, a class responsible for the component’s data and metadata preparation. The pool of modifiers (virtual type) is injected to this data provider using the __construct() method. The pool’s preference is defined in di.xml.
So in runtime, the component structure set in the modifier is merged with the configuration that comes from the XML configuration.
Adding a custom PHP modifier
To add a PHP modifier for a UI component, take the following steps:
Step 1:
In your custom module, add a class that implements \Magento\Ui\DataProvider\Modifier\ModifierInterface with the following methods:
modifyData(): for modifying UI component’s data (for example, the list of options for a select element)modifyMeta(): for modifying UI component’s metadata (for example, name, label, description, type)
Sample modifier:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<?php
use Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\AbstractModifier;
class Example extends AbstractModifier
{
public function modifyMeta(array $meta)
{
$meta['test_fieldset_name'] = [
'arguments' => [
'data' => [
'config' => [
'label' => __('Label For Fieldset'),
'sortOrder' => 50,
'collapsible' => true
]
]
],
'children' => [
'test_field_name' => [
'arguments' => [
'data' => [
'config' => [
'formElement' => 'select',
'componentType' => 'field',
'options' => [
['value' => 'test_value_1', 'label' => 'Test Value 1'],
['value' => 'test_value_2', 'label' => 'Test Value 2'],
['value' => 'test_value_3', 'label' => 'Test Value 3'],
],
'visible' => 1,
'required' => 1,
'label' => __('Label For Element')
]
]
]
]
]
];
return $meta;
}
/**
* {@inheritdoc}
*/
public function modifyData(array $data)
{
return $data;
}
}
Step 2:
Declare your modifier in your module Di configuration <Your_Module_dir>/etc/adminhtml/di.xml. This declaration looks like the following:
1
2
3
4
5
6
7
8
9
10
<virtualType name="%YourNamespace\YourModule\DataProvider\Modifier\Pool%" type="Magento\Ui\DataProvider\Modifier\Pool">
<arguments>
<argument name="modifiers" xsi:type="array">
<item name="modifier_name" xsi:type="array">
<item name="class" xsi:type="string">%YourNamespce\YourModule\Modifier\YourModifierClass%</item>
<item name="sortOrder" xsi:type="number">10</item>
</item>
</argument>
</arguments>
</virtualType>
where YourNamespace\YourModule\DataProvider\Modifier\Pool is a virtual class.
(If you want to use this sample in your di.xml, replace the sample values with the real names of your entities.)
Step 3:
To use your modifier, add a dependency on \Magento\Ui\DataProvider\Modifier\PoolInterface to your UI component data provider.
Sample dependency injection:
1
2
3
4
5
<type name="%YourNamespce\YourModule\Ui\DataProvider\YourDataProviderClass%">
<arguments>
<argument name="pool" xsi:type="object">%YourNamespace\YourModule\DataProvider\Modifier\Pool%</argument>
</arguments>
</type>
For illustration see \Magento\Catalog\Ui\DataProvider\Product\Form\ProductDataProvider.