Magento – How to make custom html form in Admin in Magento 2

adminformadminhtmlmagento2

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

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

and there are 6 rows like this.

Ignore Captcha Code

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

Best Answer

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!

Best Answer

Related Solutions

Magento 2 – Multiselect Form Field Not Saved to Database

Related Topic