Magento 2.1 আমি কীভাবে ফর্ম উপাদান ক্ষেত্র কাস্টম তৈরি করতে পারি অন্য ক্ষেত্রের মানের উপর নির্ভর করে?

Question

আমার একটি ফিল্ড সিলেক্ট আছে যার কিছু বিকল্প রয়েছে। এর মধ্যে একটিতে কিছু ক্ষেত্র মানের উপর নির্ভর করবে, অন্য ক্ষেত্রটি লুকিয়ে থাকবে। আমি আমার ক্ষেত্রের জন্য উপাদান js অনুলিপি করেছি এবং প্রসারিত করেছি তবে এটি কার্যকর হয়নি বা আমি এটি ভুল উপায়ে করেছি। ইউআই উপাদান এই বৈশিষ্ট্য সমর্থন করে? আমি কীভাবে এটি অর্জন করতে পারি?

নীচে আমি যা করেছি তা হল:

<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">Field name</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="component" xsi:type="string">Pathto/js/form/element/options</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>

<field name="field2Depend1"></field>
<field name="field3Depend1"></field>

জেএস কম্পোনেন্ট js/form/element/options:

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

    return select.extend({

        onChange: function () {
            this.enableDisableFields();
        },

        /**
         * Enable/disable fields on Coupons tab
         */
        enableDisableFields: function () {
            // code check field
        }
    });
});

Answer 1

এটি ব্যবহার করে দেখুন ( দ্রষ্টব্য : "নেমস্পেস" লাইন এবং "মান্যডনাম" লাইনটি আপনার মানগুলির সাথে প্রতিস্থাপন করতে ভুলবেন না):

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

কোথায়:

• শিশু উপাদানগুলির দৃশ্যমানতা ডিফল্ট হিসাবে সেট করা আছে false;
• visibleValue- হয় field1মান যখন উপাদান দেখতে পাওয়া উচিত;

নামস্থান \ moduleName \ মডেল \ কনফিগ \ উত্স \ বিকল্প

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;
    }
}

অ্যাপ্লিকেশন / কোড / নামস্থান / moduleName / দৃশ্য / adminhtml / ওয়েব / JS / ফর্ম / উপাদান / 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();
        },
    });
});

ফলাফল:

মান 0 নির্বাচিত:

মান 1 নির্বাচিত:

মান 2 নির্বাচিত:

মান 3 নির্বাচিত:

PS: সম্ভবত এটি সেরা সমাধান নয়, তবে এটি আপনাকে সহায়তা করবে

Comments

onUpdate ভাল কাজ করছে, তবে কীভাবে অনলোড করবেন? ফিল্ড 1. মূল্য কিভাবে পাবেন?

— zhartaunik

@ ঝারটৌনিক আমার ধারণা initializeআপনার ক্ষেত্রে পদ্ধতিটি ব্যবহার করা উচিত কারণ আপনার ক্ষেত্রে ইউআই-এলিমেন্টের কোনও onLoadপদ্ধতি নেই। আপনি রেজিস্ট্রি ইনপুট সূচক কী ব্যবহার থেকে কোন জায়গায় কোন ক্ষেত্রের মান পেতে পারেন: uiRegistry.get('index = field1')। আপনার যদি আরও প্রশ্ন থাকে তবে দয়া করে আমাকে স্কাইপে ঠিকানা দিন (সরজ ১৯৯৯) রাশিয়ান ভাষায় যোগাযোগ করা আরও সহজ হবে।

— সিয়ারে উখুলেবাউ

ধন্যবাদ @ সিয়ারে আমি প্রাথমিক ব্যবহার করার সিদ্ধান্ত নিয়েছি। এই.সুপার, প্রয়োজনীয় যাচাইকরণ যুক্ত করার চেয়ে।

— জারতৌনিক

আমি যখন প্রাথমিক পদ্ধতি পদ্ধতির মানটি "অপরিজ্ঞাত" হয় তখন আমি ক্ষেত্রের মান পেতে পারি না।

— সৌরভ তালেটিয়া

@ সিয়ারে উছুখলেবাউ আমি কি এর পরিবর্তে চেকবক্স যুক্ত করতে পারি?

— জুলিয়ানো ভার্গাস

Answer 2

