Back to Top

How to add a custom PHP modifier in the UI Component

Updated 21 December 2023

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:

Start your headless eCommerce
now.
Find out More
<?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