How to use Text Component in custom Admin form?

Question

I am trying to insert simple text to my custom form (not system.xml).

There is a UI component for Form or DynamicRow to show static text: https://devdocs.magento.com/guides/v2.3/ui_comp_guide/components/ui-text.html

How I try to use it:

 ...
 </field>
 <text name="my_text">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="visible" xsi:type="boolean">true</item>
 <item name="label" xsi:type="string">My Text</item>
 </item>
 </argument>
 <settings>
 <label translate="false">My Text</label>
 <addBefore translate="false">My Text</addBefore>
 <addAfter translate="false">My Text</addAfter>
 </settings>
 </text>
 <field name="i_am_next_field" formElement="textarea">
 ...

It seems incorrect way to use this ui component. How to insert text to my form?

• wesleywmd: Where are you trying to add the text? Most ui components for forms have a comment attribute that displays helper text directly underneath that component. Will that help?
• Ruslan Mavlyanov: Almost correct! Yeap, I'm trying to add comment ( <item name="notice" ) to dynamicRow. But it's not provided in dynamicRow tempate. For simple fields notice works like a charm
• wesleywmd: It appears you may have to create a custom template and add a display for a comment so that you can pass it in from the xml.
• Ruslan Mavlyanov: As far as I can see template already exists: magento/module-ui/view/base/web/templates/form/element/text.html. But how to use it?

Answer 1

Step 1) Ui component XML

-------------------
-------------------
<field name="my_text"> 
 <argument name="data" xsi:type="array"> 
 <item name="config" xsi:type="array">
 <item name="formElement" xsi:type="string">input</item> 
 <!-- Assigning a new template -->
 <item name="elementTmpl" xsi:type="string">Company_MyModule/form/element/mytext</item>
 </item>
 </argument>
 </field>
-------------------
-------------------

step 2) /app/code/Company/MyModule/view/adminhtml/web/template/form/mytext.html

<p> My text goes here ................</p>

• Ruslan Mavlyanov: It achieves the goal to show text. But this approach does not use Text Ui Component. My question was how to use built-in Text component. It seems underdone functionality :(

Answer 2

You may try this.

 <fieldset name="MyFieldsetName">
--------------------------
--------------------------
 <field name="my_text">
 <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">My Text</item>
 <item name="formElement" xsi:type="string">input</item>
 <item name="source" xsi:type="string">MyFieldsetName</item>
 <item name="dataScope" xsi:type="string">my_text</item>
 <item name="sortOrder" xsi:type="number">30</item>
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="boolean">true</item> 
 </item>
 </item>
 </argument>
 </field> 
--------------------------
--------------------------
</fieldset>

• Ruslan Mavlyanov: Not works. It's ordinary input.