Magento – Adding label in ui-component form

magento-2.1ui-formuicomponent

In UI component form, input fields(text and text area) are working allright. But when i try to replace it with a label it gives an error.

Code:

<field name="name">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string">Name</item>
                <item name="visible" xsi:type="boolean">true</item>
                <item name="dataType" xsi:type="string">text</item>
                <item name="formElement" xsi:type="string">label</item>
            </item>
        </argument>
</field>

Error:

Exception #0 (Magento\Framework\Exception\LocalizedException): The requested component ("label") is not found. Before using, you must add the implementation.

I have researched a lot and couldn't find any worth mentioning solution.

Best Answer

Magento 2 has it's own Ui module which contains all Form elements including Checkbox, CheckboxSet, Hidden, Input, MultiSelect, Radio, Select, Textarea, Wysiwyg. but It has not a Label element.

So If you want to add a field which contains dynamic text just for visible purpose then you can use container.

uiComponent form:

<container name="note_container">
   <argument name="data" xsi:type="array">
       <item name="config" xsi:type="array">
          <item name="sortOrder" xsi:type="number">30</item>
       </item>
   </argument>
   <htmlContent name="html_content">
       <argument name="block" xsi:type="object"><VendorName>\<ModuleName>\Block\Adminhtml\<CustomClass></argument>
        </htmlContent>
 </container>

Custom Class can contains your dynamic value in html or can call custom template file:

<?php

namespace <VendorName>\<ModuleName>\Block\Adminhtml;
use Magento\Framework\View\Element\Template;

class CustomClass extends Template
{
    protected $_template = 'custom.phtml';
}

custom.phtml can contains your visible data on form.

Related Solutions

Magento-2.1 – Create Custom Form Component Field Based on Another Field Value

Try this (Note: Don't forget to replace the line "Namespace" and the line "ModuleName" with your values):

<field name="field1">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Namespace\ModuleName\Model\Config\Source\Options</item>
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Parent Option</item>
            <item name="component" xsi:type="string">Namespace_ModuleName/js/form/element/options</item>
            <item name="visible" xsi:type="boolean">true</item>
            <item name="dataType" xsi:type="string">number</item>
            <item name="formElement" xsi:type="string">select</item>
            <item name="source" xsi:type="string">item</item>
            <item name="dataScope" xsi:type="string">field1</item>
            <item name="sortOrder" xsi:type="number">210</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>

<field name="field2Depend1">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string">Field 1</item>
            <item name="dataType" xsi:type="string">text</item>
            <item name="formElement" xsi:type="string">input</item>
            <item name="source" xsi:type="string">item</item>
            <item name="sortOrder" xsi:type="number">220</item>
            <item name="breakLine" xsi:type="boolean">true</item>
            <item name="visibleValue" xsi:type="string">2</item>
            <item name="visible" xsi:type="boolean">false</item>
        </item>
    </argument>
</field>
<field name="field3Depend1">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string">Field 2</item>
            <item name="dataType" xsi:type="string">text</item>
            <item name="formElement" xsi:type="string">input</item>
            <item name="source" xsi:type="string">item</item>
            <item name="sortOrder" xsi:type="number">230</item>
            <item name="breakLine" xsi:type="boolean">true</item>
            <item name="visibleValue" xsi:type="string">0</item>
            <item name="visible" xsi:type="boolean">false</item>
        </item>
    </argument>
</field>

Where:

The child elements visibility is set by default as false;
The visibleValue - is field1 value when element should be visible;

Namespace\ModuleName\Model\Config\Source\Options

namespace Namespace\ModuleName\Model\Config\Source;

use Magento\Framework\Option\ArrayInterface;

class Options implements ArrayInterface
{
    /**
     * @return array
     */
    public function toOptionArray()
    {
        $options = [
            0 => [
                'label' => 'Please select',
                'value' => 0
            ],
            1 => [
                'label' => 'Option 1',
                'value' => 1
            ],
            2  => [
                'label' => 'Option 2',
                'value' => 2
            ],
            3 => [
                'label' => 'Option 3',
                'value' => 3
            ],
        ];

        return $options;
    }
}

app/code/Namespace/ModuleName/view/adminhtml/web/js/form/element/options.js

define([
    'underscore',
    'uiRegistry',
    'Magento_Ui/js/form/element/select',
    'Magento_Ui/js/modal/modal'
], function (_, uiRegistry, select, modal) {
    'use strict';

    return select.extend({

        /**
         * On value change handler.
         *
         * @param {String} value
         */
        onUpdate: function (value) {
            console.log('Selected Value: ' + value);

            var field1 = uiRegistry.get('index = field2Depend1');
            if (field1.visibleValue == value) {
                field1.show();
            } else {
                field1.hide();
            }

            var field2 = uiRegistry.get('index = field3Depend1');
            if (field2.visibleValue == value) {
                field2.show();
            } else {
                field2.hide();
            }

            return this._super();
        },
    });
});

Result:

Value 0 selected:

Value 1 selected:

Value 2 selected:

Value 3 selected:

PS: Possibly it not the best solution, but it shall help you

Magento 2.1 – Create Custom Modal UI Form Component

[UPDATED MY ANSWER]
etc/adminhtml/di.xml
Add modifier to add custom form modal

<virtualType name="Vendor\Module\Ui\DataProvider\Item\Form\Modifier\Pool" type="Magento\Ui\DataProvider\Modifier\Pool">
    <arguments>
        <argument name="modifiers" xsi:type="array">
            <item name="item-form-modal" xsi:type="array">
                <item name="class" xsi:type="string">Vendor\Module\Ui\DataProvider\Item\Form\Modifier\Item</item>
                <item name="sortOrder" xsi:type="number">10</item>
            </item>
        </argument>
    </arguments>
</virtualType>

Button action for render modal

return [
        'label' => __('Add New Item'),
        'class' => 'primary button-add-item',
        'data_attribute' => [
            'mage-init' => [
                'Magento_Ui/js/form/button-adapter' => [
                    'actions' => [
                        [
                            'targetName' => 'item_form.item_form.item_form_modal',
                            'actionName' => 'toggleModal'
                        ],
                        [
                            'targetName' => 'item_form.item_form.item_form_modal.insert_item_form',
                            'actionName' => 'render'
                        ]
                    ]
                ]
            ]
        ],
        'on_click' => '',
        'sort_order' => 20
    ];
}

