We use cookies to make your experience better. To comply with the new e-Privacy directive, we need to ask for your consent to set the cookies. Learn more.
Four Steps To Create A Custom Form In Magento 2
Create A Controller File
Directory
app/code/VendorName/ModuleName/Controller/Adminhtml/CustomForm/Index.php
Content For this File
<?php
namespace VendorName\ModuleName\Controller\Adminhtml\CustomForm;
class Index extends \Magento\Framework\App\Action\Action
{
/** @var \Magento\Framework\View\Result\PageFactory */
protected $resultPageFactory;
public function __construct(
\Magento\Framework\App\Action\Context $context,
\Magento\Framework\View\Result\PageFactory $resultPageFactory
) {
$this->resultPageFactory = $resultPageFactory;
parent::__construct($context);
}
/**
* Load the page defined in view/adminhtml/layout/customnewpage_customform_index.xml
*
* @return \Magento\Framework\View\Result\Page
*/
public function execute()
{
return $this->resultPageFactory->create();
}
}
Create A Layout File
Directory
app/code/VendorName/ModuleName/view/adminhtml/layout/customnewpage_customform_index.xml
Content For this File
<?xml version="1.0"?>
<!--
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<head>
<title>
Custom Form
</title>
</head>
<body>
<referenceContainer name="content">
<uiComponent name="customform_form"/>
</referenceContainer>
</body>
</page>
Create The UI Component File
Directory
app/code/VendorName/ModuleName/view/adminhtml/ui_component/customform_form.xml
Content for this file
<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/Ui/etc/ui_configuration.xsd">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="provider" xsi:type="string">customform_form.customform_form_data_source</item>
<item name="deps" xsi:type="string">customform_form.customform_form_data_source</item>
</item>
<item name="label" xsi:type="string" translate="true">Custom Form</item>
<item name="layout" xsi:type="array">
<item name="type" xsi:type="string">tabs</item>
</item>
</argument>
<dataSource name="sampleform_form_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">VendorName\ModuleName\Model\DataProvider</argument>
<argument name="name" xsi:type="string">customform_form_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">entity_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="custom_fieldset">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Custom Fieldset</item>
</item>
</argument>
<!-- This field represents form id and is hidden -->
<field name="entity_id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="visible" xsi:type="boolean">false</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">customform</item>
</item>
</argument>
</field>
<!-- This field has data type 'text' and standard 'input' form element and looks like input -->
<field name="title">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">New title</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">customform</item>
</item>
</argument>
</field>
</fieldset>
</form>
Create Provider file
Directory
app/code/VendorName\ModuleName\Model\DataProvider.php
Content for this file
<?php
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
namespace VendorName\ModuleName\Model;
/**
* Class DataProvider
*/
class DataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider
{
/**
* Get data
*
* @return array
*/
public function getData()
{
return [];
}
}
If you are looking for Magento Developers, visit Magento Developer Agency.