Magento 2 incorporates two major types of UI components: basic and secondary. In their turn basic components are divided into listing and form components. As for secondary components, we can imagine them as appropriate extensions of basic components.
Although all components work for both admin and storefront sides of your Magento 2 website, components on storefront require manual configuration.
Please note that a set of custom components might be inherent in any module. Besides, any module can modify initial configuration for existing components.
Magento 2 UI component configuration
Instead of introducing new components, it is necessary to customize existing ones and don’t forget to do it locally. View an XSD file, since it contains rules and limitations which are shared between all Magento 2 UI components. The file is situated here:
Take the Container component and customize such parameters as class, component, and template to develop a custom component. There are two ways you can configure both existing components and filter types: globally and locally.
If you work globally, utilize view/*/ui_component/etc/definition.xml of your module. The file contains settings declared in it, so they will be applied to all instances of an appropriate component.
While working locally, you should rely on concrete component instance configuration:
The first basic Magento 2 UI component described in this post is listing. This component is responsible for rendering such elements as lists, grids, and tiles. Besides, it provides such features as filtering, sorting, pagination, etc.
You can find the Listing Component instance under:
Another important aspect of every Magento 2 UI component is the data source. It should be properly configured as well as associated with appropriate components. Below, we provide an example of proper data source configuration available on Magento Dev Doc:
It is also vital to index data since this procedure improves performance by materializing complex data in needed scopes. Consequently, you help the system to avoid problems while reading it. Besides, there is an opportunity to extend your current indexer declaration with the aid of an optional <fieldset> element. The following example sheds light on it:
<!--reference->from="field from primary fieldset"to="field from current fieldset"-->
<!--first we need parse references(from field)after that execute fieldset handlers-->
<saveHandler class="Magento\Framework\Indexer\SaveHandler\Grid"/><!--optional--><!--indexer put api-->
<structure class="Magento\Framework\Indexer\GridStructure"/><!--optional--><!--creating flat table forindex(orinother index database)-->
Fieldset is a container for field nodes. It specifies handler necessary to process nested field nodes. It its turn field is a concrete field processor, while filter is responsible for optional data pre-processing before getting to an index.
Secondary components of UI Listing/Grid component
If the Listing component’s functionality is not enough for your Magento 2 project, you can improve the default features with the help of the following secondary components:
Filter component is utilized to render filters UI as well as apply filtering criteria to collection.
Pagination component is utilized to render pagination UI as well as apply pagination criteria to collection.
MassAction component attaches its template to each item in Listing to make the item to be selectable. As a result, you can perform actions with several selected items simultaneously.