Back to Top

Create UI Form in Magento 2 – Part 1

Updated 21 February 2024

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’

Searching for an experienced
Magento 2 Company ?
Find out More
<?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.
Create Ui Form

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.

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


14 comments

  • Jayashree N
    • Webkul Support
      • vijay
  • Priya Ponnusamy
    • Rahul
    • Webkul Support
      • Priya Ponnusamy
  • E.B
  • Ivan
    • Rahul
  • Rahul
  • Ivan
    • Rahul
      • Ivan
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home