Back to Top

How to add a custom PHP modifier in the UI Component

Updated 3 years ago

Using modifiers is optional and might be necessary when static declaration in XML configuration files is not suitable for the tasks.

Example: In cases We need additional data should be loaded from the database.

Implementation of custom PHP modifier

Use the following steps to implement a custom PHP modifier for a UI component;

Step 1:

In your custom module create a class that implements \Magento\Ui\DataProvider\Modifier\ModifierInterface with the following methods:

<?php

use Magento\Ui\DataProvider\Modifier\ModifierInterface;

class Example implements ModifierInterface
{
    public function modifyMeta(array $meta)
    {
        $meta['test_fieldset_name'] = [
            'arguments' => [
                'data' => [
                    'config' => [
                        'label' => __('Test Label For Fieldset'),
                        'sortOrder' => 50,
                        'collapsible' => true
                    ]
                ]
            ],
            'children' => [
                'test_field_name' => [
                    'arguments' => [
                        'data' => [
                            'config' => [
                                'formElement' => 'select',
                                'componentType' => 'field',
                                'options' => [
                                    ['value' => 'test_value', 'label' => 'Test Value'],
                                    ],
                                'visible' => 1,
                                'required' => 1,
                                'label' => __('Label For Element')
                            ]
                        ]
                    ]
                ]
            ]
        ];

        return $meta;
    }

    /**
     * {@inheritdoc}
     */
    public function modifyData(array $data)
    {
        return $data;
    }
}
Step 2:

Declare modifier in <Your_Module_dir>/etc/adminhtml/di.xml. This declaration looks like the following:

<virtualType name="%Webkul\Test\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">%Webkul\Test\Modifier\Example%</item>
                 <item name="sortOrder" xsi:type="number">10</item>
             </item>
         </argument>
     </arguments>
</virtualType>

Webkul\Test\DataProvider\Modifier\Pool is a virtual class.

Step 3:

To use your modifier, add a dependency on your UI component data provider.

<type name="%Webkul\Test\Ui\DataProvider\Example%">
    <arguments>
        <argument name="pool" xsi:type="object">%Webkul\Test\DataProvider\Modifier\Pool%</argument>
    </arguments>
</type>
. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home