2

I have created an module for admin which have admin form and this form have some fields.I have two select option drop down fields.If I choose first dropdown option value then second drop-down display some values and if I choose another option then value should be different.

I have search on forums but not found any solution.Please help me.

screenshot are attached.

enter image description here

enter image description here

1 Answer 1

1

This May Help you . I have used this on a drop-down in ui-component. Selecting a options shows respective field. add this code in your ui-component

<field name="apply">
        <argument name="data" xsi:type="array">
            <item name="options" xsi:type="object">Vendor\Module\Model\Config\Source\Action</item>
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Apply</item>
                <item name="component" xsi:type="string">Vendor_Module/js/form/options</item>
                <item name="dataType" xsi:type="string">select</item>
                <item name="formElement" xsi:type="string">select</item>
                <item name="source" xsi:type="string">yoursourcename</item>
                <item name="dataScope" xsi:type="string">apply</item>
                <item name="notice" xsi:type="string" translate="true">Select type.</item>
                <item name="validation" xsi:type="array">
                    <item name="required-entry" xsi:type="boolean">true</item>
                </item>
            </item>
        </argument>
    </field>
    <field name="fixed">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="additionalClasses" xsi:type="array">
                    <item name="admin__field-fixed-value" xsi:type="boolean">true</item>
                </item>
                <item name="label" xsi:type="string">Price :</item>
                <item name="dataType" xsi:type="string">text</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="source" xsi:type="string">flashsalespro</item>
                <item name="sortOrder" xsi:type="number">20</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="percentage">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="additionalClasses" xsi:type="array">
                    <item name="admin__field-percentage-value" xsi:type="boolean">true</item>
                </item>
                <item name="label" xsi:type="string">Percentage :</item>
                <item name="dataType" xsi:type="string">text</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="source" xsi:type="string">flashsalespro</item>
                <item name="dataScope" xsi:type="string">percentage</item>
                <item name="sortOrder" xsi:type="number">20</item>
                <item name="breakLine" xsi:type="boolean">true</item>
                <item name="visibleValue" xsi:type="string">0</item>
                <item name="visible" xsi:type="boolean">true</item>
            </item>
        </argument>
    </field>

Add option.js in

Vendor/Module/view/adminhtml/web/js/form/

    define([

    'underscore',

    'uiRegistry',

    'Magento_Ui/js/form/element/select',

    'Magento_Ui/js/modal/modal',

    'ko'

], function (_, uiRegistry, select, modal, ko) {

    'use strict';

    return select.extend({


        initialize: function () {
            this._super();

            this.fieldDepend(this.value());

            return this;

        },

        onUpdate: function (value)
        {
            var field_percentage = uiRegistry.get('index = percentage'); // get field

            var field_fixed = uiRegistry.get('index = fixed'); // get fieldset

            if (value === 'fixed') {

                field_percentage.hide();

                field_fixed.show();
            }

            else {

                field_percentage.show();

                field_fixed.hide();

            }
            return this._super();

        },
        fieldDepend: function (value)

        {
            setTimeout( function(){
                var field_percentage = uiRegistry.get('index = percentage');

                var field_fixed = uiRegistry.get('index = fixed');

                if (value === 'fixed') {

                    field_percentage.hide();
                    field_fixed.show();
                }

            });

        }
    });

});

I have used fields you can use drop down .

1
  • Hi @ghulam,thanks for your answer.I am not using ui component for admin form.
    – akgola
    Apr 24, 2019 at 4:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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