ম্যাগানটিক্সের প্রস্তাবিত সমাধানটি প্রাথমিককরণ ব্যবহার করার সময় সময়ে সময়ে একটি ত্রুটি ফেলে দেবে। এটি আপনার ব্রাউজারের উপাদানগুলি রেন্ডার করতে সময় নেয় তার উপর নির্ভর করে। এটি ঠিক করার জন্য আপনি সেটটাইমআউট ব্যবহার করতে পারেন।

নীচের কোডটি দেখুন:

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

    return select.extend({

        /**
         * Extends instance with defaults, extends config with formatted values
         *     and options, and invokes initialize method of AbstractElement class.
         *     If instance's 'customEntry' property is set to true, calls 'initInput'
         */
        initialize: function () {
            this._super();

            this.resetVisibility();

            return this;
        },

        toggleVisibilityOnRender: function (visibility, time) {
            var field = uiRegistry.get('index = field_to_toggle');
            if(field !== undefined) {
                if(visibility == 1) {
                    field.show();
                } else {
                    field.hide();
                }

                return;
            }
            else {
                var self = this;
                setTimeout(function() {
                    self.toggleVisibilityOnRender(visibility, time);
                }, time);
            }
        },

        /**
         * On value change handler.
         *
         * @param {String} value
         */
        onUpdate: function (value) {
            if (value == 1) {
                this.showField();
            } else {
                this.hideField();
            }
            return this._super();
        },

        resetVisibility: function () {
            if (this.value() == 1) {
                this.showField();
            } else {
                this.hideField();
            }
        },

        showField: function () {
            this.toggleVisibilityOnRender(1, 1000);

        },

        hideField: function () {
            this.toggleVisibilityOnRender(0, 1000);
        }
    });
});

Comments

এটি সঠিকভাবে কাজ করছে।

— duদুক মিতেশ

আমার পক্ষ থেকে +1 অন্য কোনও কাজ নয় তবে এটি আমার কাজ করে।

— বেনামে

Answer 3

এটি একাধিক উত্তর সহ একটি পুরানো প্রশ্ন যা কাজ করে, তবে আমি Magento কী সরবরাহকারী উপাদানগুলির প্রযোজনীয়তা ছাড়াই (2.1.0 হিসাবে) যা সরবরাহ করে তা ব্যবহার করে একটি সমাধান আবিষ্কার করেছি। যেহেতু একাধিক প্রশ্নগুলি নকল হিসাবে চিহ্নিত হয়েছে এবং এখানে নির্দেশিত হয়েছে আমি এই বিকল্পটিতে কিছু তথ্য সরবরাহ করা সুবিধাজনক হবে বলে ভেবেছিলাম।

সমস্ত ফর্ম উপাদান ইউআই উপাদানগুলি প্রসারিত করে Magento_Ui/js/form/element/abstract.jsএমন উপাদানগুলির switcherConfigজন্য যেমন লুকানো / দেখানোর পাশাপাশি অন্যান্য ক্রিয়াগুলির জন্য একটি সেটিং উপলব্ধ থাকে। switcherকম্পোনেন্ট পাওয়া যাবে Magento_Ui / JS / ফর্ম / পরিবর্তনকারী জানতে আগ্রহী জন্য। বিক্রয়_rule_form.xML এবং ক্যাটালগ_রুলে_ফর্ম.এক্সএমএল এর ব্যবহারের উদাহরণগুলি আপনি খুঁজে পেতে পারেন । অবশ্যই যদি আপনি ইতিমধ্যে নিজের কাস্টম উপাদান ব্যবহার করছেন তবে আপনি এখনও অবধি এটি ব্যবহার করতে পারবেন যতক্ষণ না আপনার উপাদানটি অবশেষে প্রসারিত হয় abstractযা প্রশ্নের প্রদত্ত উদাহরণ কোডের ভিত্তিতে কেস হিসাবে উপস্থিত বলে মনে হয়।

মূল প্রশ্নের উত্তর দেওয়ার জন্য এখন আরও একটি নির্দিষ্ট উদাহরণের জন্য।

নিয়ন্ত্রণের Namespace/ModuleName/view/adminhtml/ui_component/your_entity_form.xmlক্ষেত্রে ক্ষেত্রের মধ্যে আপনাকে কেবল নিম্নলিখিতটি যুক্ত করতে হবে settings(অর্থাত্ ক্ষেত্রটি কোন ক্ষেত্রটি লুকিয়ে / দৃশ্যমান) তা নির্ধারণ করে। আপনার উদাহরণে এটি হবে field1।

