Overview of UI components
Magento UI components are designed for simple and flexible UI rendering. They allow you to configure the page manipulating the UI components.
Magento UI components are implemented as a standard module and can be found under Magento\UI namespace.
This guide is actual for Magento 2.0 UI components. You might be also interested in the UI Components Guide for Magento 2.1, as it has more conceptual topics.
In Magento 2 there are basic and secondary UI components.
Basic components are:
- Listing component
- Form component
Secondary components are extensions of basic components.
All components can be configured both for Admin and storefront.
You need to configure styles manually for components on storefront.
Using UI component in layout file
Using UI component is as simple as adding the following code to the appropriate layout section:
All UI components have base declaration in
UI components configuration reader searches through all active modules and read files:
And concrete instances of the components each in separate XML configuration file:
<your module root dir>/<vendor>/<module>/view/<area>/ui_component/<component_instance_name>.xml
Extension developers cannot introduce new components but can customize existing ones locally.
XSD file contains rules and limitations shared between all components (both definitions and instance configurations):
<your module root dir>/Magento/Ui/etc/ui_definition.xsd
It is possible to create custom component by setting
template parameters of the Container component.
You can configure existing component and all filter types in the following ways:
- Globally: using any module’s
view/*/ui_component/etc/definition.xmlfile. All settings declared in this file will be applied to all component’s instances
- Locally: using concrete component instance configuration, such as
<your module root dir>/Magento/Cms/view/adminhtml/ui_component/cms_page_listing.xml