File Modifier where i defination form

return $this->arrayManager->set(
        'item_form_modal',
        $meta,
        [
            'arguments' => [
                'data' => [
                    'config' => [
                        'isTemplate' => false,
                        'componentType' => 'modal',
                        'options' => [
                            'title' => __('New Item'),
                        ],
                        'imports' => [
                            'state' => '!index=insert_item_form:responseStatus'
                        ],
                    ],
                ],
            ],
            'children' => [
                'insert_item_form' => [
                    'arguments' => [
                        'data' => [
                            'config' => [
                                'label' => '',
                                'componentType' => 'container',
                                'component' => 'Magento_Ui/js/form/components/insert-form',
                                'dataScope' => '',
                                'update_url' => $this->urlBuilder->getUrl('mui/index/render'),
                                'render_url' => $this->urlBuilder->getUrl(
                                    'mui/index/render_handle',
                                    [
                                        'handle' => 'megamenuadmin_item_form',
                                        'store' => $this->_storeManager->getStore()->getId(),
                                        'buttons' => 1
                                    ]
                                ),
                                'autoRender' => false,
                                'ns' => 'item_add_form',
                                'externalProvider' => 'item_add_form.item_add_form_data_source',
                                'toolbarContainer' => '${ $.parentName }',
                                'formSubmitType' => 'ajax',
                            ],
                        ],
                    ]
                ]
            ]
        ]
    );

item_form_modal has child element form ui insert_item_form insert via ajax. Handle layout megamenuadmin_item_form contain ui-form. Between children [] you can add any components such as: fieldsets, fields, selects, inputs v.v or ui-form like i do

layout megamenuadmin_item_form

 <page>
    <referenceContainer name="content">
     <uiComponent name="item_add_form"/>
   </referenceContainer>
 </page>

form ui-component item_add_form

<?xml version="1.0" encoding="UTF-8"?>

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<argument name="data" xsi:type="array">
    <item name="js_config" xsi:type="array">
        <item name="provider" xsi:type="string">item_add_form.item_add_form_data_source</item>
        <item name="deps" xsi:type="string">item_add_form.item_add_form_data_source</item>
        <item name="namespace" xsi:type="string">item_add_form</item>
    </item>
    <item name="buttons" xsi:type="array">
        <item name="cancel" xsi:type="string">Vendor\Module\Block\Adminhtml\Item\Button\Cancel</item>
        <item name="save" xsi:type="string">Vendor\Module\Block\Adminhtml\Item\Button\Save</item>
    </item>
    <item name="template" xsi:type="string">templates/form/collapsible</item>
    <item name="config" xsi:type="array">
        <item name="ajaxSaveType" xsi:type="string">simple</item>
    </item>
</argument>
<dataSource name="item_add_form_data_source">
    <argument name="dataProvider" xsi:type="configurableObject">
        <argument name="class" xsi:type="string">Vendor\Module\Model\Item\DataProvider</argument>
        <argument name="name" xsi:type="string">item_add_form_data_source</argument>
        <argument name="primaryFieldName" xsi:type="string">id</argument>
        <argument name="requestFieldName" xsi:type="string">menu_id</argument>
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="submit_url" xsi:type="url" path="megamenuadmin/item/save"/>
            </item>
        </argument>
    </argument>
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
        </item>
    </argument>
</dataSource>
<fieldset name="filedset1">
    Fields go here
</fieldset>
<fieldset name="fieldset2">


</fieldset>
</form>

Best Answer

Related Solutions

Magento-2.1 – Create Custom Form Component Field Based on Another Field Value

Magento 2.1 – Create Custom Modal UI Form Component

Related Topic