<field name="field1">
    <argument name="data" xsi:type="array">
        ...
    </argument>
    <settings>
        <switcherConfig>
            <rules>
                <rule name="0">
                    <value>2</value>
                    <actions>
                        <action name="0">
                            <target>your_entity_form.your_entity_form.entity_information.field2Depend1</target>
                            <callback>show</callback>
                        </action>
                        <action name="1">
                            <target>your_entity_form.your_entity_form.entity_information.field3Depend1</target>
                            <callback>hide</callback>
                        </action>
                    </actions>
                </rule>
                <rule name="1">
                    <value>3</value>
                    <actions>
                        <action name="0">
                            <target>your_entity_form.your_entity_form.entity_information.field2Depend1</target>
                            <callback>hide</callback>
                        </action>
                        <action name="1">
                            <target>your_entity_form.your_entity_form.entity_information.field3Depend1</target>
                            <callback>show</callback>
                        </action>
                    </actions>
                </rule>
            </rules>
            <enabled>true</enabled>
        </switcherConfig>
    </settings>
</field>

একে একে একটু ভেঙে ফেলি। switcherউপাদানের একটি অ্যারের রয়েছে rulesযা আমরা এখানে কি আউট তৈরি করছি হয়। প্রত্যেকের <rule>একটি নাম রয়েছে যা এই উদাহরণে একটি সংখ্যা। এই নামটি এই আইটেমটির জন্য অ্যারে কী / সূচক। আমরা সংখ্যাগুলি অ্যারে সূচক হিসাবে ব্যবহার করছি। স্ট্রিংগুলিতেও কাজ করা উচিত তবে আমি এই তত্ত্বটি পরীক্ষা করি নি । আপডেট - @ ক্রিসটফেরফেরিবোউফ মন্তব্য হিসাবে মন্তব্য করেছেন, এখানে কাজ না করার জন্য স্ট্রিং। এগুলি অ্যারে এবং 0স্ট্রিং বা 1 দিয়ে নয়, শুরু হওয়া উচিত ।

প্রতিটি ভিতরে ruleআমরা দুটি যুক্তি পাস।

1. value- এটি হ'ল এর মান field1যার actionsনীচে সংজ্ঞায়িত ট্রিগার করা উচিত ।
2. actions- এখানে আমাদের আরেকটি অ্যারে আছে। এই নিয়মের শর্ত পূরণ করার সময় এগুলি ট্রিগার করা হবে। আবার, প্রত্যেকের actionনাম সেই আইটেমটির অ্যারে সূচক / কী is

এখন প্রত্যেকের actionপাশাপাশি দুটি তর্ক রয়েছে (3rdচ্ছিক তৃতীয় সহ)।

1. target- এই উপাদানটির মাধ্যমে আপনি যে কৌশলটি পরিচালনা করতে চান এটি এটি। আপনি কীভাবে ui_comp घटक উপাদান নামগুলি ম্যাজেন্টোতে রচিত তা সম্পর্কে আপনি যদি জানেন না তবে আপনি অ্যালান স্টর্মের নিবন্ধটি পরীক্ষা করে দেখতে পারেন । এটি মূলত {component_name}.{component_name}.{fieldset_name}.{field_name}এই উদাহরণের মতো কিছু ।
2. callback- এখানে উল্লিখিত ব্যবস্থা গ্রহণ করা হবে target। এই কলব্যাকটি এমন একটি ফাংশন হওয়া উচিত যা লক্ষ্যমাত্রার উপাদানটিতে উপলব্ধ। আমাদের উদাহরণ ব্যবহার করে hideএবং show। আপনি এখানে উপলব্ধ কার্যকারিতাটি প্রসারিত করতে শুরু করতে পারেন। catalog_rule_form.xmlউদাহরণস্বরূপ আমি আগেও ব্যবহারসমূহ উল্লিখিত setValidationযদি আপনি একটি ভিন্ন উদাহরণ দেখতে ইচ্ছুক।
3. এছাড়াও আপনি যোগ করতে পারেন <params>কোন actionযে তাদের জন্য কল। আপনি catalog_rule_form.xmlউদাহরণে এটি দেখতেও পারেন ।

অবশেষে শেষ আইটেমটি switcherConfigহ'ল <enabled>true</enabled>। এটি বেশ সোজা এগিয়ে হওয়া উচিত, এটি সবেচার কার্যকারিতা সক্ষম / অক্ষম করার জন্য বুলিয়ান

