Magento 2 Cómo mostrar avisos dinámicamente en forma de componente de interfaz de usuario

Aquí comprobaremos en Magento 2 cómo mostrar avisos dinámicamente en los campos del formulario del componente de la interfaz de usuario.

A veces tenemos que agregar una nota debajo de cualquier campo del formulario para describir el campo o cualquier información relacionada con el campo al usuario.

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <dataSource name="vendor_module_form_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Vendor\Module\Model\Form\DataProvider</argument>
            <argument name="name" xsi:type="string">vendor_module_form_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">id</argument>
            <argument name="requestFieldName" xsi:type="string">id</argument>
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="submit_url" xsi:type="url" path="route/path/save"/>
                    <item name="validate_url" xsi:type="url" path="route/path/validate"/>
                </item>
            </argument>
        </argument>
        <argument name="data" xsi:type="array">
            <item name="js_config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
            </item>
        </argument>
    </dataSource>
    <fieldset name="module_form">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Form Title</item>
            </item>
        </argument>
        <field name="url">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Url</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">employee</item>
                    <item name="dataScope" xsi:type="string">url</item>
                    <item name="validation" xsi:type="array">
                        <item name="validate-url" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

Podemos agregar avisos dinámicamente anulando la función getMeta en la clase de proveedor de datos del componente de la interfaz de usuario del formulario.

namespace Vendor\Module\Model\Form;

class DataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider
{
    protected $collection;

    public function __construct(
        $name,
        $primaryFieldName,
        $requestFieldName,
        CollectionFactory $collectionFactory,
        array $meta = [],
        array $data = []
    ) {
        parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
        $this->collection = $collectionFactory->create();
    }

    /**
     * @inheritdoc
     */
    public function getMeta()
    {
        $meta = parent::getMeta();

        $meta['module_form'] = [
            'children' => [
                'url' => [
                    'arguments' => [
                        'data' => [
                            'config' => [
                                'notice' => __('Label For Element')
                            ]
                        ]
                    ]
                ]
            ]
        ];

        return $meta;
    }
}

Source link

About David Lopez

Informático y experto en redes. Redactor en varios blogs tecnológicos desde hace 4 años y ahora en Steamachine.net

Check Also

Noticias semanales para diseñadores № 731

Buenas prácticas de Git Prácticas esenciales de Git para desarrolladores, que cubren la gestión de …

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *