{"id":16252,"date":"2021-09-28T07:02:09","date_gmt":"2021-09-28T07:02:09","guid":{"rendered":"https:\/\/www.cmarix.com\/blog\/?p=16252"},"modified":"2026-04-14T09:50:56","modified_gmt":"2026-04-14T09:50:56","slug":"key-steps-to-create-a-simple-ui-component-in-magento-2","status":"publish","type":"post","link":"https:\/\/www.cmarix.com\/blog\/key-steps-to-create-a-simple-ui-component-in-magento-2\/","title":{"rendered":"Key Steps to Create A Simple UI Component in Magento 2"},"content":{"rendered":"\n

UI components are designed for simple and adaptable (UI) delivery. Components are responsible for delivering result page pieces and giving\/supporting further interactions of JavaScript components and servers. Hire a Magento developers<\/a> to integrate these UI components and use them in the custom module.<\/p>\n

Magento UI components are carried out as a standard module named Magento_UI.<\/p>\n

To utilize UI components in your custom module, Magento Development Services need to add a reliance for the Magento_UI module in your part’s composer.json file.<\/p>\n

The accompanying XSD file<\/a> contains rules and limitations divided among all components (the two definitions and instance configurations):<\/p>\n

<your module root dir>\/Magento\/Ui\/and so forth\/ui_definition.xsd<\/p>\n

Augmentation engineers can’t broaden this XSD conspire and present new components, however, they can customize existing ones.<\/p>\n

$\"Best$ <\/p>\n

Standard Design<\/h2>\n
In Magento 2 there are essential and auxiliary UI components.<\/p>\n
Essential components are:<\/p>\n
\n
Listing part<\/li>\n
Form part<\/li>\n<\/ul>\n
Essential components are proclaimed in the page format files; optional components are announced in the high-level components’ instances configuration files.<\/p>\n
All components can be designed both for Admin and customer-facing facade.<\/p>\n
When to Utilize UI Components?<\/h2>\n
With Magento, you may apply various ways to deal with carrying out a UI element, and use:<\/p>\n
\n
PHTML template with inline JavaScript<\/li>\n
PHTML template with the declaration of related JavaScript file by means of XML design<\/li>\n
jQuery gadget<\/li>\n
Magento 2 UI segment<\/li>\n<\/ul>\n
We suggest utilizing UI components however much as could reasonably be expected and will, in general, do likewise in the Magento center.<\/p>\n
UI components function admirably together: they speak with one another through the ui Registry service that tracks their nonconcurrent introduction. If you need to broaden something that has effectively been carried out as a chain of command of UI components or add another feature that ought to interact with other UI components, it’s simpler and more effective to utilize a UI part.<\/p>\n
$\"CTA\"$ <\/a><\/p>\n
What is a UI Component?<\/h2>\n
UI segment is a blend of:<\/strong><\/p>\n
\n
XML declaration that indicates the segment’s configuration settings and inward construction.<\/li>\n
JavaScript class acquired from one of the Magento JavaScript structure UI components base classes (like UIElement, UIClass or UICollection).<\/li>\n
Related template(s)<\/li>\n<\/ol>\n
Read more: <\/strong>A Comprehensive Guide To Magento Integration with 3rd Party Applications<\/a><\/p>\n
XML Declaration<\/h2>\n
XML is broadly utilized in Magento 2, which permits engineers to effortlessly reuse existing functionalities and add customizations.<\/p>\n
Contrasted with XML designs, UI components utilize a more semantic way to deal with pronouncing and arranging the UI.<\/p>\n
An instance of a UI part is typically founded on the progression of kid UI components.<\/p>\n
The UI part is designed for Magento 2 programming to deliver a User Interface<\/a> (UI) in a straightforward and adaptable way. In this article, I will train you to create a UI structure in Magento 2 by utilizing the UI segment. Accept that you need to create an employee structure as a UI structure in administrator, which has Employee Name,Id, Salary, and Employee Address field. The table name should be employee_details. Above all else, you need to create a Model and Resource Model for this employee_details table. Here I assume that you, as of now, can create a model and resource model for the table.<\/p>\n
We should follow these steps underneath for effectively making a UI structure in Magento 2<\/strong><\/p>\n
Step 1: Create Router for Controller<\/h3>\n
In the primary step, you need to create a routes.xml file in CMARIX\/UiForm\/view\/adminhtml\/layout folder.<\/strong><\/p>\n
$\"Code\"$ <\/p>\n
Step 2: Create a Controller<\/h3>\n
You can create an Edit.php file in CMARIX\/UniForm\/Controller\/Adminhtml\/Employeefolder folder.<\/p>\n
$\"Create$ <\/p>\n
Step 3: Create Layout File<\/h3>\n
In this step<\/strong>, you need to create a uiform_employee_edit.xml layout file in ‘CMARIX\/UiForm\/view\/adminhtml\/layout’ folder.<\/p>\n
$\"Code\"$ <\/p>\n
Step 4: Create employee_form.xml File<\/h3>\n
In CMARIX\/UiForm\/view\/adminhtml\/ui_component<\/p>\n
You need to create employee_form.xml file in CMARIX\/UiForm\/view\/adminhtml\/ui_component<\/p>\n
$\"Code\"$ <\/p>\n
$\"Code\"$ <\/p>\n
$\"Code\"$ <\/p>\n
Step 5: Create DataProvider.php File In CMARIX\/UiForm\/Model Folder<\/h3>\n
Finally, you need to create a DataProvider.php file in CMARIX\/UiForm\/Model folder.<\/p>\n
$\"Code\"$ <\/p>\n
After going through the five above steps, your UI form is ready.<\/p>\n
List of UI Components<\/h2>\n
Here are components that can be used by Magento Development Company<\/a> to form components:<\/p>\n
\n
ActionDelete<\/li>\n
Checkbox<\/li>\n
Checkbox Set<\/li>\n
DataSource<\/li>\n
FieldSet<\/li>\n
FileUploader<\/li>\n
Hidden<\/li>\n
Input<\/li>\n
Multiline<\/li>\n
Multiselect<\/li>\n
Radio set<\/li>\n
Select<\/li>\n
Text<\/li>\n
Textarea<\/li>\n
Wysiwyg<\/li>\n<\/ul>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"
UI components are designed for simple and adaptable (UI) delivery. Components are […]<\/p>\n","protected":false},"author":3,"featured_media":16255,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[24],"tags":[],"class_list":["post-16252","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/posts\/16252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/comments?post=16252"}],"version-history":[{"count":11,"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/posts\/16252\/revisions"}],"predecessor-version":[{"id":49392,"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/posts\/16252\/revisions\/49392"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/media\/16255"}],"wp:attachment":[{"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/media?parent=16252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/categories?post=16252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmarix.com\/blog\/wp-json\/wp\/v2\/tags?post=16252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Step 3: Create Layout File<\/h3>\nIn this step<\/strong>, you need to create a uiform_employee_edit.xml layout file in ‘CMARIX\/UiForm\/view\/adminhtml\/layout’ folder.<\/p>\n<\/p>\n

Step 5: Create DataProvider.php File In CMARIX\/UiForm\/Model Folder<\/h3>\nFinally, you need to create a DataProvider.php file in CMARIX\/UiForm\/Model folder.<\/p>\n<\/p>\nAfter going through the five above steps, your UI form is ready.<\/p>\n

Step 3: Create Layout File<\/h3>\n
In this step<\/strong>, you need to create a uiform_employee_edit.xml layout file in ‘CMARIX\/UiForm\/view\/adminhtml\/layout’ folder.<\/p>\n
$\"Code\"$ <\/p>\n

Step 5: Create DataProvider.php File In CMARIX\/UiForm\/Model Folder<\/h3>\n
Finally, you need to create a DataProvider.php file in CMARIX\/UiForm\/Model folder.<\/p>\n
$\"Code\"$ <\/p>\n
After going through the five above steps, your UI form is ready.<\/p>\n