এবং আমরা সম্পন্ন করেছি। সুতরাং আপনি কি দেখতে পাবেন উপরের উদাহরণে ব্যবহার ক্ষেত্র field2Depend1যদি আপনি মান একটি বিকল্প নির্বাচন করুন প্রদর্শিত 2উপর field1, এবং field3Depend1প্রদর্শিত যদি মান একটি বিকল্প নির্বাচন করুন 3।

আমি এই উদাহরণটি কেবলমাত্র hideএবং showপ্রয়োজনীয় ক্ষেত্রে ব্যবহার করে পরীক্ষা করেছি এবং এটি বৈধতার জন্য অ্যাকাউন্টে দৃশ্যমানতা গ্রহণ করবে বলে মনে হয় না। অন্য কথায়, যদি field2Depend1প্রয়োজন হয় তবে এটি দৃশ্যমান হলেই প্রয়োজন হবে। এটির জন্য আরও কনফিগারেশন প্রয়োজন নেই।

আশা করি বাক্সের বাইরে থাকা আরও সলিউশন খুঁজছেন এমন কাউকে এটির জন্য কিছু সহায়তা প্রদান করা হয়েছে।

Comments

"স্ট্রিংগুলির খুব বেশি কাজ করা উচিত তবে আমি এই তত্ত্বটি পরীক্ষা করি নি।" আমি দুর্ঘটনাক্রমে পরীক্ষিত হয়েছি এবং এটি হয় না ... ক্রিয়াগুলি নিয়মের অ্যারে হিসাবে শুরু হয় যা 0 বা নিয়ম 0 নয় 1 বা একটি স্ট্রিং দিয়ে শুরু করা দরকার ...

— ক্রিস্টোফ ফেরেবোউফ

Answer 4

এই প্রশ্নের জন্য অনেক উত্তর রয়েছে, তবে তাদের বেশিরভাগই ইউআইআরজিস্ট্রি পুরোপুরি লোড হয়েছে কিনা, বা setTimeoutকল স্ট্যাকটি সাফ করার জন্য ব্যবহার করে কিনা তা নিয়ে অনুমান করে এবং পরবর্তী ইভেন্টলুপের জন্য অপেক্ষা করুন (যা আমার মতে এখনও ভুল পথে আছে) এটি করুন - যেহেতু আপনি নিশ্চিত হতে পারবেন না যে কখন অন্যান্য ইউআই উপাদান লোড হয়েছে - আমি ভুল হলে আমাকে সংশোধন করুন)।

প্রথমত, অবশ্যই, আপনার কাস্টম জেএস উপাদানটি ফিল্ড কনফিগারেশনে যুক্ত করুন (বিশদটির জন্য অন্যান্য উত্তর দেখুন):

<item name="component" xsi:type="string">Namespace_ModuleName/js/form/element/options</item>

তারপরে, এখানে এমন কাস্টম ইউআই উপাদান রয়েছে যা নির্ভরশীল ক্ষেত্রগুলি লুকায় বা দেখায় - যা ঘটছে তা ব্যাখ্যা করার জন্য মন্তব্যে।

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

    'use strict';

    return select.extend({

        /**
         * Array of field names that depend on the value of 
         * this UI component.
         */
        dependentFieldNames: [
            'my_field_name1',
            'my_field_name2'
        ],

        /**
         * Reference storage for dependent fields. We're caching this
         * because we don't want to query the UI registry so often.
         */
        dependentFields : [],

        /**
         * Initialize field component, and store a reference to the dependent fields.
         */
        initialize: function() {
            this._super();

            // We're creating a promise that resolves when we're sure that all our dependent
            // UI components have been loaded. We're also binding our callback because
            // we're making use of `this`
            uiRegistry.promise(this.dependentFieldNames).done(_.bind(function() {

                // Let's store the arguments (the UI Components we queried for) in our object
                this.dependentFields = arguments;

                // Set the initial visibility of our fields.
                this.processDependentFieldVisibility(parseInt(this.initialValue));
            }, this));
        },

        /**
         * On value change handler.
         *
         * @param {String} value
         */
        onUpdate: function (value) {
            // We're calling parseInt, because in JS "0" evaluates to True
            this.processDependentFieldVisibility(parseInt(value));
            return this._super();
        },

        /**
         * Shows or hides dependent fields.
         *
         * @param visibility
         */
        processDependentFieldVisibility: function (visibility) {
            var method = 'hide';
            if (visibility) {
                method = 'show';
            }

            // Underscore's invoke, calls the passed method on all the objects in our array
            _.invoke(this.dependentFields, method);
        }
    });
});

