PHP 7.3 reaches end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in April 2022. We strongly recommend planning your upgrade now to Adobe Commerce 2.4.x and PHP 7.4.x to help maintain PCI compliance.

UI components XML configuration structure

Overview

This topic describes the basic elements used in XML configuration files for declaring UI components. These elements core structure is strict and third party developers must follow it when customizing existing UI component configuration or declaring new ones.

Basic configuration elements

Element Attributes Parent of Description
<%basic_component%></%basic_component%>
  • extends
  • provider
  • component-specific attributes
  • Where a user can find this list of component-specific attributes

For detailed descriptions of the general attributes see Basic attributes.
  1. <arguments>
  2. <settings>
  3. <%component%>

(order matters)
Mandatory root element, the name of the basic UI component: <form>, <listing> or custom basic component.
<arguments></arguments> name='data' <item name=config> (mandatory) Introduces the configuration block for UiComponent according to the old structure used in Magento 2.1.x and earlier. In Magento 2.2.x and later only use for options that are not described in XSD.

which XSD?
UiComponent - is it a class or what?

<settings></settings> - Introduces the configuration block for UiComponent according to the new structure. Use for configuring all options, except those that are not described in XSD.
<component></component>
  • class
  • component
  • displayArea
  • sortOrder
  • template
  • component-specific attributes
  • Where a user can find this list of component-specific attributes

For detailed descriptions of the general attributes see Basic attributes
  1. <arguments>
  2. <settings>
  3. <%component%>

(order matters)
UI component name

Example of the basic UI components configuration structure

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form>
    <arguments name="data">
        // The old arbitrary structure that declares the configuration of the Form component
    </arguments>
    <settings>
        // The new strict structure that declares the configuration of the Form component
    </settings>
    <fieldset name="fieldsetName">
        <arguments name="data">
            // The old arbitrary structure that declares the configuration of the Fieldset component.
        </arguments>
        <settings>
            // The new strict structure that declares the configuration of the Fieldset component
        </settings>
        <field name="fieldName">
            <settings>
                // The new strict structure that declares the configuration of the Field component
            </settings>
        </field>
    </fieldset>
</form>