Read More
Read More
Menu Close

    Create UI Form in Magento2 – Part 1

    In this blog we will see how to create ui form in Magento2.
    Yes, like admin grid we can also create form using ui component in Magento2.

    Suppose we want to create employee form in admin. This employee form will have field Employee Name, Employee Id, Employee Salary and Employee Address. Suppose table name is employee_details.

    First of all create Model and Resource Model for this table ’employee_details’. Here i am assuming that you already know how to create model and resource model for the table.

    Now follow the steps to create ui form.

    Step 1 : First you have to create router for controller. Create ‘routes.xml’ in folder ‘Webkul/UiForm/etc/adminhtml’

    Searching for an experienced
    Magento 2 Company ?
    Read 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 a ‘Edit.php’  in 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>
        <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 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.

    . . .
    Discuss on Helpdesk

    Leave a Comment

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


    14 comments

  • Jayashree N
    I have tried above code. But where do i see a form or output in backend.. You did not mentioned about menu.xml then how do i get UIForm -> EmployeeDetails
    • Webkul Support

      Hello Jayashree, We use form to add or edit data and this form.In this blog i focused on creating UI Form in Magento2.You can use ui form according to your need.For example – you can land on this page from a link in grid. or you can land on this page by clicking a button.
      I wrote this blog for the reference.You can also check it by directly hitting the url.
      Here is the code for menu.xml

      Hope it will help you.
      if you have any query let me know.
      Thanks

      Rahul MahtoSenior E-Commerce Developer (Magento)

      • vijay
        Hello,

        Please provide us menu.xml file and where we can add in folder?

  • Priya Ponnusamy
    Thanks for the article Rahul. How to populate the data into the form?
    • Rahul
      Hello Priya,
      I already wrote a blog on this.
      Please go through the blog
      https://webkul.com/blog/create-ui-form-magento2-part-2/

      Thanks

    • Webkul Support

      Hello Priya

      I already wrote a blog on this.
      Please go through
      https://webkul.com/blog/create-ui-form-magento2-part-2/

      Thanks

      Rahul MahtoSenior E-Commerce Developer (Magento)

      Webkul Software Pvt. Ltd. Contact : India (+91)-9650486699 USA (+1)-9143531684

      A 67 Sector 63 ,
      Noida-201301 (U.P.)
      India

      http://webkul.com

      This email and any files transmitted with it are confidential and contain privileged or copyright information. If you are not the intended recipient you must not disseminate, copy, distribute, or use this email or the information contained in it for any purpose other than to notify us. If you have received this message in error, please notify the sender immediately, and delete this email from your system.

      • Priya Ponnusamy
        I just got it fixed. Thanks for your response Rahul!!
  • E.B
    Getting an error “Fatal error: Class ‘vendormodulenameModelDataProvider’ not found in /var/www/html/mage2/vendor/magento/framework/ObjectManager/Factory/AbstractFactory.php on line 93”
  • Ivan
    Rahul, thank you very match.
    I added this in layout, but have problem.
    I see tabs, but loading of page don’t stop.
    https://uploads.disquscdn.com/images/c18ba6877d9be5a2c6d9fb16cd0c1f2e579ab04c82d394b8ded349f40ac27d21.png
    I also add button in component configuration

    add
    Save Message
    primary
    */*/save

    I made debuging of controller action save and got empty data.
    I take form data in this way
    $request = $this->getRequest();
    $data = $request->getParams();//empty

  • Rahul
    Hello Ivan,

    If you want to use tabs then you have to define the page layout admin-2columns-left.

    Add layout=”admin-2columns-left” in page layout file.

    How to fill data from db in form. I will write a blog about this.

  • Ivan
    Hello, I have message No element found with ID ‘left’ instead of form. In
    DataProvider.php you use WebkulUiFormModelResourceModelEmployeeCollectionFactory. What the code of this class? or I must create only
    WebkulUiFormModelResourceModelEmployeeCollection for this
    • Rahul
      Hello Ivan,

      Its ResourceModel for your table.
      First create a table and then create model and resource model for that table.

      Thanks

  • Back to Top