1

Preconditions (*)

Magento 2.3.3

Description (*)

I have 2 dropdown in UI form. First is simple dropdown, 2nd is UI multiselect dropdown.

In 1st dropdown there are dropdown type product attribute list. In 2nd, There are attribute options list which was selected in 1st dropdown.

Expected result (*)

When I page load, attribute options list (2nd UI multiselect dropdown) should be display which was selected attribute (1st dropdown)

Actual result (*)

Sometimes, working perfect and sometimes, display all attribute options list. Because, UI multiselect element render first when page load.


UI Form Code

<field name="attribute_id">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Vendor\Module\Model\Source\AttributeList</item>
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">text</item>
            <item name="label" xsi:type="string" translate="true">Attribute</item>
            <item name="component" xsi:type="string">Vendor_Module/js/form/element/attribute</item>
            <item name="formElement" xsi:type="string">select</item>
            <item name="source" xsi:type="string">general</item>
            <item name="dataScope" xsi:type="string">attribute_id</item>
            <item name="sortOrder" xsi:type="number">60</item>
            <item name="mapper" xsi:type="object">Vendor\Module\Model\Source\Mapper</item>
        </item>
    </argument>
</field>
<field name="attribute_options_list">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Vendor\Module\Model\Source\AttributeListOptions</item>
        <item name="config" xsi:type="array">
            <item name="additionalClasses" xsi:type="string">required</item>
            <item name="dataType" xsi:type="string">text</item>
            <item name="label" xsi:type="string" translate="true">Attribute Options List</item>
            <item name="componentType" xsi:type="string">field</item>
            <item name="formElement" xsi:type="string">select</item>
            <item name="component" xsi:type="string">Vendor_Module/js/form/element/ui-select-attribute-filter</item>
            <item name="elementTmpl" xsi:type="string">ui/grid/filters/elements/ui-select</item>
            <item name="dataScope" xsi:type="string">attribute_options_list</item>
            <item name="filterOptions" xsi:type="boolean">true</item>
            <item name="showCheckbox" xsi:type="boolean">true</item>
            <item name="disableLabel" xsi:type="boolean">true</item>
            <item name="multiple" xsi:type="boolean">true</item>
            <item name="levelsVisibility" xsi:type="number">1</item>
            <item name="sortOrder" xsi:type="number">80</item>
            <item name="required" xsi:type="boolean">true</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">false</item>
            </item>
            <item name="listens" xsi:type="array">
                <item name="${ $.namespace }.${ $.namespace }:responseData" xsi:type="string">setParsed</item>
            </item>
        </item>
    </argument>
</field>

JS code

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
define(['jquery',
    'underscore',
    'uiRegistry',
    'Magento_Ui/js/form/element/ui-select'
    ], function($, _, uiRegistry, ui_select) {
    return ui_select.extend({
        initialize: function () {
            this._super();
            var field = uiRegistry.get('index = attribute_id');
            console.log(field.value());
        }
    })
})

How to solve this issue that everytime, I get value when initialize element?

Any help would be appreciated.

Thanks !!

0

Update your js code with this one

/**
     * Copyright © Magento, Inc. All rights reserved.
     * See COPYING.txt for license details.
     */
    define(['jquery',
        'underscore',
        'uiRegistry',
        'Magento_Ui/js/form/element/ui-select'
        ], function($, _, uiRegistry, ui_select) {
        return ui_select.extend({


            initialize: function () {

               this._super();
               this.fieldDepend(this.value());
               return this;

           },

           fieldDepend: function (value)
            {

                $(document).ready(function(){

                    var i = setInterval(function(){
                        if (document.getElementById('attribute_id')) {

                            var field = uiRegistry.get('index = attribute_id');
                            console.log(field.value());
                            clearInterval(i);
                        } 
                    });

                });
            }
        })
    })

Hope it works

4
  • SetInterval I know about that. I want to set something magento proper way. – Rohan Hapani Jan 10 '20 at 7:30
  • ok if you found please post it here as well – ASQ Jan 10 '20 at 7:32
  • This code also not working. Console log not available. – Rohan Hapani Jan 10 '20 at 7:38
  • compare the id of the element you want to load first to the id('attribute_id) used in the function, if not correct please update – ASQ Jan 10 '20 at 9:50

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.