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

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

asked Oct 29, 2018 at 5:37 Aditya Shah Aditya Shah 7,627 3 3 gold badges 40 40 silver badges 78 78 bronze badges Is it in your custom module or ? Commented Oct 29, 2018 at 5:43 Yes in my custom module @rohan Commented Oct 29, 2018 at 5:44 I never done this before so please be descriptive :) @Rohan Commented 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. Commented Oct 29, 2018 at 5:46 Okay bro :) no hurry Commented Oct 29, 2018 at 5:47

1 Answer 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

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

resultFactory->create(ResultFactory::TYPE_PAGE); return $resultPage; > >

Step 3 : Create uiform_employee_edit.xml layout file in folder Namespace/Modulename/view/adminhtml/layout

Step 4 : Create employee_form.xml in folder Namespace/Modulename/view/adminhtml/ui_component .

    employee_form.employee_form_data_source employee_form.employee_form_data_source  Employee Information data employee_form  templates/form/collapsible   Namespace\Modulename\Model\DataProvider employee_form_data_source id id   Magento_Ui/js/form/provider      true Employee Details 20     text Employee Id input employee employee_id      text Employee Name input employee employee_name      text Employee Salary input employee employee_salary      text Employee Address textarea employee employee_address

Step 5 : Create DataProvider.php in folder Namespace/Modulename/Model

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

my-custom-class

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

 true

Otherwise there is a no option i think so!