Can anyone explain <item name=“customEntry” xsi:type=“string”>shippingAddress.region</item> this line how workin checkout page in magento2?

Question

Can anyone please explain below line in magento2 checkout page

  <item name="customEntry" xsi:type="string">shippingAddress.region</item>

Answer 1

This line is part of the checkout layout handle (checkout_index_index.xml):

<!-- code above -->
<item name="region_id" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Ui/js/form/element/region</item>
    <item name="config" xsi:type="array">
        <item name="template" xsi:type="string">ui/form/field</item>
        <item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
        <item name="customEntry" xsi:type="string">shippingAddress.region</item>
    </item>
<!-- code bellow -->

The top level item is named "region_id" and therefore, with the child item "component", its component is set to "Magento_Ui/js/form/element/region".

The actual file that matches this string is found at /vendor/magento/module-ui/view/base/web/js/form/element/region.js

The item "config" actually configures the component. If you were to add any item of type string, just like the "customEntry" is added, this is immediately available to the component as JavaScript variable, and therefore can be referenced in the HTML template.

For example, if you were to declare the "customEntry" as

<item name="customEntry" xsi:type="string">My fixed message here!</item>

you should be able to type this KO binding in the HTML template:

<div><span data-bind="text: customEntry"></span></div>

And the span will be filled with the value "My fixed message here!"

In Magento_Ui/js/form/element/region component this is used in a different fashion (lines 88-90)

if (this.customEntry) {// eslint-disable-line max-depth
    this.toggleInput(false);
}

In effect, this toggles the input if the "customEntry" is not undefined I guess.

Now, the last question is what is shippingAddress.region.

Well, that would be an already present JavaScript object named "shippingAddress" which has a property "region".

How do you find it?

Login in as a customer that has a shipping address already saved and open the checkout page in magento. Open "Inspect" and then "Console" in Mozilla Firefox. Execute

var reg = requirejs('uiRegistry');

Now, the "reg" variable contains all the data from magento uiRegistry. Next, lets list all entries in the registry with

reg.get(function(item){        
    console.log(item.name);
    console.log(item.component);
    console.log(item.template);
});

Then, filter these results by typing "shipping" in the "Filter output".

Now, take a moment a thank Alam Storm for this way of looping through the uiRegistry.

Eventually, you will notice that Magento_Checkout/js/view/shipping-address/address-renderer/default is loaded.

The actual file that matches this string is found at /vendor/magento/module-checkout/view/frontend/web/js/view/shipping-address/address-renderer/default.js

You will notice that this file asks a "quote" object to be inserted via Magento_Checkout/js/model/quote.

Later on line 30, quote.shippingAddress() is called an assigned to a variable named shippingAddress.

You should debug, using Mozilla "Debugger", the corresponding js file found in /pub/static and see if you have actual "region" set to this shippingAddress set and what the value is.

By the way, the value here, should match the value entered in the "State/Province" field of the "Addresses" in the Customer edit page in the admin of the site.

Answer 2

Motivation for customEntry

Marjan's answer is excellent, but I was also curious about the functional purpose of the customEntry property within UI component configuration.

As it turns out, UI dropdown components (from Magento_Ui/js/form/element/select.js) use the customEntry property to define a backup text input field for when the dropdown has no options available.

In the case of the Magento 2 checkout page (checkout_index_index.xml), the configuration in question (found here in the source code) creates a hidden input field for the region dropdown of the shipping address. Since the available regions are filtered by the selected country (see the filterBy configuration property here for more details on that functionality), the possibility exists that a customer might choose a country for which no regions are configured. In that case, the dropdown would disappear and be replaced with a text input field where the customer could type in their region/state/province name manually.

Implementation

Although the region.js component does reference customEntry once, most of the implementation is actually found in the parent component definition, select.js. When select components are initialized, the initInput method is registered to run only if customEntry is defined:

if (this.customEntry) {
    registry.get(this.name, this.initInput.bind(this));
}

source

The initInput method simply defines and renders another UI component as a sibling of the current select component.

layout([utils.template(inputNode, this)]);

source

The inputNode is a simple Javascript object defined at the top of select.js, containing the configuration for the new input component.

Most importantly, once all of the components are initialized, there is a section of the setOptions method that sets the visibility of both components (the dropdown and the text input) based on the given options.

if (this.customEntry) {
    isVisible = !!result.options.length;

    this.setVisible(isVisible);
    this.toggleInput(!isVisible);
}

source

Here is what that cryptic boolean manipulation is doing, explained in English:

• If at least one dropdown option exists, show the dropdown and hide the text input.
• If no dropdown options exist, hide the dropdown and show the text input.

There are more details that would take too long to explain in this answer, but hopefully this explanation is enough to get others started using the customEntry configuration item.