Today, we’re going to teach you guys how to create a UI form in your Magento 2 store.
In order to create a UI Form, you’ll have to use UI Component.
A UI Component is basically responsible for rendering result page fragments and facilitate interactions between the JavaScript component & server.
In simple words, A UI Component is used for rendering a User Interface in the most simple & flexible way possible. It establishes a connection between UI elements and related data processes that are submitted by the store’s visitors/customers.
And in this tutorial, we will show you exactly how to create UI Form in your Magento 2 store.
Steps to Create a UI Form in Magento 2
Please follow the below steps to to create a UI forms in your Magento 2 store.
Step 1. Create Router For Controller
Step 2. Create A Controller
Step 3. Create Layout File
Step 4. Create UI Component File named employee_form.xml File
Step 5. Create DataProvider.php File
Step 1. Create Router For Controller
First of all, we need to create a router for a controller.
For this, create a routes.xml file in the MageDelight/UiForm/view/adminhtml/layout folder and paste the following code:
<?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="MageDelight_UiForm"/> </route> </router> </config>
Step 2. Create A Controller
After that, we need to create a controller Edit.php file in the MageDelight/UiForm/Controller/Adminhtml/Employeefolder folder and paste the following code:
<?php
namespace MageDelight\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
Next, create a layout file uiform_employee_edit.xml in the MageDelight/UiForm/view/adminhtml/layout folder and paste the following code:
<?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 UI Component File
Now, we need to create employee_form.xml file in the MageDelight/UiForm/view/adminhtml/ui_component folder and paste the following code:
<?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">MageDelight\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
Finally, we need to create a DataProvider.php file in the MageDelight/UiForm/Model folder and paste the following code:
<?php
namespace MageDelight\UiForm\Model;
use MageDelight\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 [];
}
}
Ending Note
And there you go!
This is the best way to create a UI form in a Magento 2 store.
And if you need our professional assistance, feel free to contact us at any time.
Also read: How to Add “Use Default Value” Checkbox in UI Form of Online Store?