Answer 5

আপনি যদি Field is Undefinedক্ষেত্রের দৃশ্যমানতা শুরু করার মতো ত্রুটি পেয়ে থাকেন তবে setTimeout()নির্ভরশীল ক্ষেত্রগুলি লোড করতে ব্যবহার করুন :

fieldDepend: function (value) {
     setTimeout(function(){ 
        var field1 = uiRegistry.get('index = field2');

        if (field1.visibleValue == value) {
               field1.show();
        } else {
               field1.hide();
        }

       var field2 = uiRegistry.get('index = field3');

        if (field2.visibleValue == value) {
              field2.show();
        } else {
              field2.hide();
        }    
     }, 1);
     return this._super();
},

Comments

সেটটাইমআউটের পরিবর্তে নির্ভরতা পাওয়ার অ্যাসিনক্রোনাস পদ্ধতিটি পরিবর্তে ব্যবহার করুন:uiRegistry.get('q', function(field) { ... }));

— এরফান

মন্তব্য করার পরামর্শ দেওয়ার জন্য এবং আমার উত্তরটি নীচে ভোট দেওয়ার জন্য আপনি এখানে আপনার উত্তর পোস্ট করতে পারেন ভাই, কোনও উত্তর উত্সর্গ করার উপায় এটি নয়, আপনি কেবল আলাদাভাবে পরামর্শ দিচ্ছেন, আমার উত্তরটি ভুল নয়। @Erfan। আপনার ডাউন ভোট ভুল ধারণা তৈরি।

— রোনাক চৌহান

@ রোনাকচৌহান - একমত পোষণ করেছেন !!! আপনার উত্তরটি ভুল নয়, বিভিন্ন ব্যক্তির মতামত, পরামর্শ এবং সমাধান রয়েছে। আপনার উত্তরও সঠিক !!

— মান্থান ডেভ

আরম্ভ করার জন্য এক সেকেন্ড অপেক্ষা করা, এবং আরম্ভকরণের অবরুদ্ধ করা এটি করার পক্ষে খুব পরিষ্কার। আপনি কীভাবে জানবেন যে আপনার নির্ভরতাগুলি এক সেকেন্ডে লোড হবে? কেন এটি দুই সেকেন্ড হবে না? আপনি এখানে একটি ধারণা তৈরি করছেন, এটি সবচেয়ে ভাল এড়ানো হয়েছে।

— এরফান

আমি এখানে 1 সেকেন্ড সেট করি নি, এটি ইন মিলিসেকেন্ডে, সেটটাইমআউট () কেবল পৃষ্ঠাটি লোড করার পরে আমার কোডটি লোড করবে, এবং যদি আপনার উত্তর থাকে তবে আপনি এটি পোস্ট করতে পারেন। নিচে ভোট কারওর উত্তর নিজেকে সঠিক প্রমাণ করার উপায় নয়! @ ইরফান

— রোনাক চৌহান

Answer 6

Init সহ কাস্টম উপাদান:

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

    return select.extend({

        /**
         * Init
         */
        initialize: function () {
            this._super();

            this.fieldDepend(this.value());

            return this;
        },

        /**
         * On value change handler.
         *
         * @param {String} value
         */
        onUpdate: function (value) {
            this.fieldDepend(value);

            return this._super();
        },

        /**
         * Update field dependency
         *
         * @param {String} value
         */
        fieldDepend: function (value) {
            var field = uiRegistry.get('index = field_to_toggle');

            if (value == 'xxxxx') {
                field.show();
            } else {
                field.hide();
            }

            return this;
        }
    });
});

Comments

এটি ফাংশন আরম্ভ করার পরে "ক্ষেত্রটি অপরিজ্ঞাত" রয়েছে show

— প্রিন্স প্যাটেল

ব্যবহারের setTimeout()মধ্যে fieldDepend()কারণ নির্ভরশীল এখনো লোড হয় না।

— রোনাক চৌহান

Answer 7

