Take a look: vendor/magento/module-customer/Block/Adminhtml/Edit/Tab/Newsletter.php:
$fieldset->addField(
'subscription',
'checkbox',
[
'label' => __('Subscribed to Newsletter'),
'name' => 'subscription',
'data-form-part' => $this->getData('target_form'),
'onchange' => 'this.value = this.checked;'
]
);
We can follow the same logic.
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
First you need to create table in update script.
}
Now add 2 files at
Namespace\Module\Model\ResourceModel\Modelname\Relation\Store
ReadHandler and SaveHandler.ReadHandler.php
SaveHandler.php
Now add Interface at
Namespace\Module\Api\Data\YourmodelInterface.php
and add all getter and setter of your model with annotation.now add RepositoryInterface of your model at
Namespace\Module\Api\YourmodelRepositoryInterface.php
Now add model repository at
Namespace\Module\Model\YourmodelRepository.php
Now add Resourcemodel at
Namespace\Module\Model\ResourceModel\Yourmodel.php
;now add Collection.php at
Namespace\Module\Model\ResourceModel\Yourmodel\Collection.php
Now add Abstract collection at
Namespace\Module\Model\ResourceModel\AbstractCollection.php
Now add Model class at
Namespace\Module\Model\Yourmodel.php
and add all your get and set which are defined in Yourmoduleinterface.now Add Data provider at Namespace\Module\Model\DataProvider.php
Now add di.xml
add collection.php at
Namespace\Module\Model\ResourceModel\Yourmodel\Grid\Collection.php
copy file fromMagento\Cms\Model\ResourceModel\Page\Grid\Collection.php
;