1

how to create city state country dropdown UIComponent in Magento 2 admin form, like when we select one country then state of that country is shown.

Thanks,

3

app/code/Ktpl/Timeslot/view/adminhtml/ui_component/ktpl_timeslot_timeslot_form.xml

<?xml version="1.0" ?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">ktpl_timeslot_timeslot_form.timeslot_form_data_source</item>
        </item>
        <item name="label" translate="true" xsi:type="string">General Information</item>
        <item name="template" xsi:type="string">templates/form/collapsible</item>
    </argument>
    <settings>
        <buttons>
            <button class="Ktpl\Timeslot\Block\Adminhtml\Timeslot\Edit\BackButton" name="back"/>
            <button class="Ktpl\Timeslot\Block\Adminhtml\Timeslot\Edit\DeleteButton" name="delete"/>
            <button class="Ktpl\Timeslot\Block\Adminhtml\Timeslot\Edit\SaveButton" name="save"/>
            <button class="Ktpl\Timeslot\Block\Adminhtml\Timeslot\Edit\SaveAndContinueButton" name="save_and_continue"/>
        </buttons>
        <namespace>ktpl_timeslot_timeslot_form</namespace>
        <dataScope>data</dataScope>
        <deps>
            <dep>ktpl_timeslot_timeslot_form.timeslot_form_data_source</dep>
        </deps>
    </settings>
    <dataSource name="timeslot_form_data_source">
        <argument name="data" xsi:type="array">
            <item name="js_config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
            </item>
        </argument>
        <settings>
            <submitUrl path="*/*/save"/>
        </settings>
        <dataProvider class="Ktpl\Timeslot\Model\Timeslot\DataProvider" name="timeslot_form_data_source">
            <settings>
                <requestFieldName>timeslot_id</requestFieldName>
                <primaryFieldName>timeslot_id</primaryFieldName>
            </settings>
        </dataProvider>
    </dataSource>
    <fieldset name="general">
        <settings>
            <label/>
        </settings>
        <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">Timeslot</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="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">input</item>
                    <item name="source" xsi:type="string">Timeslot</item>
                    <item name="sortOrder" xsi:type="number">15</item>
                    <item name="visible" xsi:type="boolean">false</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>
        <field name="state_id">
            <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">Timeslot</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>
        <field formElement="input" name="city_id" sortOrder="30">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">Timeslot</item>
                </item>
            </argument>
            <settings>
                <dataType>text</dataType>
                <label translate="true">City</label>
                <dataScope>city_id</dataScope>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
            </settings>
        </field>
    </fieldset>
</form>
  • hello thanks for your reply but city is not working – Adarsh Shukla Feb 12 at 13:21
  • Mean you want to filter the city filed as well. When we select the state at that time it filters the city and adds to the city dropdown. – Kushal Feb 12 at 13:24
  • yes sir absolutely i want to do same – Adarsh Shukla Feb 12 at 13:27
  • In the current code, I have only updated the state filed only.i will try to update the city filed and update you. if i can do this as well – Kushal Feb 12 at 13:29
  • thanks for your great help I will love to hear from you!! – Adarsh Shukla Feb 12 at 13:34

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.