Magento 2 UI Components

Flexible UI rendering in Magento 2 is possible due to the usage of UI components. By utilizing them, you configure every page of your ecommerce website. Besides, Magento 2 UI components are responsible for supporting interactions of JavaScript components with a server. Acting as modules, they are situated under the Magento\UI namespace. Below, you will find a brief description of basic Magento 2 UI components as well as useful links for a further acquaintance with the subject.

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.

How to use Magento 2 UI component in a layout file

Using a UI component in Magento 2 is a piece of cake. You only have to add the following code to the appropriate layout section:

As for base declaration, all Magento 2 UI components have it here:

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:

Magento 2 UI Listing/Grid Component

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:

Below, we share the example of its configuration offered by the official Magento Dev Doc:

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:

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.
• TreeMassAction component is an extension of the previous component used for providing a nested sub-menu.
• Column component offers a collection of columns. Besides, it adds an interface for showing and hiding columns.
• UI-select component adds a checkbox interface for specific listings and sets of data.
• Multiselect component offers the same features as the aforementioned Magento 2 UI component.
• Inline Edit component introduces inline editing to Magento 2.
• Bookmark component will come in handy for storing data grids and their active and changed states.
• Resize component adds the ability to resize listing columns.
• Sticky header component is used to render additional grid toolbar and header.
• ExportButton component provides the ability to export grid data to csv, xml, and other data formats.

Magento 2 Form UI Component

With the Form component, it is possible run CRUD operations on an entity. Here are component’s element and constructor:

If the default functionality of the Form component is not enough, you can enhance it with Layout, FieldSet, Field, DataSource, and Container components.

As for available component options, they are the following:

• js_config -> deps – use it to set dependencies on component initialization
• js_config -> config -> provider – utilize this component option for specifying the component data name.
• layout – an option where the configuration class the visualization component meet each other.

How to create a Form component instance

There are three steps necessary for creating a Form component instance:

• Creation of a configuration file for the instance
• Creation of the DataProvider class for the entity used to implement DataProviderInterface
• Setting up a component in the Magento 2 layout as a node:

The official Dev Dock offers the following example to illustrate this case:

How to configure the Form component

As mentioned above, you can configure Magento 2 UI components locally or globally and the Form component is not an exception.

Create a configuration file (customer_form.xml) with the following content:

Now, you should add a description of the form fields via both components and Field Fieldset:

If you are going to group components, utilize the component container, as described below:

Useful links

• Source
• CONTAINER COMPONENT
• DEFINITION.XML
• Using UI components’ client-side