Agregue una nota debajo de un campo de formulario usando componentes ui

18

¿Cómo puedo agregar un pequeño texto debajo de un campo en Magento 2 usando componentes ui?
Usando Magento\Framework\Data\Formpodría hacer esto:

/** @var \Magento\Framework\Data\Form $form */
$form = $this->formFactory->create();
$fieldset = $form->addFieldset(
    'base_fieldset',
    [
        'legend' => __('Some legend here'),
        'class'  => 'fieldset-wide'
    ]
);
$fieldset->addField(
    'name',
    'text',
    [
        'name'      => 'name',
        'label'     => __('Name'),
        'title'     => __('Name'),
        'note'      => __('Some note here')
    ]
);

El código anterior produciría esto (observe el texto debajo del campo).

¿Cómo puedo lograr lo mismo usando form ui-components?
Tengo la forma definida así:

<field name="name">
    <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">Name</item>
            <item name="formElement" xsi:type="string">input</item>
            <item name="source" xsi:type="string">[entity]</item>
            <item name="sortOrder" xsi:type="number">10</item>
            <item name="dataScope" xsi:type="string">name</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>

Intenté agregar <item name="note" xsi:type="string" translate="true">Some note here</item>pero, ¿adivina qué?

Marius
fuente

Respuestas:

32

Puede lograr esto usando la siguiente etiqueta.

<item name="notice" xsi:type="string" translate="true">Some note here</item>
Sohel Rana
fuente
Gracias. Funciona. Agregué translate="true"solo para hacer que el script traductor de frases traductor recoja esto también.
Marius
@ Marius, ¿sabes cómo usar el código html en el aviso?
Sergey Korzhov
@SergeyKorzhov intenta <item name="notice" xsi:type="string" translate="true"><![CDATA[Some note <a href="https://google.com">here</a>]]></item>
Marius
@ Mario lo hice antes de preguntar. No funciona. Lo curioso es que html funciona bien en system.xml incluso sin CDATA.
Sergey Korzhov
En este aviso, ¿debo proporcionar datos dinámicos entre mensajes? ¿Es esto posible @Marius
Jaisa
3

Tuve un momento realmente molesto descubriendo cómo obtener html para representar en un objeto de notificación. Ha habido dos soluciones que he descubierto. Sé que esto podría ser un comentario, pero supuse que otras personas también estarían interesadas en esta funcionalidad.

  1. Cree un nuevo elemento html que muestre el aviso como HTML en lugar de texto

el elemento original se puede encontrar en /vendor/magento/module-ui/view/base/web/templates/form/field.html

Copie eso en su módulo con una ruta view/base/web/template/form/field-html-notice.htmlo algo similar ( tenga en cuenta que el templatesdirectorio que se está cambiando templatees intencional y requerido para los archivos de plantilla personalizados )

Ahora, en su nuevo archivo field-html-notice.html, puede modificar el archivo html para cargar el $data.noticeuso de html y omitir el intervalo por completo. (por supuesto, si está buscando traducir su html, deberá personalizar esta solución para tener una solución alternativa)

La solución sería tomar esta plantilla y modificar

    <!-- /vendor/magento/module-ui/view/base/web/templates/form/field.html:35 -->
    <div class="admin__field-note" if="$data.notice" attr="id: noticeId">
        <span translate="notice"/>
    </div>

    <div class="admin__additional-info" if="$data.additionalInfo" html="$data.additionalInfo"></div>

para parecerse a algo más como esto:

    <!-- view/base/web/template/form/field-html-notice.html:35 -->
    <div class="admin__field-note" if="$data.notice" attr="id: noticeId" html="$data.notice"></div>

    <div class="admin__additional-info" if="$data.additionalInfo" html="$data.additionalInfo"></div>

Una vez que me tomé el tiempo para hacerlo, me di cuenta de que el equipo de Magento nos ha dado convenientemente la capacidad de agregar additionalInfoque se representa como html.

  1. Agregue un div con la clase de aviso como información adicional para un componente

La opción mucho más pegajosa sería tener el divisor de notificación en la additionalInfosección. Algo en la línea de

    <!-- my_cool_component.xml -->
    <field name="field_id">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <!-- other field config -->
                <item name="additionalInfo" xsi:type="string" translate="true">
                    &lt;div class="admin__field-note"&gt;
                        This looks like a notice&lt;br/&gt;
                        it is super &ltspan style="font-weight=bold"&gt;TACKY&lt/span&gt;&lt;br/&gt;
                        but it will work &lta href="http://google.com"&gt;I promise&lt/a&gt;
                    &lt;/div&gt;
                </item>
            </item>
        </argument>
    </field>

Entonces sí, simple ¿verdad? Bien. Me voy a dormir ahora.

(tenga en cuenta que el validador xml se romperá si usa los caracteres reales <o >en su información adicional, de ahí que el &lt;y&gt;

Nota: resulta que puedes envolver tu html en <![CDATA[<p>cool paragraph man</p>]] Thanks @Marius

Nathaniel Rogers
fuente
1
<item name = "AdditionalInfo" xsi: type = "string" translate = "true"> funciona mucho mejor que el aviso
CompactCode
<![CDATA[<p>cool paragraph man</p>]] No funciona debajo messagepero funciona con additionalInfo mag.2.2.2
Juliano Vargas
2

Las versiones actuales de Magento 2 2.2.8 y 2.3.1 son compatibles con la información adicional html de forma predeterminada en el campo Formulario UI.

<item name="additionalInfo" xsi:type="string"><![CDATA[<b>My Html Information</b>]]>
</item>

No es necesario modificar la plantilla field.html.

Milind Singh
fuente