2
  • 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 ?

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

1 Answer 1

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!

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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