0

I have Created one admin form using UI component.

I want to display one dependent filed on another files update.

here is my code:

        <field name="type">
            <argument name="data" xsi:type="array">
                <item name="options" xsi:type="object">Vendor\BannerManagement\Model\Config\Source\Type</item>
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string">Type</item>
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">select</item>
                    <item name="formElement" xsi:type="string">select</item>
                    <item name="dataScope" xsi:type="string">type</item>
                    <item name="component" xsi:type="string">Vendor_BannerManagement/js/form/element/element</item>
                </item>
            </argument>
        </field>
        <field name="default_template">
            <argument name="data" xsi:type="array">
                <item name="options" xsi:type="object">Vendor\BannerManagement\Model\Config\Source\Template</item>
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string">Demo template</item>
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">select</item>
                    <item name="formElement" xsi:type="string">select</item>
                    <item name="dataScope" xsi:type="string">default_template</item>
                    <item name="component" xsi:type="string">Vendor_BannerManagement/js/form/element/defaultTemplate</item>
                </item>
            </argument>
        </field>
        <field name="default_image">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="elementTmpl" xsi:type="string">Vendor_BannerManagement/form/element/defaultTemplate</item>
                </item>
            </argument>
        </field>
         <field name="content">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="visible" xsi:type="boolean">false</item>
                    <item name="formElement" xsi:type="string">wysiwyg</item>
                    <item name="template" xsi:type="string">ui/form/field</item>
                    <item name="wysiwyg" xsi:type="boolean">true</item>
                    <item name="sortOrder" xsi:type="number">50</item>
                    <item name="rows" xsi:type="number">8</item>
                    <item name="dataScope" xsi:type="string">content</item>
                </item>
            </argument>
        </field>

using type I want to display another three field

and using Demo template I want to change "default_image" src value but it's not working

here my element.js file

     define([
        'underscore',
        'uiRegistry',
        'Magento_Ui/js/form/element/select',
        'mage/url'
    ], function (_, uiRegistry, select, url) {
        'use strict';
        return select.extend({

            initialize: function (){
                var type= this._super().initialValue;
                this.makevisilibily(type);
                return this;

            },

            /**
             * On value change handler.
             *
             * @param {String} value
             */
            onUpdate: function (value) {
                this.makevisilibily(value);
                return this._super();
            },

            makevisilibily: function (value) {

                var field1 = uiRegistry.get('banner_form.areas.general.general.default_template');
                var field2 = uiRegistry.get('banner_form.areas.general.general.default_image');
                var field3 = uiRegistry.get("banner_form.areas.general.general.content");

                if (value == 1) {
                    field1.visible(true);
                    field2.visible(true);
                    // field3.visible(true);
                } else {
                    field1.visible(false);
                    field2.visible(false);
                    //field3.visible(false);
                }

                return this._super();
            },
              displayTemplateImage: function () {
                var defaultTemplate = uiRegistry.get('banner_form.areas.general.general.default_template');
                var image1= "demo1.png";
                var image2= "demo2.png";
                var image3= "demo3.png";
                var image4= "demo4.jpg";
                var image5= "demo5.jpg";
                var imageSrc="image"+ defaultTemplate;
                alert(imageSrc);
                jQuery("#mp-demo-image").attr("src",imageSrc);

            }
        });
    });

defaultTemplate.js

define([
    'underscore',
    'uiRegistry',
    'Magento_Ui/js/form/element/select'
], function (_, uiRegistry, select) {
    'use strict';
    return select.extend({
        /**
         * On value change handler.
         *
         * @param {String} value
         */
        onUpdate: function (value) {
            this.displayTemplateImage(value);
            return this._super();
        },

        displayTemplateImage: function (value) {
            var image1= "demo1.png";
            var image2= "demo2.png";
            var image3= "demo3.png";
            var image4= "demo4.jpg";
            var image5= "demo5.jpg";
            var imageSrc="image"+value;
            jQuery("#mp-demo-image").attr("src",imageSrc);

        }
    });
});

I have already refer this Already refered link

but i want js component for second filed too

Please read carefully before making it duplicate

  • Hello Mam.. Do you got a solution for this i am struck in same issue mine code is working fine on update but not working on initialize – Waqar Ali Feb 25 at 5:54
  • By initially it will display by name and also need to settimeout for some seconds – Rutvee Sojitra Feb 25 at 6:29
  • do you have add called setTmeout on both update and intialize? – Waqar Ali Feb 25 at 6:34
  • NO on initialize time – Rutvee Sojitra Feb 25 at 8:22
  • can you please share the piece of code in you answer... – Waqar Ali Feb 25 at 9:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.