Modifiers in UI components

Question

I'm on Magento 2.4.4, I want to add in my custom module Vendor_Picto a specific field (list of selectable images) in the admin form. It is too specific to be generated in the ui_component/picto_form.xml.

I found this official doc: https://devdocs.magento.com/guides/v2.4/ui_comp_guide/concepts/ui_comp_modifier_concept.html

EDIT : I had an error with the code example from the doc : The "componentType" configuration parameter is required for the "test_fieldset_name" component. This attribute was missing in $meta['test_fieldset_name']['arguments']['data']['config'] : 'componentType' => Fieldset::NAME

It helped me write these 2 files so far:

1.Created the modifier Vendor\Picto\Ui\DataProvider\Form\Modifier\Icon.php

<?php

namespace Vendor\Picto\Ui\DataProvider\Form\Modifier;

use Magento\Ui\DataProvider\Modifier\ModifierInterface;

class Icon implements ModifierInterface
{
    public function modifyMeta(array $meta)
    {
        $meta['test_fieldset_name'] = [
            'arguments' => [
                'data' => [
                    'config' => [
                        'label' => __('Label For Fieldset'),
                        'sortOrder' => 50,
                        'collapsible' => true,
                        'componentType' => Fieldset::NAME
                    ]
                ]
            ],
            '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;
    }
}

2.Created etc/adminhtml/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <virtualType name="Vendor\Picto\DataProvider\Form\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">Vendor\Picto\Ui\DataProvider\Form\Modifier\Icon</item>
                    <item name="sortOrder" xsi:type="number">10</item>
                </item>
            </argument>
        </arguments>
    </virtualType>
    <type name="Vendor\Picto\Ui\DataProvider\PictoDataProvider">
        <arguments>
            <argument name="pool" xsi:type="object">Vendor\Picto\DataProvider\Form\Modifier\Pool</argument>
        </arguments>
    </type>
</config>

Unfortunately nothing new appears in my admin form and I have no errors.

I am probably missing something but there is no more information in the doc...

Answer 1

You didn't specify how you declare PictoDataProvider in your picto_form.xml and content of PictoDataProvider.

Declaration should be like:

<?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">
    <!-- ... -->
    <dataSource name="...">
        <dataProvider class="Vendor\Picto\Ui\DataProvider\PictoDataProvider" name="...">
            <!-- ... -->
        </dataProvider>
    </dataSource>
</form>

PictoDataProvider should implement \Magento\ReleaseNotification\Ui\DataProvider, has argument PoolInterface $pool in __construct and implement logic for process data

// ...
class PictoDataProvider implements \Magento\Framework\View\Element\UiComponent\DataProvider\DataProviderInterface
{
    // ...
    private \Magento\Ui\DataProvider\Modifier\PoolInterface $pool;

    // ...

    public function __construct(
        string $name,
        \Magento\Framework\Api\Search\SearchResultInterface $searchResult,
        \Magento\Framework\Api\Search\SearchCriteriaInterface $searchCriteria,
        \Magento\Ui\DataProvider\Modifier\PoolInterface $pool,
        array $meta = [],
        array $data = []
    ) {
        // ...
        $this->pool = $pool;
    }

    /**
     * @inheritdoc
     */
    public function getData(): array
    {
        /** @var \Magento\Ui\DataProvider\Modifier\ModifierInterface $modifier */
        foreach ($this->pool->getModifiersInstances() as $modifier) {
            $this->data = $modifier->modifyData($this->data);
        }

        return $this->data;
    }

    /**
     * @inheritdoc
     */
    public function getMeta()
    {
        /** @var \Magento\Ui\DataProvider\Modifier\ModifierInterface $modifier */
        foreach ($this->pool->getModifiersInstances() as $modifier) {
            $this->meta = $modifier->modifyMeta($this->meta);
        }

        return $this->meta;
    }
    // ...
}