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

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.