Magento 2 UI component – In this blog, we will see how to create UI form in Magento 2.
Yes, like the admin grid, we can also create forms using the UI component in Magento 2.
Suppose we want to create an employee form in the admin. This employee form will have fields Employee Name, Employee Id, Employee Salary, and Employee Address. Suppose the table name is employee_details.
First of all, create a Model and Resource Model for this table ’employee_details’. Here i am assuming that you already know how to create a model and resource model for the table.
Now follow the steps to create ui form.
Step 1: First you have to create a router for the controller. Create ‘routes.xml’ in folder ‘Webkul/UiForm/etc/adminhtml’
<?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="Webkul_UiForm"/>
</route>
</router>
</config>
Step 2: Now create a controller. Create an ‘Edit.php’ in the folder ‘Webkul/UiForm/Controller/Adminhtml/Employee’.
<?php
namespace Webkul\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 ‘uiform_employee_edit.xml’ layout file in folder ‘Webkul/UiForm/view/adminhtml/layout’
<?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’ in folder ‘Webkul/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>
<settings>
<buttons>
<button name="save" class="Webkul\UiForm\Block\Adminhtml\Employee\SaveButton"/>
</buttons>
<dataScope>data</dataScope>
<deps>
<dep>employee_form.employee_form_data_source</dep>
</deps>
</settings>
<dataSource name="employee_form_data_source">
<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>
<settings>
<submitUrl path="*/*/save"/>
</settings>
<dataProvider class="Webkul\UiForm\Model\DataProvider" name="employee_form_data_source">
<settings>
<requestFieldName>id</requestFieldName>
<primaryFieldName>entity_id</primaryFieldName>
</settings>
</dataProvider>
</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="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">name</item>
</item>
</argument>
</field>
<field name="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">salary</item>
</item>
</argument>
</field>
<field name="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">address</item>
</item>
</argument>
</field>
</fieldset>
</form>
Step 5 : Create DataProvider.php in folder ‘Webkul/UiForm/Model’
<?php
namespace Webkul\UiForm\Model;
use Webkul\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 all these steps your ui form is ready.
if you want to display values from database in form fields then refer to this link Create UI Form In Magento2 – Part 2
If you have any query please comment below.
14 comments
Hello Jayashree, We use form to add or edit data and this form.In this blog i focused on creating UI Form in Magento2.You can use ui form according to your need.For example – you can land on this page from a link in grid. or you can land on this page by clicking a button.
I wrote this blog for the reference.You can also check it by directly hitting the url.
Here is the code for menu.xml
Hope it will help you.
if you have any query let me know.
Thanks
Rahul MahtoSenior E-Commerce Developer (Magento)
Please provide us menu.xml file and where we can add in folder?
I already wrote a blog on this.
Please go through the blog
https://webkul.com/blog/create-ui-form-magento2-part-2/
Thanks
Hello Priya
I already wrote a blog on this.
Please go through
https://webkul.com/blog/create-ui-form-magento2-part-2/
Thanks
Rahul MahtoSenior E-Commerce Developer (Magento)
Webkul Software Pvt. Ltd. Contact : India (+91)-9650486699 USA (+1)-9143531684
A 67 Sector 63 ,
Noida-201301 (U.P.)
India
http://webkul.com
This email and any files transmitted with it are confidential and contain privileged or copyright information. If you are not the intended recipient you must not disseminate, copy, distribute, or use this email or the information contained in it for any purpose other than to notify us. If you have received this message in error, please notify the sender immediately, and delete this email from your system.
I added this in layout, but have problem.
I see tabs, but loading of page don’t stop.
https://uploads.disquscdn.com/images/c18ba6877d9be5a2c6d9fb16cd0c1f2e579ab04c82d394b8ded349f40ac27d21.png
I also add button in component configuration
add
Save Message
primary
*/*/save
I made debuging of controller action save and got empty data.
I take form data in this way
$request = $this->getRequest();
$data = $request->getParams();//empty
use submit_url in ui component form xml.
Then your form will be submitted and you will get the data.
You can read this blog for more details
http://webkul.com/blog/create-ui-form-magento2-part-2/
You can also get complete source code from github
https://github.com/rahul0989/sample_ui_form
If you want to use tabs then you have to define the page layout admin-2columns-left.
Add layout=”admin-2columns-left” in page layout file.
How to fill data from db in form. I will write a blog about this.
DataProvider.php you use WebkulUiFormModelResourceModelEmployeeCollectionFactory. What the code of this class? or I must create only
WebkulUiFormModelResourceModelEmployeeCollection for this
Its ResourceModel for your table.
First create a table and then create model and resource model for that table.
Thanks
Another question – I want to add tabs (create nav menu such in for example Customer-Add New Customer with tabs Account Information, Addresses ) . How can I do this?
If I add this https://uploads.disquscdn.com/images/a8e59f3c279a3856b921cb54f6ac9df8a28b4496dd365c6442996c582f3cf4c4.png
tabs
content
I have message No element found with ID ‘left’ instead of form again such on image.
And I want to added fields of form with values from db. How can I do this?