Magento 2 Creating A UI Form

UI component is designed for Magento 2 software to render a User Interface (UI) in a simple and flexible way. In this article, I will instruct you to create a UI form in Magento 2 by using the UI component. Assume 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. Here I presume that you already can create a model and resource model for the table.

Let’s follow these steps below for successfully creating a UI form in Magento 2!

Step 1: Create Router For Controller

In the first step, you need to create a routes.xml file in Webkul/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="Webkul_UiForm"/>
        </route>
    </router>
</config>

Step 2: Create A Controller

Now, please create a Edit.php file in Webkul/UiForm/Controller/Adminhtml/Employeefolder folder.

<?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 Layout File

In this step, you need to create uiform_employee_edit.xml layout file in ‘Webkul/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 Webkul/UiForm/view/adminhtml/ui_component

Now, you need to create employee_form.xml file in 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>
    <dataSource name="employee_form_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Webkul\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 Webkul/UiForm/Model Folder

Finally, you need to create DataProvider.php file in Webkul/UiForm/Model folder.

<?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 going through five above steps, your UI form is ready.

List Of UI Components

Here are components which can be used in the scope of the Form component:

  • ActionDelete
  • Checkbox
  • Checkboxset
  • DataSource
  • FieldSet
  • FileUploader
  • Hidden
  • Input
  • Multiline
  • Multiselect
  • Radioset
  • Select
  • Text
  • Textarea
  • Wysiwyg

Conclusion

Above are the details instruction for creating UI form in Magento 2. Hopefully, this post will help you manage and grow your online business efficiently. If you have any questions or want to discuss something related to this post, don’t hesitate to leave a comment below!

Enjoyed the tutorial? Spread it to your friends!