Create UI Form in Magento 2 – Part 1

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.

Categories: Magento2

Tags: Magento2 Ui Component Ui Form

Rahul Mahto 21-February-2024

View Comments (14) Comment or Ask a Question

Quick Links