A Little Intro About Magento Ui Components
UI component is a combination of the XML declaration, JavaScript class inherited from Magento UI components base class, and its related template.
Magento UI components are used to represent distinct UI elements, such as tables, buttons, dialogs, and others.
Types of Ui Components:
We have basic and secondary UI components in the Magento.
Basic components are:
All other UI components are secondary.
Basic components are declared in the page layout files while secondary components are declared in the top-level components’ instances XML configuration.
1- XML Declaration:
The XML configuration for Ui Componentis declared in the relevant area of ui_component directory. For example:
<module_dir>/view/<area>/ui_component/%instance_name%.xml
A basic Ui Component is declared in the <referenceContainer/> node. In <referenceContainer> node, a uiComponent is used for Ui Component.
A simple example of UI component declaration:
<referenceContainer name="page-container">
<uiComponent name="%instance_name%"/>
</referenceContainer>2- JavaScript Class:
We will use KnockOut for UiComponent.
<module_dir>/view/frontend/web/js/uicomponent.js
define(['ko'],function (ko) {
'use strict';
return function (config) {
return {
title: ko.observable("Simple Ui Component, KnockOut"),
getMessage : function () {
return config;
}
}
}
});3- Template:
<module_dir>/view/frontend/templates/uicomponent.phtml
<script type="text/x-magento-init">
{
"*":{
"Magento_UI/js/core/app": {
"components":{
"helloWorldComponent":{
"component": "module_dir/js/uicomponentjs",
"message ": "<?= 'Hello World'; ?>"
}
}
}
}
}
</script><div data-bind="scope: 'helloWorldComponent'">
<div data-bind="text: title"></div>
</div>
Some Use Cases of Ui Components:
Magento recommend using UI components as much as possible.
We can use different approaches to implementing a UI element, like:
