How to show a plain text value on admin ui form

Question

I have create a ui form. The data is getting inserted successfully. Now i want to edit the form, but i want only certain field to get edited not all.

The remaining field should be shown in a simple plain text.

How can i achieve it?

Answer 1

You can make that field read only by disbling it.

You have to just add more below line in your form field code

       <item name="disabled" xsi:type="boolean">true</item>

for notice vendor\module\view\base\web\templates\form create field-html-notice.html

with below code

<div class="admin__field"
 visible="visible"
 css="$data.additionalClasses"
 attr="'data-index': index">
<label class="admin__field-label" if="$data.label" visible="$data.labelVisible" attr="for: uid">
    <span translate="label" attr="'data-config-scope': $data.scopeLabel"/>
</label>
<div class="admin__field-control"
     css="'_with-tooltip': $data.tooltip, '_with-reset': $data.showFallbackReset && $data.isDifferedFromDefault">
    <render args="elementTmpl" ifnot="hasAddons()"/>

    <div class="admin__control-addon" if="hasAddons()">
        <render args="elementTmpl"/>

        <label class="admin__addon-prefix" if="$data.addbefore" attr="for: uid">
            <span text="addbefore"/>
        </label>
        <label class="admin__addon-suffix" if="$data.addafter" attr="for: uid">
            <span text="addafter"/>
        </label>
    </div>

    <render args="tooltipTpl" if="$data.tooltip"/>

    <render args="fallbackResetTpl" if="$data.showFallbackReset && $data.isDifferedFromDefault"/>

    <label class="admin__field-error" if="error" attr="for: uid" text="error"/>

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

    <render args="$data.service.template" if="$data.hasService()"/>
</div>

and add in your ui-form below filed like:

          <field name="test_filed_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">Subscription Period</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="source" xsi:type="string">model</item>
               <item name="additionalInfo" xsi:type="string" translate="true">
                ${ $.provider }:data.test_filed_name                 
                </item>
                <item name="dataScope" xsi:type="string">subscription_period</item>
         </item>
        </argument>
    </field>

please try this i am not sure about ${ $.provider }:data.test_filed_name

Answer 2

<field formElement="input" name="field_name">
    <settings>
        <label translate="true">Field label</label>
        <dataScope>field name</dataScope>
        <elementTmpl>ui/form/element/text</elementTmpl>
    </settings>
</field>

This makes it as you want: just label + text instead of input field