1
  • I want create custom html form in Magento 2 - Admin Panel
  • Where from block i can save all form data in new database table.

enter image description here

  1. Drop-down 1, Drop-down 2, Price text-box 1, Price text-box 2, Price text-box 3 in 1 row

  2. and there are 6 rows like this.

  3. Ignore Captcha Code

How can i make custom form like this in Magento 2- Admin ?

  • Is it in your custom module or ? – Rohan Hapani Oct 29 '18 at 5:43
  • Yes in my custom module @rohan – Aditya Shah Oct 29 '18 at 5:44
  • I never done this before so please be descriptive :) @Rohan – Aditya Shah Oct 29 '18 at 5:45
  • I just see in core tab. I also need to look over that :D After I can describe you. – Rohan Hapani Oct 29 '18 at 5:46
  • Okay bro :) no hurry – Aditya Shah Oct 29 '18 at 5:47
1

You can create admin form using UI Component.

Step 1 : First you have to create router for controller. Create routes.xml in folder Namespace/Modulename/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="Namespace_Modulename"/>
    </route>
</router>
</config>

Step 2 : Now create a controller. Create a Edit.php in folder Namespace/Modulename/Controller/Adminhtml/Employee.

<?php
namespace Namespace\Modulename\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 Namespace/Modulename/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 Namespace/Modulename/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">Namespace\Modulename\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 Namespace/Modulename/Model

<?php
namespace Namespace\Modulename\Model;

use Namespace\Modulename\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 [];
    }
}

As per your screen-shoot to display field in single column i research and found that you can archive this using add css to your field.

You can use the additionalClasses

<item name="additionalClasses" xsi:type="string">my-custom-class</item>

Side note: interestingly, it seems like it also handles arrays:

<item name="additionalClasses" xsi:type="array">
<item name="my-custom-class" xsi:type="boolean">true</item>

Otherwise there is a no option i think so!

I hope it helps!

  • Does this save data in Database ? – Aditya Shah Oct 29 '18 at 5:50
  • Yes for this you need to use CRUD opration – Chirag Patel Oct 29 '18 at 5:51
  • What does mean by Where from block i can save all form data in new database table. ? – Chirag Patel Oct 29 '18 at 5:52
  • It was for custom html form but using your method how can i save data in db ? – Aditya Shah Oct 29 '18 at 5:52
  • You already have a create a form or you want to save data to database of existing form? – Chirag Patel Oct 29 '18 at 5:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.