使用ui组件在表单字段下添加注释


18

如何使用ui组件在Magento 2中的字段下添加小文本。
使用Magento\Framework\Data\Form我可以做到这一点:

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

上面的代码将产生此结果(请注意该字段下的文本)。

如何使用表单ui-components实现同一件事?
我有这样定义的形式:

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

我尝试添加,<item name="note" xsi:type="string" translate="true">Some note here</item>但是,您猜怎么着?

Answers:


32

您可以使用以下标记实现此目的。

<item name="notice" xsi:type="string" translate="true">Some note here</item>

谢谢。有用。我添加translate="true"只是为了使可翻译的短语收集器脚本也能理解这一点。
马里斯(Marius)

@Marius您知道如何在通知中使用html代码吗?
谢尔盖·科若夫

@SergeyKorzhov试试 <item name="notice" xsi:type="string" translate="true"><![CDATA[Some note <a href="https://google.com">here</a>]]></item>
Marius

@马里乌斯我在问之前做了。不起作用。有趣的是,即使没有CDATA,html在system.xml中也能正常工作。
谢尔盖·科若夫

在此通知中,我是否应在消息之间提供动态数据?这有可能吗@Marius
Jaisa

3

我真的很烦人的时间弄清楚如何使html呈现在notice对象中。我已经找到了两种解决方案。我知道这可能是一条评论,但我认为其他人也会对此功能感兴趣。

  1. 创建一个新的html元素,将通知显示为HTML而不是文本

原始元素可以在找到 /vendor/magento/module-ui/view/base/web/templates/form/field.html

使用路径view/base/web/template/form/field-html-notice.html或类似路径将其复制到模块中(请注意,将templates目录更改template为自定义模板文件有意且必需的目录

现在,在新的field-html-notice.html文件中,您可以修改html文件以加载$data.notice使用html的文件,而完全跳过跨度。(当然,如果您要翻译html,则需要自定义此解决方案以找到一些解决方法)

解决方案是采用此模板并进行修改

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

看起来像这样:

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

花时间去做之后,我意识到Magento团队很方便地给了我们添加additionalInfo以html形式呈现的功能。

  1. 添加具有notification类的div作为组件的附加信息

更具粘性的选项是在本additionalInfo节中呈现notify div 。遵循以下原则

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

是的,简单吧?好。我现在要去睡觉。

(请注意,如果您在附加信息中使用实际字符<>字符,则xml验证器将中断,因此&lt;&gt;

注意:事实证明,您可以将HTML包装在<![CDATA[<p>cool paragraph man</p>]] 感谢@Marius中


1
<item name =“ additionalInfo” xsi:type =“ string” translation =“ true”>效果要好得多,然后注意
CompactCode

<![CDATA[<p>cool paragraph man</p>]] 在 mag.2.2.2 下不起作用,message但可以使用additionalInfomag.2.2.2
Juliano Vargas

2

当前的Magento 2版本2.2.8和2.3.1都默认在UI Form字段中支持html AdditionalInfo。

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

无需修改field.html模板。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.