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,

1 Answer 1

4

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>
7
  • hello thanks for your reply but city is not working Feb 12, 2019 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. Feb 12, 2019 at 13:24
  • yes sir absolutely i want to do same Feb 12, 2019 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 Feb 12, 2019 at 13:29
  • thanks for your great help I will love to hear from you!! Feb 12, 2019 at 13:34

Your Answer

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

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