cancel
Showing results for 
Search instead for 
Did you mean: 

New nodes in Layout XML to make UI Components more managable

New nodes in Layout XML to make UI Components more managable

One big issue I find when working with UI Components is that you end up writing deeply nested xml trees. These quickly become hard to read, and are really unmanageable.

 

I'd like to propose two new XML nodes to be introduced: alias and referenceAlias. These would provide a mechanism for reducing the amount of XML I need to write and manage when working with nested components.

Consider the following:

 

<?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="component" xsi:type="string">Ashsmith_Checkout/js/view/shipping</item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

It's deeply nested, and all to common when all you want to do is replace a component or alter it's configuration in some way.

 

The alias and referenceAlias solution would result in XML that looks like this:

<?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>
        <alias name=checkout_step_shipping_address path=“checkout.root/arguments/jsLayout/components/checkout/children/steps/children/shipping-step/children/shippingAddress” /> 

        <referenceAlias name="checkout_step_shipping_address">
            <item name="component" xsi:type="string">Ashsmith_Checkout/js/view/shipping</item>
        </referenceAlias>
    </body>
</page>

Immediately we have less depth, and can still get the job done. Our XML is easier to read and can be quickly understood by anyone jumping in.

 

Furthermore, these aliases could be defined by the Magento core. They would serve as invaluable extension points for developers. 

 

Even better this feature request would not introduce any breaking changes.

 

I go over this in a little more detail (and my reasoning behind it) over on my blog: www.ashsmith.io/magento2/suggestions-to-improve-ui-components/

1 Comment
New Contributor

I think alias word is related to <block> tag's attribute. This will lead to misunderstanding.


So I suggest use <referenceItem> & <referenceArgument> tags - it will be very clear what we are managing using UI components.