ক্ষেত্রের নির্ভরতা হ্যান্ডেল করার কয়েকটি উপায় রয়েছে, সাধারণ হ্যাঁ / না ড্রপডাউন, একটি চেকবক্স বা একটি সুইচারের জন্য, আপনি Magento 2 এ importsবা exportsসংযোগকারী বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন সমাধানটি এখানে বিস্তারিত আলোচনা করা হয়েছে: ম্যাজেন্টোতে ইউআই উপাদান রূপের উপর নির্ভরশীল ক্ষেত্রগুলি 2 বুলিয়ান ক্ষেত্রগুলির জন্য জাভাস্ক্রিপ্ট ছাড়াই :

<!-- In the parent field <settings>...</settings> -->
<exports>
    <link name="checked">${$.parentName}.description:disabled</link>
</exports>

<!-- or -->

<!-- In the dependent field <settings>...</settings> -->
<imports>
    <link name="disabled">${$.parentName}.is_active:checked</link>
</imports>

অন্যান্য ধরণের মানগুলি হ্যান্ডল করতে যেমন একটি ড্রপডাউনতে মানগুলির তালিকার উপর নির্ভরতা বা যদিও সম্ভব না হলেও ইনপুট ক্ষেত্রের একটি মান, আপনি এটি ব্যবহার করতে পারেন switcherConfig। তথ্যের জন্য জাভাস্ক্রিপ্ট ছাড়াই ম্যাজেন্টো 2-তে UI- উপাদান ফর্মগুলিতে নির্ভরশীল ক্ষেত্রগুলি পরীক্ষা করুন।

<switcherConfig>
    <rules>
        <rule name="0">
            <value>list</value><!-- Actions defined will be trigger when the current selected field value matches the value defined here-->
            <actions>
                <action name="0">
                    <target>hs_xml_dependentfield_model_form.hs_xml_dependentfield_model_form.general.list</target>
                    <callback>visible</callback>
                    <params>
                        <param name="0" xsi:type="boolean">true</param>
                    </params>
                </action>
                <action name="1">
                    <target>hs_xml_dependentfield_model_form.hs_xml_dependentfield_model_form.general.hex_code</target>
                    <callback>visible</callback>
                    <params>
                        <param name="0" xsi:type="boolean">true</param>
                    </params>
                </action>
            </actions>
        </rule>
        ...
    </rules>
    <enabled>true</enabled>
</switcherConfig>

উপরের 2 টি নিয়ম, এক্সএমএল কনফিগারেশন ব্যবহার করে বেশ কিছু হ্যান্ডেল করুন। আরও জটিল নিয়মের জন্য, আপনি জাভাস্ক্রিপ্টও ব্যবহার করতে পারেন।

ইউআই উপাদান ফর্মের প্রতিটি ক্ষেত্রই এমন একটি উপাদান যা এর componentজন্য বৈশিষ্ট্যটি ব্যবহার করে প্রসারিত করা যেতে পারে <field component="path to your js" ...>...</field>। এরপরে আপনি data.configউপাদানটি আরও তথ্য সরবরাহ করতে ক্ষেত্রটি ব্যবহার করতে পারেন , যদি উপাদানটি জেনেরিক হয় এবং একাধিক স্থানে পুনরায় ব্যবহৃত হয় তবে পর্যবেক্ষণযোগ্য বা পদ্ধতিতে মানগুলি সংযুক্ত করার জন্য importsবা সংযুক্তির exportsসংযোগের সাথে মিলিত হয় ।

লিঙ্কিং বৈশিষ্ট্যগুলি সম্পর্কে আরও তথ্যের জন্য আপনি ইউআই উপাদানগুলির লিঙ্কিং বৈশিষ্ট্যগুলি পরীক্ষা করতে পারেন

Answer 8

যদি কেউ এরফান সমাধানের সাথে লড়াই করে তবে আপনাকে ক্ষেত্রগুলিতে পুরো পথটি যেতে হবে dependentFieldNames, যেমন:

       dependentFieldNames: [
        'form_name.form_name.fieldset.field_name',
        'form_name.form_name.fieldset.field_name1',
        'form_name.form_name.fieldset.field_name2',
        'form_name.form_name.fieldset.field_name3'
    ],

আমি নিশ্চিত না কেন ফর্ম_নামটি 2 বার হতে হবে তবে এটি আমার পক্ষে কাজ করেছে।

আমি করা ডিবাগ করার console.log(query);মধ্যে static/adminhtml/Magento/backend/en_US/Magento_Ui/js/lib/registry/registry.js223rd লাইন (পেতে () ফাংশন ঠিক আগে this._addRequest(query, callback))