Add a dynamic note for a product attribute in the adminhtml

Question

I'm trying to add a dynamic not based on the attribute-set besides the price field in Magento 2.

After a lot of research, I've tried using PHP modifiers in UI components, and depending on the Container component without any fields I was able to produce the following code:

Vendor/Module/etc/adminhtml/di.xml file content

<?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="Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Pool" type="Magento\Ui\DataProvider\Modifier\Pool">
        <arguments>
            <argument name="modifiers" xsi:type="array">
                <item name="vendor_module_example_modifier" xsi:type="array">
                    <item name="class" xsi:type="string">Vendor\Module\Ui\DataProvider\Product\Form\Modifier\ExampleModifier</item>
                    <item name="sortOrder" xsi:type="number">200</item>
                </item>
            </argument>
        </arguments>
    </virtualType>
</config>

Vendor\Module\Ui\DataProvider\Product\Form\Modifier\ExampleModifier

<?php

namespace Vendor\Module\Ui\DataProvider\Product\Form\Modifier;


use Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\AbstractModifier;
use Magento\Framework\Stdlib\ArrayManager;

class ExampleModifier extends AbstractModifier
{
    private ArrayManager $arrayManager;

    /**
     * @param ArrayManager $arrayManager
     */
    public function __construct(
        ArrayManager $arrayManager
    ) {
        $this->arrayManager = $arrayManager;
    }

    public function modifyData(array $data)
    {
        return $data;
    }

    public function modifyMeta(array $meta)
    {
        $containerPath = $this->arrayManager->findPath(static::CONTAINER_PREFIX . \Magento\Catalog\Api\Data\ProductAttributeInterface::CODE_PRICE, $meta, null, 'children');

        $meta = $this->arrayManager->merge($containerPath, $meta, [
            'children' => [
                'example_field' => [
                    'arguments' => [
                        'data' => [
                            'config' => [
                                'componentType' => 'container',
                                'label' => false,
                                'text' => __('<p>this is something to show</p>'),
                                'template' => 'ui/form/components/complex',
                            ]
                        ]
                    ]
                ]
            ]
        ]);

        return $meta;
    }
}

But I got the following error in the console, and it's not showing the text.

Uncaught ReferenceError: Unable to process binding "foreach: function(){return elems }" Message: Unable to process binding "if: function(){return !$data.additionalForGroup }" Message: Unable to process binding "if: function(){return visible() }" Message: visible is not defined at if (eval at createBindingsStringEvaluator (knockout.js:2982), :3:55) at ko.computed.disposeWhenNodeIsRemoved (knockout.js:4381) at Function.evaluateImmediate_CallReadThenEndDependencyDetection (knockout.js:2173) at Function.evaluateImmediate_CallReadWithDependencyDetection (knockout.js:2140) at Function.evaluateImmediate (knockout.js:2101) at Object.ko.computed.ko.dependentObservable (knockout.js:1954) at init (knockout.js:4380) at knockout.js:3358 at Object.ignore (knockout.js:1470) at knockout.js:3357

I've searched about the error and found nothing to help me, I've tried the base example for the modifier using the select box and it works fine, now I'm really stuck with this error, and all changes not fixing the issue.

I really appreciate your help so much.

Answer 1

simply change modifyMeta method to

public function modifyMeta(array $meta)
{
    $containerPath = $this->arrayManager->findPath(static::CONTAINER_PREFIX . \Magento\Catalog\Api\Data\ProductAttributeInterface::CODE_PRICE, $meta, null, 'children');

    $meta = $this->arrayManager->merge($containerPath, $meta, [
        'children' => [
            'price' => [
                'arguments' => [
                    'data' => [
                        'config' => [
                            'additionalInfo' => '<p>this is something to show</p>'
                        ]
                    ]
                ]
            ]
        ]
    ]);

    return $meta;
}

Answer 2

I found the answer after more digging in the Magento documentation. The container shows that error because it expects at least a child field which I don't have.

I found the text component type which exactly matches what I'm looking for because it's not just adding text, it also displays at the space beside the price button.

My final code is like the following:

public function modifyMeta(array $meta)
{
    $containerPath = $this->arrayManager->findPath(static::CONTAINER_PREFIX . ProductAttributeInterface::CODE_PRICE, $meta, null, 'children');

    $meta = $this->arrayManager->merge($containerPath, $meta, [
        'children' => [
            'example_field' => [
                'arguments' => [
                    'data' => [
                        'config' => [
                            'componentType' => 'text',
                            'elementTmpl' => 'ui/form/element/text',
                            'links' => [
                                'value',
                            ],
                            'value' => __('this is something to show'),
                            'inputName' => 'example_field',
                            'disabled' => true,
                        ]
                    ]
                ]
            ]
        ]
    ]);

    return $meta;
}

Note: HTML codes show as is, and not interpreted by the browser.

Answer 3

Hi i just want to add hyperlink in the note ,can you please provide me the solution. It will be really helpful

Answer 4

In my case looks like, where min_name - attribute code:

public function modifyMeta(array $meta)
{
    $containerPath = $this->arrayManager->findPath(static::CONTAINER_PREFIX . 'min_name', $meta, null, 'children');

    $meta = $this->arrayManager->merge($containerPath, $meta, [
        'children' => [
            'min_name' => [
                'arguments' => [
                    'data' => [
                        'config' => [
                            'notice' => __('This attribute use for...')
                        ]
                    ]
                ]
            ]
        ]
    ]);

    return $meta;
}