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.	`<arguments>` `<settings>` `<%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	`<arguments>` `<settings>` `<%component%>` (order matters)	UI component name

Example of the basic UI components configuration structure

<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>

Dec 20th, 2019

Edit this page on GitHub

Give us feedback