UI component is designed for Magento 2 software to render a User Interface (UI) in a simple and flexible way. To create a UI form in Magento 2 by using the UI component. For example 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.
Step 1: Create Router For Controller
In the first step, you need to create a routes.xml
file in Magemeta/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="Magemeta_UiForm"/> </route> </router> </config>
Step 2: Create A Controller
Please create a Edit.php
file in Magemeta/UiForm/Controller/Adminhtml/Employee
<?php namespace Magemeta\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, we need to create uiform_employee_edit.xml
layout file in ‘Magemeta/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 Magemeta/UiForm/view/adminhtml/ui_component
Now, we need to create employee_form.xml file in Magemeta/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">Magemeta\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 Magemeta/UiForm/Model
Folder
Last step, you need to create DataProvider.php
file in Magemeta/UiForm/Model
folder.
<?php namespace Magemeta\UiForm\Model; use Magemeta\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 completing all above steps, your UI form is ready once you run setup:upgrade.
Hope this helps you guys!