Hello Everyone,
In this blog, we will learn about how to Create UI Component Form to perform CRUD operation in Magento 2.
In our previous blog we just created a UI Component Grid.
UI Component Grid and UI Component Form are two most important parts of Magento 2 Admin.
Without wasting your time, let us guide you straight away. Follow the easy step given below to Create UI Component Form and perform CRUD operation in Magento 2.
STEPS FOR CREATE UI COMPONENT FORM AND PERFORM CRUD OPERATION IN MAGENTO 2
Step 1: Create helloworld_index_form.xml file
app/code/Vendor/Extension/view/adminhtml/layout/helloworld_index_form.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<update handle="styles"/>
<body>
<referenceContainer name="content">
<uiComponent name="ui_form"/>
</referenceContainer>
</body>
</page>
Step 2: Create Form.php file
app/code/Vendor/Extension/Controller/Adminhtml/Index/Form.php
<?php
namespace Vendor\Extension\Controller\Adminhtml\Index;
use Magento\Backend\App\Action;
use Magento\Backend\App\Action\Context;
use Magento\Framework\Controller\ResultFactory;
use Magento\Framework\View\Result\PageFactory;
class Form extends Action
{
protected $resultPageFactory;
public function __construct(
Context $context,
PageFactory $resultPageFactory
) {
parent::__construct($context);
$this->resultPageFactory = $resultPageFactory;
}
public function execute()
{
$resultRedirect = $this->resultFactory->create(ResultFactory::TYPE_REDIRECT);
$resultPage = $this->resultPageFactory->create();
$resultPage->getConfig()->getTitle()->set(__('Add Records'));
return $resultPage;
}
}
Step 3: Create ui_form.xml file
app/code/Vendor/Extension/view/adminhtml/ui_component/ui_form.xml
<?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">ui_form.ui_form_data_source</item>
<item name="deps" xsi:type="string">ui_form.ui_form_data_source</item>
</item>
<item name="label" xsi:type="string" translate="true">Form Information</item>
<item name="config" xsi:type="array">
<item name="dataScope" xsi:type="string">data</item>
<item name="namespace" xsi:type="string">ui_form</item>
</item>
<item name="spinner" xsi:type="string">book_information</item>
<item name="buttons" xsi:type="array">
<item name="back" xsi:type="string">Vendor\Extension\Block\Adminhtml\Button\Back</item>
<item name="reset" xsi:type="string">Vendor\Extension\Block\Adminhtml\Button\Reset</item>
<item name="delete" xsi:type="string">Vendor\Extension\Block\Adminhtml\Button\Delete</item>
<item name="save" xsi:type="string">Vendor\Extension\Block\Adminhtml\Button\Save</item>
</item>
<item name="template" xsi:type="string">templates/form/collapsible</item>
</argument>
<dataSource name="ui_form_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">Vendor\Extension\Model\Grid\DataProvider</argument>
<argument name="name" xsi:type="string">ui_form_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">id</argument>
<argument name="requestFieldName" xsi:type="string">id</argument>
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="submit_url" xsi:type="url" path="*/*/save" />
</item>
</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="book_information">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="collapsible" xsi:type="boolean">false</item>
<item name="label" xsi:type="string" translate="true">Book Information</item>
<item name="sortOrder" xsi:type="number">10</item>
</item>
</argument>
<field name="status" formElement="checkbox">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Enabled</item>
<item name="prefer" xsi:type="string">toggle</item>
<item name="formElement" xsi:type="string">checkbox</item>
<item name="default" xsi:type="number">1</item>
<item name="dataScope" xsi:type="string">status</item>
</item>
</argument>
<formElements>
<checkbox>
<settings>
<valueMap>
<map name="false" xsi:type="number">0</map>
<map name="true" xsi:type="number">1</map>
</valueMap>
</settings>
</checkbox>
</formElements>
</field>
<field name="field_1">
<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">Field 1</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">field_1</item>
<item name="dataScope" xsi:type="string">field_1</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</field>
<field name="field_2">
<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">Field 2</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">field_2</item>
<item name="dataScope" xsi:type="string">field_2</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</field>
</fieldset>
</form>
Step 4: Create DataProvider.php file
app/code/Vendor/Extension/Model/Grid/DataProvider.php
<?php
namespace Vendor\Extension\Model\Grid;
use Vendor\Extension\Model\ResourceModel\BookInfo\CollectionFactory;
use Magento\Ui\DataProvider\AbstractDataProvider;
class DataProvider extends AbstractDataProvider
{
protected $loadedData;
public function __construct(
$name,
$primaryFieldName,
$requestFieldName,
CollectionFactory $collectionFactory,
array $meta = [],
array $data = []
) {
$this->collection = $collectionFactory->create();
parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
}
public function getData()
{
$items = $this->collection->getItems();
foreach ($items as $model) {
$this->loadedData[$model->getId()] = $model->getData();
}
return $this->loadedData;
}
}
Step 5: Create Generic.php file
app/code/Vendor/Extension/Block/Adminhtml/Button/Generic.php
<?php
namespace Vendor\Extension\Block\Adminhtml\Button;
use Magento\Backend\Block\Widget\Context;
use Magento\Cms\Api\PageRepositoryInterface;
class Generic
{
protected $context;
protected $pageRepository;
public function __construct(
Context $context,
PageRepositoryInterface $pageRepository
) {
$this->context = $context;
$this->pageRepository = $pageRepository;
}
public function getUrl($route = '', $params = [])
{
return $this->context->getUrlBuilder()->getUrl($route, $params);
}
}
Step 6: Create Back.php file
app/code/Vendor/Extension/Block/Adminhtml/Button/Back.php
<?php
namespace Vendor\Extension\Block\Adminhtml\Button;
use Magento\Framework\View\Element\UiComponent\Control\ButtonProviderInterface;
class Back extends Generic implements ButtonProviderInterface
{
public function getButtonData()
{
return [
'label' => __('Back'),
'on_click' => sprintf("location.href = '%s';", $this->getBackUrl()),
'class' => 'back',
'sort_order' => 10,
];
}
public function getBackUrl()
{
return $this->getUrl('*/*/');
}
}
Step 7: Create Reset.php file
app/code/Vendor/Extension/Block/Adminhtml/Button/Reset.php
<?php
namespace Vendor\Extension\Block\Adminhtml\Button;
class Reset extends \Magento\Catalog\Block\Adminhtml\Product\Edit\Button\Generic
{
public function getButtonData()
{
return [
'label' => __('Reset'),
'class' => 'reset',
'on_click' => 'location.reload();',
'sort_order' => 30,
];
}
}
Step 8: Create Delete.php file
app/code/Vendor/Extension/Block/Adminhtml/Button/Delete.php
<?php
namespace Vendor\Extension\Block\Adminhtml\Button;
use Magento\Backend\Block\Widget\Context;
use Magento\Framework\View\Element\UiComponent\Control\ButtonProviderInterface;
class Delete extends Generic implements ButtonProviderInterface
{
protected $context;
public function __construct(
Context $context
) {
$this->context = $context;
}
public function getButtonData()
{
$data = [];
$id = $this->context->getRequest()->getParam('id');
if ($id) {
$data = [
'label' => __('Delete'),
'class' => 'delete',
'on_click' => 'deleteConfirm(\'' . __(
'Are you sure you want to delete this?'
) . '\', \'' . $this->getDeleteUrl() . '\')',
'sort_order' => 20,
];
}
return $data;
}
public function getDeleteUrl()
{
$id = $this->context->getRequest()->getParam('id');
return $this->getUrl('*/*/delete', ['id' => $id]);
}
}
Step 9: Create Save.php file
app/code/Vendor/Extension/Block/Adminhtml/Button/Save.php
<?php
namespace Vendor\Extension\Block\Adminhtml\Button;
use Magento\Framework\View\Element\UiComponent\Control\ButtonProviderInterface;
use Magento\Ui\Component\Control\Container;
class Save extends Generic implements ButtonProviderInterface
{
public function getButtonData()
{
return [
'label' => __('Save'),
'class' => 'save primary',
'data_attribute' => [
'mage-init' => [
'buttonAdapter' => [
'actions' => [
[
'targetName' => 'ui_form.ui_form',
'actionName' => 'save',
'params' => [
false,
],
],
],
],
],
],
'class_name' => Container::SPLIT_BUTTON,
'options' => $this->getOptions(),
];
}
protected function getOptions()
{
$options[] = [
'id_hard' => 'save_and_new',
'label' => __('Save & New'),
'data_attribute' => [
'mage-init' => [
'buttonAdapter' => [
'actions' => [
[
'targetName' => 'ui_form.ui_form',
'actionName' => 'save',
'params' => [
true,
[
'back' => 'add',
],
],
],
],
],
],
],
];
$options[] = [
'id_hard' => 'save_and_close',
'label' => __('Save & Close'),
'data_attribute' => [
'mage-init' => [
'buttonAdapter' => [
'actions' => [
[
'targetName' => 'ui_form.ui_form',
'actionName' => 'save',
'params' => [
true,
[
'back' => 'close',
],
],
],
],
],
],
],
];
return $options;
}
}
Step 10: Create Save.php file
app/code/Vendor/Extension/Controller/Adminhtml/Index/Save.php
<?php
namespace Vendor\Extension\Controller\Adminhtml\Index;
use Vendor\Extension\Model\BookInfoFactory;
use Magento\Backend\App\Action;
use Magento\Backend\App\Action\Context;
use Magento\Framework\Data\Form\FormKey\Validator;
use Magento\Framework\View\Result\PageFactory;
class Save extends Action
{
private $resultPageFactory;
private $BookInfoFactory;
private $formKeyValidator;
public function __construct(
Context $context,
PageFactory $resultPageFactory,
BookInfoFactory $BookInfoFactory,
Validator $formKeyValidator
) {
$this->resultPageFactory = $resultPageFactory;
$this->BookInfoFactory = $BookInfoFactory;
$this->formKeyValidator = $formKeyValidator;
parent::__construct($context);
}
public function execute()
{
$resultPageFactory = $this->resultRedirectFactory->create();
if (!$this->formKeyValidator->validate($this->getRequest())) {
$this->messageManager->addErrorMessage(__("Form key is Invalidate"));
return $resultPageFactory->setPath('*/*/index');
}
$data = $this->getRequest()->getPostValue();
try {
if ($data) {
$model = $this->BookInfoFactory->create();
$model->setData($data)->save();
$this->messageManager->addSuccessMessage(__("Record Saved Successfully."));
$buttondata = $this->getRequest()->getParam('back');
if ($buttondata == 'add') {
return $resultPageFactory->setPath('*/*/form');
}
if ($buttondata == 'close') {
return $resultPageFactory->setPath('*/*/index');
}
$id = $model->getId();
return $resultPageFactory->setPath('*/*/form', ['id' => $id]);
}
} catch (\Exception $e) {
$this->messageManager->addErrorMessage($e, __("We can't submit your request, Please try again."));
}
return $resultPageFactory->setPath('*/*/index');
}
}
Step 11: Finally run the below commands
$ php bin/magento setup:upgrade
$ php bin/magento cache:clean
$ php bin/magento cache:flush
Step 12: Output:
Final Thoughts:
So this was the easiest way which we have told you in this blog. This is how you can Create UI Component Form and perform CRUD operation in Magento 2. Hope you liked the blog.
So quickly go to the comment box and tell me how you like this blog?
Stay tuned with us on our site to get new updates of Magento.
Thanks for reading and visiting our site.
