How to show/hide UiComponent form field on based of new/edit mode

Question

I want to show shortcode field once record inserted. else on new record is should be hidden.

Ui Component form field xml:

       <field name="shortcode">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="visible" xsi:type="boolean">false</item>
                    <item name="disabled" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Shortcode</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">banner</item>
                    <item name="sortOrder" xsi:type="number">10</item>
                    <item name="dataScope" xsi:type="string">shortcode</item>
                    <item name="notice" xsi:type="string" translate="true">Copy this shortcode to CMS Block/Page to show banner slider</item>
                    <item name="component" xsi:type="string">Rchauhan_BannerSlider/js/form/element/toggle-checkbox-category</item>
                </item>
            </argument>
        </field>

toggle-checkbox-category.js:

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

    return textbox.extend({
        /**
         * Choose notice on initialization
         *
         * @returns {*|void|Element}
         */
        initialize: function (value) {
            this._super();

            setTimeout(function () {
                let field1 = uiRegistry.get('index = entity_id');
                let field2 = uiRegistry.get('index = shortcode');

                if (field1.getInitialValue()) {
                    field2.show();
                } else {
                    field2.hide();
                }
            }, 2000)

            return this;
        },

        /**
         * On value change handler.
         *
         * @param {String} value
         */
        onUpdate: function (value) {
            var field1 = uiRegistry.get('index = entity_id');
            var field2 = uiRegistry.get('index = shortcode');

            console.log(field1.getInitialValue());

            if (field1.getInitialValue()) {
                field2.show();
            } else {
                field1.hide();
            }

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

Any suggestions would be welcome. Thanks.

Answer 1

You need to replace this below line in your xml file :

<item name="visible" xsi:type="boolean">${ $.provider }:data.hide_field</item>

and then, add condition in your dataprovider file like below way :

/**
 * @var \Magento\Framework\App\RequestInterface
 */
protected $request;

public function __construct(
    \Magento\Framework\App\RequestInterface $request
){
    $this->request = $request;  
}

public function getData(){
    $id = $this->request->getParam('entity_id');
    if($id)
        $this->loadedData[$id]['hide_field'] = true;
    else
        $this->loadedData[$id]['hide_field'] = false;
    return $this->loadedData;
}

You need to change code based on your requirement in your module's dataprovider file.

Reference : Magento\Catalog\Model\Category\DataProvider.php