How to Create UI Form in Magento 2?
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!
- How to create a simple Hello World module for Magento 2
- Magento 2 Block Template Ultimate Guides
- How to Create Module in Magento 2
- How to Create Controller in Magento 2
- How to create CRUD Models in Magento 2
- How to Create Magento 2 Block, Layout and Templates
- Configuration - System.xml
- How To Create Admin Menu In Magento 2
- Admin ACL
- Admin Grid