Declare a custom UI component

Declaring a custom UI component refers to creating the XML configuration of your custom component, and is a part of a bigger task of creating a custom UI component.

This topic describes the XML elements that must be used for declaring a custom component and where this declaration should be placed.

XML elements

A custom UI component can be declared using one of the following elements: <component> or <container>.

The <component> element is typically used for declaring simple custom components that do not have other nested components. <component> uses the uiElement constructor by default.

The <container> element is typically used for declaring custom components that are collections, or in other words, can have nested components. <container> uses the uiCollection constructor by default.

Attributes you can use

The <container> and <component> elements have no mandatory attributes. The following optional attributes are available for both these elements:

component: link to the component's JavaScript constructor.
class: link to the component's PHP class.
template: link to component's .html template.
provider: link to component's data provider.
sortOrder: component's sort order
displayArea: the placeholder which defines the area for rendering the component in the layout file.

If the following elements are used inside <container> or <component>, they should be specified strictly in the following order:

<argument>
<settings>
<childComponent>

For the component configuration inside <container> and <component>, use the "arbitrary" structure.

Declare a custom basic component

If the custom component you create is a basic UI component (like Form or Listing), you need to take the following steps to declare it:

Specify the XML file with its configuration it in the page layout file in your module, as described in the About XML configuration of UI components topic.
Declare the component in a separate .xml file using the <container> or <component> as parent node.