2

In ui form, I set 2 dropdown field. Now, I want to do something like that in second dropdown value set based on first dropdown selected value.

For ex : In Customer module, There are country region dropdown field. In country If you select "United States" then, in region will display "United States" country's region.

I want to do same as like in my custom dropdown with ui-select dropdown. How to do that?

I figure out that i think it's working by this below code :

<item name="filterBy" xsi:type="array">
 <item name="target" xsi:type="string">${ $.provider }:${ $.parentScope }.country</item><!-- 'country' - db table column name where country code is saved -->
 <item name="field" xsi:type="string">country_id</item><!-- country_id field name -->
</item>

But, how it works?

Any help would be highly appreciated !!

0

put this code

<field name="country_id">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Magento\Directory\Model\Config\Source\Country</item>
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">text</item>
            <item name="label" xsi:type="string" translate="true">Country</item>
            <item name="formElement" xsi:type="string">select</item>
            <item name="source" xsi:type="string">store</item>
            <item name="component" xsi:type="string">Magento_Ui/js/form/element/country</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>
<field name="region">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Magento\Directory\Model\ResourceModel\Region\Collection</item>
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">text</item>
            <item name="label" xsi:type="string" translate="true">State/Region</item>
            <item name="formElement" xsi:type="string">select</item>
            <item name="source" xsi:type="string">store</item>
            <item name="sortOrder" xsi:type="number">20</item>
            <item name="customEntry" xsi:type="string">region</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
            <item name="filterBy" xsi:type="array">
                <item name="target" xsi:type="string">${ $.provider }:${ $.parentScope }.country_id</item>
                <item name="field" xsi:type="string">country_id</item>
            </item>
        </item>
    </argument>
</field>
  • Please read it again question. I want to set custom data. Not country region field. I just want to do functionality same like that. – Rohan Hapani Nov 11 at 4:57
  • Do you have any solution related to that with custom data? – Rohan Hapani Nov 11 at 4:57
  • @RohanHapani I have a Used one Select Drop Down With Two Field Hide and Show base on Seleced Value so I will add it. i hope It will Helps you – Msquare Nov 11 at 13:58
0

This is Ui file

<field name="auto_lat_lang">
            <argument name="data" xsi:type="array">
                <item name="options" xsi:type="object">[vendor_name]\[module_name]\Model\LatLongStatus</item>
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Latitude and Longitude</item>
                    <item name="component" xsi:type="string">[vendor_name]_[module_name]/js/form/element/options</item>
                    <item name="formElement" xsi:type="string">select</item>
                    <item name="source" xsi:type="string">modulename</item>
                    <item name="dataScope" xsi:type="string">auto_lat_lang</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>
        <field name="lat">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Latitude</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">lat</item>
                    <item name="dataScope" xsi:type="string">lat</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                        <item name="validate-number" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>
        <field name="lng">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Longitude</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">lng</item>
                    <item name="dataScope" xsi:type="string">lng</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                        <item name="validate-number" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>

now create an Modal for get Custom option

<?php

namespace [module_name]\[Module_name]\Model;

use Magento\Framework\Data\OptionSourceInterface;

class LatLongStatus implements OptionSourceInterface
{
    public function getOptionArray()
    {
        $options = ['0' => __('Automatically'),'1' => __('Manually')];
        return $options;
    }

    public function getAllOptions()
    {
        $res = $this->getOptions();
        array_unshift($res, ['value' => '', 'label' => '']);
        return $res;
    }

    public function getOptions()
    {
        $res = [];
        foreach ($this->getOptionArray() as $index => $value) {
            $res[] = ['value' => $index, 'label' => $value];
        }
        return $res;
    }

    public function toOptionArray()
    {
        return $this->getOptions();
    }
}

now create an Js file to show and hide fields

[vendor_name][module_name]\view\adminhtml\web\js\form\element

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

        initialize: function (){

            var field1 = uiRegistry.get('index = lat');
            var field2 = uiRegistry.get('index = lng');
            var status = this._super().initialValue;
            if (status == 1) {
                field1.show();
                field2.show();
            } else{
               field2.hide();
               field1.hide();
            }
            return this;
        },
        onUpdate: function (value) {
            var field1 = uiRegistry.get('index = lat');
            var field2 = uiRegistry.get('index = lng');
            if (value == 1) {
                field1.show();
                field2.show();
            } else {
                field1.hide();
                field2.hide();
            }
            return this._super();
        },
    });
});

I Hope This Helps You.

  • this Example helps you – Msquare Nov 11 at 17:41

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.