Reading list Switch to dark mode

    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