Adicionar uma nota em um campo de formulário usando componentes da interface do usuário

18

Como posso adicionar um texto pequeno em um campo no Magento 2 usando componentes da interface do usuário.
Usando Magento\Framework\Data\Formeu poderia fazer isso:

/** @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')
    ]
);

O código acima produziria isso (observe o texto sob o campo).

Como posso conseguir a mesma coisa usando os componentes da interface do usuário do formulário?
Eu tenho o formulário definido assim:

<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>

Eu tentei adicionar <item name="note" xsi:type="string" translate="true">Some note here</item>, mas, adivinhem?

Marius
fonte

Respostas:

32

Você pode conseguir isso usando a seguinte tag.

<item name="notice" xsi:type="string" translate="true">Some note here</item>
Sohel Rana
fonte
Obrigado. Funciona. Eu adicionei translate="true"apenas para fazer com que o script do coletor de frases traduzível escolha isso também.
Marius
@ Marius você sabe como usar o código html no aviso?
Sergey Korzhov
@SergeyKorzhov try<item name="notice" xsi:type="string" translate="true"><![CDATA[Some note <a href="https://google.com">here</a>]]></item>
Marius
@ Marius eu fiz antes de perguntar. não funciona. o engraçado é que o html funciona bem no system.xml, mesmo sem o CDATA.
Sergey Korzhov
Neste aviso, devo fornecer dados dinâmicos entre as mensagens? Isso é possível @Marius
Jaisa
3

Eu tive um tempo muito chato para descobrir como obter html para renderizar em um objeto de aviso. Descobri duas soluções. Eu sei que isso poderia ser um comentário, mas achei que outras pessoas também estariam interessadas nessa funcionalidade.

  1. Crie um novo elemento html que renderize o aviso como HTML em vez de texto

o elemento original pode ser encontrado em /vendor/magento/module-ui/view/base/web/templates/form/field.html

Copie isso no seu módulo com um caminho view/base/web/template/form/field-html-notice.htmlou algo semelhante ( observe que o templatesdiretório templateque está sendo alterado para intencional e necessário para arquivos de modelo personalizados )

Agora, no seu novo arquivo field-html-notice.html, você pode modificar o arquivo html para carregar o $data.noticehtml em uso e ignorar completamente a extensão. (é claro que se você deseja traduzir seu html, precisará personalizar esta solução para ter uma solução alternativa)

A solução seria pegar esse modelo e 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 parecer algo mais ou menos assim:

    <!-- 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>

Depois que dediquei um tempo para fazer isso, percebi que a equipe do Magento convenientemente nos deu a capacidade de adicionar o additionalInfoque é renderizado como html.

  1. Adicione uma div com a classe de aviso como informações adicionais para um componente

A opção mais difícil seria fazer com que a divisão de aviso seja renderizada na additionalInfoseção. Algo ao longo das linhas 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>

Então sim, simples, certo? Bem. Eu vou dormir agora.

(observe que o validador xml será interrompido se você usar os caracteres reais <ou >em suas informações adicionais, portanto, &lt;e&gt;

Nota: Acontece que você pode apenas envolver seu html em <![CDATA[<p>cool paragraph man</p>]] Obrigado @Marius

Nathaniel Rogers
fonte
11
<item name = "AdditionalInfo" xsi: type = "string" traduzir = "true"> funciona muito melhor, em seguida, aviso
CompactCode
<![CDATA[<p>cool paragraph man</p>]] Não funciona sob, messagemas funciona com additionalInfo mag.2.2.2
Juliano Vargas
1

As versões atuais do Magento 2 2.2.8 e 2.3.1 suportam o html additionalInfo por padrão no campo UI Form.

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

Não é necessário modificar o modelo field.html.

Milind Singh
fonte