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,
Magento2 Admin Form – Create City State Country Dropdown UIComponent
adminhtmlformsmagento2uicomponent
Related Solutions
in admin form block in _prepareForm() add country and region
that is
in __construct() add country config source
protected $_countryFactory;
/**
* @param \Magento\Backend\Block\Template\Context $context
* @param \Magento\Framework\Registry $registry
* @param \Magento\Framework\Data\FormFactory $formFactory
* @param \Magento\Store\Model\System\Store $systemStore
* @param array $data
*/
public function __construct(
\Magento\Backend\Block\Template\Context $context,
\Magento\Framework\Registry $registry,
\Magento\Framework\Data\FormFactory $formFactory,
\Magento\Store\Model\System\Store $systemStore,
\Magento\Cms\Model\Wysiwyg\Config $wysiwygConfig,
\Magento\Directory\Model\Config\Source\Country $countryFactory,
\Sugarcode\Test\Model\Status $status,
array $data = []
) {
$this->_systemStore = $systemStore;
$this->_wysiwygConfig = $wysiwygConfig;
$this->_status = $status;
$this->_countryFactory = $countryFactory;
parent::__construct($context, $registry, $formFactory, $data);
}
and in _prepareForm()
protected function _prepareForm()
{
.
.
.
.
.
old field
.
.
.
.
$optionsc=$this->_countryFactory->toOptionArray();
$country = $fieldset->addField(
'country_id',
'select',
[
'name' => 'country_id',
'label' => __('Country'),
'title' => __('Country'),
// 'onchange' => 'getstate(this)',
'values' => $optionsc,
]
);
//$optionsc=$this->_countryFactory->toOptionArray();
$fieldset->addField(
'region_id',
'select',
[
'name' => 'region_id',
'label' => __('Region'),
'title' => __('Region'),
'values' => ['--Please Select Country--'],
]
);
/*
* Add Ajax to the Country select box html output
*/
$country->setAfterElementHtml("
<script type=\"text/javascript\">
require([
'jquery',
'mage/template',
'jquery/ui',
'mage/translate'
],
function($, mageTemplate) {
$('#edit_form').on('change', '#country_id', function(event){
$.ajax({
url : '". $this->getUrl('test/*/regionlist') . "country/' + $('#country_id').val(),
type: 'get',
dataType: 'json',
showLoader:true,
success: function(data){
$('#region_id').empty();
$('#region_id').append(data.htmlconent);
}
});
})
}
);
</script>"
);
$form->setValues($model->getData());
$this->setForm($form);
return parent::_prepareForm();
}
and create admin side action file to get region that is app\code\Sugarcode\Test\Controller\Adminhtml\Lists\Regionlist.php
<?php
/**
*
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
namespace Sugarcode\Test\Controller\Adminhtml\Lists;
/**
* @SuppressWarnings(PHPMD.CouplingBetweenObjects)
*/
class Regionlist extends \Magento\Framework\App\Action\Action
{
/**
* @var \Magento\Framework\View\Result\PageFactory
*/
protected $resultPageFactory;
/**
* @var \Magento\Directory\Model\CountryFactory
*/
protected $_countryFactory;
/**
* @param \Magento\Framework\App\Action\Context $context
* @param \Magento\Framework\View\Result\PageFactory resultPageFactory
*/
public function __construct(
\Magento\Framework\App\Action\Context $context,
\Magento\Directory\Model\CountryFactory $countryFactory,
\Magento\Framework\View\Result\PageFactory $resultPageFactory
)
{
$this->_countryFactory = $countryFactory;
$this->resultPageFactory = $resultPageFactory;
parent::__construct($context);
}
/**
* Default customer account page
*
* @return void
*/
public function execute()
{
$countrycode = $this->getRequest()->getParam('country');
$state = "<option value=''>--Please Select--</option>";
if ($countrycode != '') {
$statearray =$this->_countryFactory->create()->setId(
$countrycode
)->getLoadedRegionCollection()->toOptionArray();
foreach ($statearray as $_state) {
if($_state['value']){
$state .= "<option >" . $_state['label'] . "</option>";
}
}
}
$result['htmlconent']=$state;
$this->getResponse()->representJson(
$this->_objectManager->get('Magento\Framework\Json\Helper\Data')->jsonEncode($result)
);
}
}
once you change country region will load same way you can do for city also
If any one know better then this solution as like in we use in edit.phtml please share us
Here is way to set value & make field readonly(disabled)
Override vendor/magento/module-checkout/view/frontend/layout/checkout_index_index.xml to app/design/frontend/package/themename/Magento_Checkout/layout/checkout_index_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-address-fieldset" xsi:type="array">
<item name="children" xsi:type="array">
<item name="company" xsi:type="array">
<item name="visible" xsi:type="boolean">false</item>
</item>
<item name="city" xsi:type="array">
<item name="disabled" xsi:type="string">disabled</item>
<item name="value" xsi:type="string">Value</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
In above file i added,
<item name="company" xsi:type="array">
<item name="visible" xsi:type="boolean">false</item>
</item>
<item name="city" xsi:type="array">
<item name="disabled" xsi:type="string">disabled</item>
<item name="value" xsi:type="string">value</item>
</item>
Then Override, \Magento\Checkout\Block\Checkout\AttributeMerger to Namespace\Modulename\Block\Checkout\AttributeMerger
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
namespace Namespace\Modulename\Block\Checkout;
class AttributeMerger extends \Magento\Checkout\Block\Checkout\AttributeMerger
{
public function __construct(
\Magento\Customer\Helper\Address $addressHelper,
\Magento\Customer\Model\Session $customerSession,
\Magento\Customer\Api\CustomerRepositoryInterface $customerRepository,
\Magento\Directory\Helper\Data $directoryHelper
) {
parent::__construct(
$addressHelper,
$customerSession,
$customerRepository,
$directoryHelper
);
}
/**
* Retrieve UI field configuration for given attribute
*
* @param string $attributeCode
* @param array $attributeConfig
* @param array $additionalConfig field configuration provided via layout XML
* @param string $providerName name of the storage container used by UI component
* @param string $dataScopePrefix
* @return array
* @SuppressWarnings(PHPMD.CyclomaticComplexity)
* @SuppressWarnings(PHPMD.NPathComplexity)
*/
protected function getFieldConfig(
$attributeCode,
array $attributeConfig,
array $additionalConfig,
$providerName,
$dataScopePrefix
) {
// street attribute is unique in terms of configuration, so it has its own configuration builder
if (isset($attributeConfig['validation']['input_validation'])) {
$validationRule = $attributeConfig['validation']['input_validation'];
$attributeConfig['validation'][$this->inputValidationMap[$validationRule]] = true;
unset($attributeConfig['validation']['input_validation']);
}
if ($attributeConfig['formElement'] == 'multiline') {
return $this->getMultilineFieldConfig($attributeCode, $attributeConfig, $providerName, $dataScopePrefix);
}
$uiComponent = isset($this->formElementMap[$attributeConfig['formElement']])
? $this->formElementMap[$attributeConfig['formElement']]
: 'Magento_Ui/js/form/element/abstract';
$elementTemplate = isset($this->templateMap[$attributeConfig['formElement']])
? 'ui/form/element/' . $this->templateMap[$attributeConfig['formElement']]
: 'ui/form/element/' . $attributeConfig['formElement'];
$element = [
'component' => isset($additionalConfig['component']) ? $additionalConfig['component'] : $uiComponent,
'config' => [
// customScope is used to group elements within a single form (e.g. they can be validated separately)
'customScope' => $dataScopePrefix,
'customEntry' => isset($additionalConfig['config']['customEntry'])
? $additionalConfig['config']['customEntry']
: null,
'template' => 'ui/form/field',
'elementTmpl' => isset($additionalConfig['config']['elementTmpl'])
? $additionalConfig['config']['elementTmpl']
: $elementTemplate,
'tooltip' => isset($additionalConfig['config']['tooltip'])
? $additionalConfig['config']['tooltip']
: null
],
'dataScope' => $dataScopePrefix . '.' . $attributeCode,
'label' => $attributeConfig['label'],
'provider' => $providerName,
'sortOrder' => isset($additionalConfig['sortOrder'])
? $additionalConfig['sortOrder']
: $attributeConfig['sortOrder'],
'validation' => $this->mergeConfigurationNode('validation', $additionalConfig, $attributeConfig),
'options' => $this->getFieldOptions($attributeCode, $attributeConfig),
'filterBy' => isset($additionalConfig['filterBy']) ? $additionalConfig['filterBy'] : null,
'customEntry' => isset($additionalConfig['customEntry']) ? $additionalConfig['customEntry'] : null,
'visible' => isset($additionalConfig['visible']) ? $additionalConfig['visible'] : true,
];
if (isset($additionalConfig['disabled']) && $additionalConfig['disabled'] != null) {
$element['disabled'] = "disabled";
}
if (isset($additionalConfig['value']) && $additionalConfig['value'] != null) {
$element['value'] = "";
}
if (isset($attributeConfig['value']) && $attributeConfig['value'] != null) {
$element['value'] = $attributeConfig['value'];
} elseif (isset($attributeConfig['default']) && $attributeConfig['default'] != null) {
$element['value'] = $attributeConfig['default'];
} else {
$defaultValue = $this->getDefaultValue($attributeCode);
if (null !== $defaultValue) {
$element['value'] = $defaultValue;
}
}
return $element;
}
/**
* @param string $attributeCode
* @return null|string
*/
protected function getDefaultValue($attributeCode)
{
switch ($attributeCode) {
case 'firstname':
if ($this->getCustomer()) {
return $this->getCustomer()->getFirstname();
}
break;
case 'lastname':
if ($this->getCustomer()) {
return $this->getCustomer()->getLastname();
}
break;
case 'country_id':
return $this->directoryHelper->getDefaultCountry();
break;
case 'city':
if ($this->getCustomer()) {
return "return your value"
}
}
return null;
}
}
In Above file i added below code in function getFieldConfig
if (isset($additionalConfig['disabled']) && $additionalConfig['disabled'] != null) {
$element['disabled'] = "disabled";
}
And added below code in function getDefaultValue
case 'city':
if ($this->getCustomer()) {
return "return your value";
}
Thanks !!
Best Answer