How to Create UI Form in Magento 2?
Vinh Jacker | 12-18-2024
UI component components are in charge of rendering result page fragments and facilitating JavaScript component-server interactions. It connects the UI’s visual elements and related data processes which are submitted by users. Some UI elements can be named as tables, buttons, or dialogs. Therefore, admins can use grids more easily with the help of UI components. In this article, I will instruct you to create a UI form in Magento 2 by using the UI component.
Assume that you want to create employee form as a UI form in admin, which has Employee Name, Employee Id, Employee Salary, and Employee Address field. The table name is supposed to be employee_details. First of all, you need to create a Model and Resource Model for this employee_details table. Here I presume that you already can create a model and resource model for the table.
Let’s follow the steps below for successfully creating a UI form in Magento 2!
- Step 1: Create Router For Controller
- Step 2: Create A Controller
- Step 3: Create Layout File
- Step 4: Create employee_form.xml File In Mageplaza/UiForm/view/adminhtml/ui_component Folder
- Step 5: Create DataProvider.php File In Mageplaza/UiForm/Model Folder
Step 1: Create Router For Controller
In the first step, you need to create a routes.xml file in Mageplaza/UiForm/view/adminhtml/layout folder.
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="admin">
<route id="uiform" frontName="uiform">
<module name="Mageplaza_UiForm"/>
</route>
</router>
</config>
Step 2: Create A Controller
Now, please create a Edit.php file in Mageplaza/UiForm/Controller/Adminhtml/Employeefolder folder.
<?php
namespace Mageplaza\UiForm\Controller\Adminhtml\Employee;
use Magento\Framework\Controller\ResultFactory;
class Edit extends \Magento\Backend\App\Action
{
/**
* @return \Magento\Backend\Model\View\Result\Page
*/
public function execute()
{
$resultPage = $this->resultFactory->create(ResultFactory::TYPE_PAGE);
return $resultPage;
}
}
Step 3: Create Layout File
In this step, you need to create uiform_employee_edit.xml layout file in ‘Mageplaza/UiForm/view/adminhtml/layout’ folder.
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<update handle="styles"/>
<body>
<referenceContainer name="content">
<uiComponent name="employee_form"/>
</referenceContainer>
</body>
</page>
Step 4: Create employee_form.xml File In Mageplaza/UiForm/view/adminhtml/ui_component
Now, you need to create employee_form.xml file in Mageplaza/UiForm/view/adminhtml/ui_component
<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="provider" xsi:type="string">employee_form.employee_form_data_source</item>
<item name="deps" xsi:type="string">employee_form.employee_form_data_source</item>
</item>
<item name="label" xsi:type="string" translate="true">Employee Information</item>
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">data</item>
<item name="namespace" xsi:type="string">employee_form</item>
</item>
<item name="template" xsi:type="string">templates/form/collapsible</item>
</argument>
<dataSource name="employee_form_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">Mageplaza\UiForm\Model\DataProvider</argument>
<argument name="name" xsi:type="string">employee_form_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">id</argument>
<argument name="requestFieldName" xsi:type="string">id</argument>
</argument>
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
</item>
</argument>
</dataSource>
<fieldset name="employee_details">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="collapsible" xsi:type="boolean">true</item>
<item name="label" xsi:type="string" translate="true">Employee Details</item>
<item name="sortOrder" xsi:type="number">20</item>
</item>
</argument>
<field name="employee_id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Employee Id</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">employee</item>
<item name="dataScope" xsi:type="string">employee_id</item>
</item>
</argument>
</field>
<field name="employee_name">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Employee Name</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">employee</item>
<item name="dataScope" xsi:type="string">employee_name</item>
</item>
</argument>
</field>
<field name="employee_salary">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Employee Salary</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">employee</item>
<item name="dataScope" xsi:type="string">employee_salary</item>
</item>
</argument>
</field>
<field name="employee_address">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Employee Address</item>
<item name="formElement" xsi:type="string">textarea</item>
<item name="source" xsi:type="string">employee</item>
<item name="dataScope" xsi:type="string">employee_address</item>
</item>
</argument>
</field>
</fieldset>
</form>
Step 5: Create DataProvider.php File In Mageplaza/UiForm/Model Folder
Finally, you need to create DataProvider.php file in Mageplaza/UiForm/Model folder.
<?php
namespace Mageplaza\UiForm\Model;
use Mageplaza\UiForm\Model\ResourceModel\Employee\CollectionFactory;
class DataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider
{
/**
* @param string $name
* @param string $primaryFieldName
* @param string $requestFieldName
* @param CollectionFactory $employeeCollectionFactory
* @param array $meta
* @param array $data
*/
public function __construct(
$name,
$primaryFieldName,
$requestFieldName,
CollectionFactory $employeeCollectionFactory,
array $meta = [],
array $data = []
) {
$this->collection = $employeeCollectionFactory->create();
parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
}
/**
* Get data
*
* @return array
*/
public function getData()
{
return [];
}
}
After going through the five above steps, your UI form is ready.
List Of UI Components
Here are components which can be used in the scope of the Form component:
- ActionDelete
- Checkbox
- Checkboxset
- DataSource
- FieldSet
- FileUploader
- Hidden
- Input
- Multiline
- Multiselect
- Radioset
- Select
- Text
- Textarea
- Wysiwyg
Conclusion
Admins can take their management to the next level by using UI components to create a UI form. Above are the detailed instruction for creating UI form in Magento 2. Hopefully, this post will help you manage and grow your online business efficiently. If you have any questions or want to discuss something related to this post, don’t hesitate to leave a comment below!
With over a decade of experience crafting innovative tech solutions for ecommerce businesses built on Magento, Jacker is the mastermind behind our secure and well-functioned extensions. With his expertise in building user-friendly interfaces and robust back-end systems, Mageplaza was able to deliver exceptional Magento solutions and services for over 122K+ customers around the world.
Related Post
Import and Export Orders in Magento 2
Simplify data handling for your Magento 2 online store! Learn how to import and export orders in Magento 2 quickly and efficiently with this comprehensive guide.
What are Webhooks in Magento 2
Discover webhooks in Magento 2: a powerful tool to reduce manual workload for business owners. Learn how they work, their key features, and easy configuration tips.
Top 10+ Shopify Store Name Generators: Ultimate Review Guide
By exploring the top 10+ Shopify store name generators, we aim to help you create unique and meaningful store names.
Should I Hire A Shopify Expert? Reasons, How-tos
This article will focus on the question “Should I hire a Shopify expert?”, unlock major reasons & practical tips to find the perfect fit for your business.
How to Make FAQ Page Shopify For SEO: A Comprehensive Guide
Confused by customer questions? This article aims to guide you how to make faq page Shopify that saves your time and boosts sales.
Import and Export Orders in Magento 2
Simplify data handling for your Magento 2 online store! Learn how to import and export orders in Magento 2 quickly and efficiently with this comprehensive guide.
What are Webhooks in Magento 2
Discover webhooks in Magento 2: a powerful tool to reduce manual workload for business owners. Learn how they work, their key features, and easy configuration tips.
Top 10+ Shopify Store Name Generators: Ultimate Review Guide
By exploring the top 10+ Shopify store name generators, we aim to help you create unique and meaningful store names.
Should I Hire A Shopify Expert? Reasons, How-tos
This article will focus on the question “Should I hire a Shopify expert?”, unlock major reasons & practical tips to find the perfect fit for your business.
How to Make FAQ Page Shopify For SEO: A Comprehensive Guide
Confused by customer questions? This article aims to guide you how to make faq page Shopify that saves your time and boosts sales.
& Maintenance Services
Make sure your store is not only in good shape but also thriving with a professional team yet at an affordable price.
Get Started