Introduction to UI components
UI components are used to represent distinct UI elements, such as tables, buttons, dialogs, and others.
UI components are implemented as a standard module named Magento_UI.
To use UI components in your custom module, you need to add a dependency for the Magento_UI module in your componets composer.json file.
The following 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
When to use UI components
With Magento, you may apply different approaches to implementing a UI element, and use:
We recommend using UI components as much as possible.
UI components work well together: they communicate with each other via the uiRegistry service that tracks their asynchronous initialization. Therefore, if we need to extend something that has already been implemented as a hierarchy of UI components or add a new feature that should interact with other UI components, it’s easier and more effective to use a UI component.
A UI component is a combination of:
XML declaration that specifies the component’s configuration settings and inner structure.
Here’s an example of how `uiClass` is used in a UI Component configuration:
Using the `uiClass` property allows Magento developers to customize and extend existing UI Components or create their own custom components with unique behaviors and functionality. It is a critical part of the MVVM (Model-View-ViewModel) pattern that Magento 2 follows, ensuring a clear separation of concerns between data, presentation, and behavior in the user interface.
The main classes that handle rendering and data binding in Magento 2 UI Components are:
Magento_Ui/js/lib/core/element/element(Element): The Element class serves as the base class for most UI Components in Magento 2. It provides the basic functionality for rendering and managing UI elements, including data binding, rendering templates, and handling events. UI Components often extend this class to inherit its core functionalities.
Magento_Ui/js/form/element/abstract(AbstractElement): The AbstractElement class extends the Element class and provides additional functionalities specific to form elements, such as form validation, error messages, and data updates for form elements.
These classes are the foundation for building UI Components in Magento 2, and they handle various aspects of UI rendering and behavior. UI Components in Magento 2 follow the MVVM pattern and utilize the KnockoutJS library to achieve two-way data binding and interactivity.
In Magento 2, `uiCollection` is not a class or component specifically defined in the core framework. I apologize for any confusion in my previous responses.
The term “uiCollection” might be a reference to the collection data type used in Magento, but it is not a standardized or official component in the Magento 2 UI Component framework.
In Magento, collections are used to represent a set of records retrieved from the database or other data sources. Collections are typically instances of the `\Magento\Framework\Data\Collection` class or its derivatives.
For example, in the context of Magento 2 models, you might retrieve a collection of products, customers, or orders from the database, and then use this collection to work with the data in your code.
Here’s an example of how a product collection might be retrieved in Magento 2:
The `$productCollection` variable in this example represents the collection of products retrieved from the database, and you can work with it to get individual product records or perform operations on the entire set of products.
Once again, I apologize for any confusion regarding `uiCollection`. If you have any further questions or need clarification on any Magento 2 concepts, please feel free to ask.