This topic describes the XML elements that must be used for declaring a custom component and where this declaration should be placed.
XML elements used for declaring the custom component
A custom UI component can be declared using one of the following elements:
<component> element is typically used for declaring simple custom components that do not have other nested components.
<component> uses the uiElement constructor by default.
<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
<component> elements have no mandatory attributes. The following optional attributes are available for both these elements:
class: link to the component’s PHP class.
template: link to component’s
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
<component>, they should be specified strictly in the following order:
For the component configuration inside
<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
.xmlfile using the
<component>as parent node.
Declare a custom secondary component
The current version of Magento does not yet support secondary components.