What are You Looking For?

Dhiren Vasoya
onSeptember 29, 2021
0

How to Create UI Component Grid and Form in Magento 2

How to Create UI Component Grid and Form in Magento 2
8 min read

Hello, Magento Friends!

Today’s subject matter is How to Create UI Component Grid and Form in Magento 2. The UI component grid and form are the most paramount features for admin users. Despite that, there are numerous developers who encounter challenges while creating UI component grids and forms in Magento 2 backend panel.

Magento 2 Grid is a sort of record that arranges the details in your database report and provides you some peculiarities like sorting, filtering, deleting, updating items, and more. 

For this reason, I will be explaining to you to Create Magento 2 UI Component Grid and Form.

Also, take a peek at – How to Filter UI Component Grid Collection in Magento 2

Steps to Create UI Component Grid and Form in Magento 2

Step 1:  Create the db_schema.xml file

app\code\Vendor\Extension\etc\

<?xml version="1.0"?>
<schema xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Setup/Declaration/Schema/etc/schema.xsd">
    <table name="magecomp_customtable" resource="default" engine="innodb" comment="Custom Table">
        <column xsi:type="int" name="id" padding="10" unsigned="true" nullable="false" identity="true" comment="ID"/>
        <column xsi:type="varchar" name="title" nullable="false" length="255" comment="Title"/>
        <column xsi:type="text" name="content" nullable="true" comment=" Content"/>
        <column xsi:type="smallint" name="status" nullable="false" comment="Status"/>
        <column xsi:type="timestamp" name="created_at" nullable="false" on_update="false" default="CURRENT_TIMESTAMP" comment="Created At"/>
        <constraint xsi:type="primary" referenceId="PRIMARY">
            <column name="id"/>
        </constraint>
    </table>
</schema>

Step 2:  Create a routes.xml

app\code\Vendor\Extension\etc\adminhtml\

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/App/etc/routes.xsd">
    <router id="admin">
        <route id="uiexample" frontName="uiexample">
            <module name="Vendor_Extension" before="Magento_Adminhtml" />
        </route>
    </router>
</config>

Step 3:  Create a menu.xml

app\code\Vendor\Extension\etc\adminhtml\

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../Magento/Backend/etc/menu.xsd">
    <menu>
        <add id="Vendor_Extension::view" title="MageComp" module="Vendor_Extension" sortOrder="50" resource="Vendor_Extension::view"/>
        <add id="Vendor_Extension::menu" title="Manage Grid" module="Vendor_Extension" sortOrder="20" parent="Vendor_Extension::view" action="uiexample/index/index" resource="Vendor_Extension::menu"/>
    </menu>
</config>

Step 4: Create a di.xml

app\code\Vendor\Extension\etc\

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd">
    <!-- For Blog -->
    <virtualType name="UiExampleFilterPool" type="Magento\Framework\View\Element\UiComponent\DataProvider\FilterPool">
        <arguments>
            <argument name="appliers" xsi:type="array">
                <item name="regular" xsi:type="object">Magento\Framework\View\Element\UiComponent\DataProvider\RegularFilter</item>
                <item name="fulltext" xsi:type="object">Magento\Framework\View\Element\UiComponent\DataProvider\FulltextFilter</item>
            </argument>
        </arguments>
    </virtualType>
    <virtualType name="UiExampleFilterPool" type="Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider">
        <arguments>
            <argument name="collection" xsi:type="object" shared="false">Vendor\Extension\Model\ResourceModel\Blog\Collection</argument>
            <argument name="filterPool" xsi:type="object" shared="false">UiExampleFilterPool</argument>
        </arguments>
    </virtualType>
    <type name="Vendor\Extension\Model\ResourceModel\Blog\Grid\Collection">
        <arguments>
            <argument name="mainTable" xsi:type="string">magecomp_customtable</argument>
            <argument name="eventPrefix" xsi:type="string">Vendor_Extension_blog_grid_collection</argument>
            <argument name="eventObject" xsi:type="string">blog_grid_collection</argument>
            <argument name="resourceModel" xsi:type="string">Vendor\Extension\Model\ResourceModel\Blog</argument>
        </arguments>
    </type>
    <type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
        <arguments>
            <argument name="collections" xsi:type="array">
                <item name="Vendor_Extension_blog_listing_data_source" xsi:type="string">Vendor\Extension\Model\ResourceModel\Blog\Grid\Collection</item>
            </argument>
        </arguments>
    </type>
</config>

Step 5: Create a Blog.php Model File

app\code\Vendor\Extension\Model\

<?php
namespace Vendor\Extension\Model;
use Magento\Framework\Model\AbstractModel;
use Vendor\Extension\Model\ResourceModel\Blog as BlogResourceModel;
class Blog extends \Magento\Framework\Model\AbstractModel
{
    protected function _construct()
    {
        $this->_init(BlogResourceModel::class);
    }
}

Step 6: We will also need to create a Blog.php ResourceModel file

app\code\Vendor\Extension\Model\ResourceModel\

<?php

namespace Vendor\Extension\Model\ResourceModel;
use Magento\Framework\Model\ResourceModel\Db\AbstractDb;
class Blog extends AbstractDb
{
    /**
    * Initialize resource model
    *
    * @return void
    */
    protected function _construct()
    {
        $this->_init('magecomp_customtable', 'id');
    }
}

Step 7: We will create a Collection.php file 

app\code\Vendor\Extension\Model\ResourceModel\Blog\

<?php
namespace Vendor\Extension\Model\ResourceModel\Blog;
use Magento\Framework\Model\ResourceModel\Db\Collection\AbstractCollection;
use Vendor\Extension\Model\Blog as BlogModel;
use Vendor\Extension\Model\ResourceModel\Blog as BlogResourceModel;
class Collection extends AbstractCollection
{
    protected function _construct()
    {
        $this->_init(BlogModel::class, BlogResourceModel::class);
    }
}

Step 8: Next step is to create a Collection.php file

Vendor\Extension\Model\ResourceModel\Blog\Grid

<?php

namespace Vendor\Extension\Model\ResourceModel\Blog\Grid;
use Magento\Framework\View\Element\UiComponent\DataProvider\Document as BlogModel;
use Vendor\Extension\Model\ResourceModel\Blog\Collection as BlogCollection;
class Collection extends BlogCollection implements \Magento\Framework\Api\Search\SearchResultInterface
{
    protected $aggregations;
    // @codingStandardsIgnoreStart
    public function __construct(
        \Magento\Framework\Data\Collection\EntityFactoryInterface    $entityFactory,
        \Psr\Log\LoggerInterface $logger,
        \Magento\Framework\Data\Collection\Db\FetchStrategyInterface $fetchStrategy,
        \Magento\Framework\Event\ManagerInterface $eventManager,
        $mainTable,
        $eventPrefix,
        $eventObject,
        $resourceModel,
        $model = BlogModel::class,
        $connection = null,
        \Magento\Framework\Model\ResourceModel\Db\AbstractDb $resource = null
    ) {
        parent::__construct($entityFactory, $logger, $fetchStrategy,     $eventManager, $connection, $resource);
        $this->_eventPrefix = $eventPrefix;
        $this->_eventObject = $eventObject;
        $this->_init($model, $resourceModel);
        $this->setMainTable($mainTable);
    }
    // @codingStandardsIgnoreEnd
    public function getAggregations()
    {
        return $this->aggregations;
    }
    public function setAggregations($aggregations)
    {
        $this->aggregations = $aggregations;
    }
    public function getAllIds($limit = null, $offset = null)
    {
        return $this->getConnection()->fetchCol($this->_getAllIdsSelect($limit, $offset), $this->_bindParams);
    }
    public function getSearchCriteria()
    {
        return null;
    }
    public function setSearchCriteria(\Magento\Framework\Api\SearchCriteriaInterface $searchCriteria = null)
    {
        return $this;
    }
    public function getTotalCount()
    {
        return $this->getSize();
    }
    public function setTotalCount($totalCount)
    {
        return $this;
    }
    public function setItems(array $items = null)
    {
        return $this;
    }
}

Step 9: Next step is to create a DataProvider.php file

app\code\Vendor\Extension\Model\

<?php

namespace Vendor\Extension\Model;
use Vendor\Extension\Model\ResourceModel\Blog\CollectionFactory;
class DataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider
{
    /**
    * @var array
    */
    protected $loadedData;
    // @codingStandardsIgnoreStart
    public function __construct(
        $name,
        $primaryFieldName,
        $requestFieldName,
        CollectionFactory $blogCollectionFactory,
        array $meta = [],
        array $data = []
    ) {
        $this->collection = $blogCollectionFactory->create();
        parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
    }
    // @codingStandardsIgnoreEnd
    public function getData()
    {
        if (isset($this->loadedData)) {
            return $this->loadedData;
        }
        $items = $this->collection->getItems();
        foreach ($items as $blog) {
            $this->loadedData[$blog->getId()] = $blog->getData();
        }
        return $this->loadedData;
    }
}

Step 10: After that, we will now create an Index.php file in the Controller

app\code\Vendor\Extension\Controller\Adminhtml\Index\

<?php

namespace Vendor\Extension\Controller\Adminhtml\Index;
class Index extends \Magento\Backend\App\Action
{
    /**
    * @var \Magento\Framework\View\Result\PageFactory
    */
    protected $resultPageFactory;
    /**
    * @param \Magento\Backend\App\Action\Context $context
    * @param \Magento\Framework\View\Result\PageFactory     $resultPageFactory
    */
    public function __construct(
        \Magento\Backend\App\Action\Context $context,
        \Magento\Framework\View\Result\PageFactory $resultPageFactory
    ) {
        parent::__construct($context);
        $this->resultPageFactory = $resultPageFactory;
    }
    /**
    * @return \Magento\Framework\View\Result\PageFactory
    */
    public function execute()
    {
        $resultPage = $this->resultPageFactory->create();
        $resultPage->getConfig()->getTitle()->prepend(__('Manage Grid'));
        return $resultPage;
    }
}

Step 11: Create an Add.php file

app\code\Vendor\Extension\Controller\Adminhtml\Index\

<?php

namespace Vendor\Extension\Controller\Adminhtml\Index;

use Magento\Backend\App\Action;
use Magento\Framework\View\Result\PageFactory;

class Add extends Action
{
    /**
    * @var PageFactory
    */
    protected $resultPageFactory;

    public function __construct(
        Action\Context $context,
        PageFactory $resultPageFactory
    ) {
        parent::__construct($context);
        $this->resultPageFactory = $resultPageFactory;
    }

    /**
    * Execute method
    *
    * @return \Magento\Backend\Model\View\Result\Page
    */
    public function execute()
    {
        $resultPage = $this->resultPageFactory->create();
        $resultPage->getConfig()->getTitle()->prepend(__('Add New Record'));
        return $resultPage;
    }
}

Step 12: Create an Edit.php file

app\code\Vendor\Extension\Controller\Adminhtml\Index\

<?php

namespace Vendor\Extension\Controller\Adminhtml\Index;
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);
        $resultPage->getConfig()->getTitle()->prepend(__('Edit Record'));
        return $resultPage;
    }
}

Step 13: Create a Save.php file

app\code\Vendor\Extension\Controller\Adminhtml\Index\

<?php

namespace Vendor\Extension\Controller\Adminhtml\Index;
use Magento\Backend\App\Action;
use Magento\Backend\Model\Session;
use Vendor\Extension\Model\BlogFactory;
class Save extends \Magento\Backend\App\Action
{
    /*
    * @var Blog
    */
    protected $uiExamplemodel;
    /**
    * @var Session
    */
    protected $adminsession;
    /**
    * @param Action\Context $context
    * @param Blog $uiExamplemodel
    * @param Session $adminsession
    */
    public function __construct(
        Action\Context $context,
        BlogFactory $uiExamplemodel,
        Session $adminsession
    ) {
        parent::__construct($context);
        $this->uiExamplemodel = $uiExamplemodel;
        $this->adminsession = $adminsession;
    }
    /**
    * Save blog record action
    *
    * @return \Magento\Backend\Model\View\Result\Redirect
    */
    public function execute()
    {
        $data = $this->getRequest()->getPostValue();
        $resultRedirect = $this->resultRedirectFactory->create();
        if ($data) {
            $id = $this->getRequest()->getParam('id');
            if ($id) {
                $this->uiExamplemodel->load($id);
            }
            $model = $this->uiExamplemodel->create();
            $model->addData([
                "title" => $data['blog_title'],
                "content" => $data['blog_description'],
                "status" => $data['status'],
            ]);
            $saveData = $model->save();
            try {
                $this->messageManager->addSuccess(__('The data has been saved.'));
                return $resultRedirect->setPath('*/*/');
            }
            catch (\Magento\Framework\Exception\LocalizedException $e)       
            {
               $this->messageManager->addError($e->getMessage());
            } catch (\RuntimeException $e) {
                 $this->messageManager->addError($e->getMessage());
            } catch (\Exception $e) {
                $this->messageManager->addException($e, __('Something went wrong while saving the data.'));
            }
            return $resultRedirect->setPath('*/*/edit', ['id' => $this->getRequest()->getParam('id')]);
        }
        return $resultRedirect->setPath('*/*/');
    }
}

Step 14: Create a uiexample_index_index.xml file

app\code\Vendor\Extension\view\adminhtml\layout\

<?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="Vendor_Extension_blog_listing"/>
        </referenceContainer>
    </body>
</page>

Step 15: Create an uiexample_index_add.xml file

app\code\Vendor\Extension\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="uiexample_form"/>
        </referenceContainer>
    </body>
</page>

Step 16: Create an uiexample_index_edit.xml file

app\code\Vendor\Extension\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="uiexample_form"/>
        </referenceContainer>
    </body>
</page>

Step 17: Create Vendor_Extension_blog_listing.xml file

app\code\Vendor\Extension\view\adminhtml\ui_component\

<?xml version="1.0" encoding="UTF-8"?>
<listing 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">Vendor_Extension_blog_listing.Vendor_Extension_blog_listing_data_source</item>
            <item name="deps" xsi:type="string">Vendor_Extension_blog_listing.Vendor_Extension_blog_listing_data_source</item>
        </item>
        <item name="spinner" xsi:type="string">uiexample_blog_columns</item>
        <item name="buttons" xsi:type="array">
            <item name="add" xsi:type="array">
                <item name="name" xsi:type="string">add</item>
                <item name="label" xsi:type="string" translate="true">Add New</item>
                <item name="class" xsi:type="string">primary</item>
                <item name="url" xsi:type="string">*/*/add</item>
            </item>
        </item>
    </argument>
    <dataSource name="Vendor_Extension_blog_listing_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">UiExampleFilterPool</argument>
            <argument name="name" xsi:type="string">Vendor_Extension_blog_listing_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="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
                    <item name="update_url" xsi:type="url" path="mui/index/render" />
                    <item name="storageConfig" xsi:type="array">
                        <item name="cacheRequests" xsi:type="boolean">false</item>
                    </item>
                </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/grid/provider</item>
            </item>
        </argument>
    </dataSource>
    <container name="listing_top">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="template" xsi:type="string">ui/grid/toolbar</item>
               <item name="stickyTmpl" xsi:type="string">ui/grid/sticky/toolbar</item>
            </item>
        </argument>
        <bookmark name="bookmarks">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="storageConfig" xsi:type="array">
                        <item name="namespace" xsi:type="string">Vendor_Extension_blog_listing</item>
                    </item>
                </item>
            </argument>
        </bookmark>
        <component name="columns_controls">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="columnsData" xsi:type="array">
                        <item name="provider" xsi:type="string">Vendor_Extension_blog_listing.Vendor_Extension_blog_listing.uiexample_blog_columns</item>
                     </item>
                     <item name="component" xsi:type="string">Magento_Ui/js/grid/controls/columns</item>
                     <item name="displayArea" xsi:type="string">dataGridActions</item>
                </item>
            </argument>
        </component>
        <filterSearch name="fulltext">
            <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">
                    <item name="provider" xsi:type="string">Vendor_Extension_blog_listing.Vendor_Extension_blog_listing_data_source</item>
                    <item name="chipsProvider" xsi:type="string">Vendor_Extension_blog_listing.Vendor_Extension_blog_listing.listing_top.listing_filters_chips</item>
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">Vendor_Extension_blog_listing.Vendor_Extension_blog_listing.listing_top.bookmarks</item>
                        <item name="namespace" xsi:type="string">current.search</item>
                    </item>
                </item>
            </argument>
        </filterSearch>
        <filters name="listing_filters">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="columnsProvider" xsi:type="string">Vendor_Extension_blog_listing.Vendor_Extension_blog_listing.uiexample_blog_columns</item>
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">Vendor_Extension_blog_listing.Vendor_Extension_blog_listing.listing_top.bookmarks</item>
                        <item name="namespace" xsi:type="string">current.filters</item>
                    </item>
                    <item name="templates" xsi:type="array">
                        <item name="filters" xsi:type="array">
                            <item name="select" xsi:type="array">
                               <item name="component" xsi:type="string">Magento_Ui/js/form/element/ui-select</item>
                                <item name="template" xsi:type="string">ui/grid/filters/elements/ui-select</item>
                             </item>
                            </item>
                        </item>
                       <item name="childDefaults" xsi:type="array">
                           <item name="provider" xsi:type="string">Vendor_Extension_blog_listing.Vendor_Extension_blog_listing.listing_top.listing_filters</item>
                            <item name="imports" xsi:type="array">
                        <item name="visible" xsi:type="string">Vendor_Extension_blog_listing.Vendor_Extension_blog_listing.uiexample_blog_columns.${ $.index }:visible</item>
                   </item>
                </item>
            </item>
            <item name="observers" xsi:type="array">
                <item name="column" xsi:type="string">column</item>
            </item>
        </argument>
        <filterSelect name="store_id">
            <argument name="optionsProvider" xsi:type="configurableObject">
                <argument name="class" xsi:type="string">Magento\Cms\Ui\Component\Listing\Column\Cms\Options</argument>
            </argument>
        </filterSelect>
    </filters>
    <massaction name="listing_massaction">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="selectProvider" xsi:type="string">Vendor_Extension_blog_listing.Vendor_Extension_blog_listing.uiexample_blog_columns.ids</item>
                <item name="component" xsi:type="string">Magento_Ui/js/grid/tree-massactions</item>
                <item name="indexField" xsi:type="string">id</item>
            </item>
        </argument>
    </massaction>
    <paging name="listing_paging">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="storageConfig" xsi:type="array">
                    <item name="provider" xsi:type="string">Vendor_Extension_blog_listing.Vendor_Extension_blog_listing.listing_top.bookmarks</item>
                    <item name="namespace" xsi:type="string">current.paging</item>
                </item>
                <item name="selectProvider" xsi:type="string">Vendor_Extension_blog_listing.Vendor_Extension_blog_listing.uiexample_blog_columns.ids</item>
            </item>
        </argument>
      </paging>
    </container>
    <columns name="uiexample_blog_columns">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="storageConfig" xsi:type="array">
                    <item name="provider" xsi:type="string">Vendor_Extension_blog_listing.Vendor_Extension_blog_listing.listing_top.bookmarks</item>
                    <item name="namespace" xsi:type="string">current</item>
                 </item>
                 <item name="childDefaults" xsi:type="array">
                    <item name="fieldAction" xsi:type="array">
                        <item name="provider" xsi:type="string">Vendor_Extension_blog_listing.Vendor_Extension_blog_listing.uiexample_blog_columns</item>
                        <item name="target" xsi:type="string">startEdit</item>
                        <item name="params" xsi:type="array">
                            <item name="0" xsi:type="string">${ $.$data.rowIndex }</item>
                           <item name="1" xsi:type="boolean">true</item>
                        </item>
                    </item>
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">Vendor_Extension_blog_listing.Vendor_Extension_blog_listing.listing_top.bookmarks</item>
                        <item name="root" xsi:type="string">columns.${ $.index }</item>
                        <item name="namespace" xsi:type="string">current.${ $.storageConfig.root}</item>
                    </item>
                </item>
            </item>
        </argument>
        <selectionsColumn name="ids">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="resizeEnabled" xsi:type="boolean">false</item>
                    <item name="resizeDefaultWidth" xsi:type="string">55</item>
                    <item name="indexField" xsi:type="string">id</item>
                </item>
                <item name="sortOrder" xsi:type="number">0</item>
            </argument>
        </selectionsColumn>
        <column name="id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">textRange</item>
                    <item name="sorting" xsi:type="string">asc</item>
                    <item name="label" xsi:type="string" translate="true">Id</item>
                    <item name="sortOrder" xsi:type="number">20</item>
                </item>
            </argument>
        </column>
        <column name="title">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Blog Title</item>
                    <item name="sortOrder" xsi:type="number">30</item>
                </item>
            </argument>
        </column>
        <column name="content">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Blog Description</item>
                    <item name="sortOrder" xsi:type="number">30</item>
                </item>
            </argument>
        </column>
        <column name="status">
            <argument name="data" xsi:type="array">
                <item name="options" xsi:type="array">
                    <item name="0" xsi:type="array">
                        <item name="label" xsi:type="string">Active</item>
                       <item name="value" xsi:type="string">1</item>
                   </item>
                   <item name="1" xsi:type="array">
                     <item name="label" xsi:type="string">Inactive</item>
                    <item name="value" xsi:type="string">0</item>
                </item>
             </item>
            <item name="config" xsi:type="array">
                <item name="editor" xsi:type="string">select</item>
                <item name="filter" xsi:type="string">select</item>
                <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
                <item name="dataType" xsi:type="string">select</item>
                <item name="label" xsi:type="string" translate="true">Status</item>
            </item>
        </argument>
     </column>

  </columns>
</listing>

Step 18: We will create a uiexample_form.xml UI grid file

app\code\Vendor\Extension\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">uiexample_form.uiexample_form_data_source</item>
            <item name="deps"             xsi:type="string">uiexample_form.uiexample_form_data_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">General Information</item>
        <item name="config" xsi:type="array">
            <item name="dataScope" xsi:type="string">data</item>
            <item name="namespace" xsi:type="string">uiexample_form</item>
        </item>
        <item name="spinner" xsi:type="string">general_information</item>
        <item name="buttons" xsi:type="array">
            <item name="back" xsi:type="string">Vendor\Extension\Block\Adminhtml\Index\Edit\Button\Back</item>
            <item name="reset" xsi:type="string">Vendor\Extension\Block\Adminhtml\Index\Edit\Button\Reset</item>
            <item name="save" xsi:type="string">Vendor\Extension\Block\Adminhtml\Index\Edit\Button\Save</item>
        </item>
        <item name="template" xsi:type="string">templates/form/collapsible</item>
    </argument>
    <dataSource name="uiexample_form_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Vendor\Extension\Model\DataProvider</argument>
            <argument name="name" xsi:type="string">uiexample_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="general_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">General Information</item>
                <item name="sortOrder" xsi:type="number">20</item>
            </item>
        </argument>
        <field name="status">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="sortOrder" xsi:type="number">10</item>
                    <item name="dataType"  xsi:type="string">boolean</item>
                    <item name="formElement" xsi:type="string">checkbox</item>
                    <item name="prefer" xsi:type="string">toggle</item>
                    <item name="label" xsi:type="string" translate="true">Default Value</item>
                    <item name="valueMap" xsi:type="array">
                        <item name="true" xsi:type="number">1</item>
                        <item name="false" xsi:type="number">0</item>
                    </item>
                <item name="valuesForOptions" xsi:type="array">
                    <item name="boolean" xsi:type="string">boolean</item>
                </item>
                <item name="default" xsi:type="number">1</item>
                <item name="dataScope" xsi:type="string">status</item>
             </item>
        </argument>
    </field>
    <field name="blog_title">
        <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">Blog Title</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="source" xsi:type="string">blog_title</item>
                <item name="dataScope" xsi:type="string">blog_title</item>
            </item>
        </argument>
    </field>
    <field name="blog_description">
        <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">Blog Description</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="source" xsi:type="string">blog_description</item>
                <item name="dataScope" xsi:type="string">blog_description</item>
            </item>
        </argument>
    </field>
  </fieldset>
</form>

Step 19: Create Back.php file

Vendor\Extension\Block\Adminhtml\Index\Edit\Button

<?php

namespace Vendor\Extension\Block\Adminhtml\Index\Edit\Button;
use Magento\Framework\View\Element\UiComponent\Control\ButtonProviderInterface;
class Back extends Generic implements ButtonProviderInterface
{
    /**
    * Get button data
    *
    * @return array
    */
    public function getButtonData()
    {
        return [
'label' => __('Back'),
'on_click' => sprintf("location.href = '%s';", $this->getBackUrl()),
'class' => 'back',
'sort_order' => 10,
        ];
    }
    /**
    * Get URL for back (reset) button
    *
    * @return string
    */
    public function getBackUrl()
    {
        return $this->getUrl('*/*/');
    }
}

Step 20: Create the Generic.php file

Vendor\Extension\Block\Adminhtml\Index\Edit\Button

<?php

namespace Vendor\Extension\Block\Adminhtml\Index\Edit\Button;
use Magento\Backend\Block\Widget\Context;
/**
* Class Generic
*/
class Generic
{
    /**
    * @var Context
    */
    protected $context;
    /**
    * @param Context $context
    */
    public function __construct(
        Context $context
    ) {
        $this->context = $context;
    }
    /**
    * Generate url by route and parameters
    *
    * @param string $route
    * @param array $params
    * @return string
    */
    public function getUrl($route = '', $params = [])
    {
        return $this->context->getUrlBuilder()->getUrl($route, $params);
    }
}

Step 21: Create a Reset.php file

Vendor\Extension\Block\Adminhtml\Index\Edit\Button

<?php

namespace Vendor\Extension\Block\Adminhtml\Index\Edit\Button;
use Magento\Framework\View\Element\UiComponent\Control\ButtonProviderInterface;
class Reset implements ButtonProviderInterface
{
    /**
    * Get button data
    *
    * @return array
    */
    public function getButtonData()
    {
        return [
            'label' => __('Reset'),
            'class' => 'reset',
            'on_click' => 'location.reload();',
            'sort_order' => 30,
        ];
    }
}

Step 22: Create a Save.php file

Vendor\Extension\Block\Adminhtml\Index\Edit\Button

<?php

namespace Vendor\Extension\Block\Adminhtml\Index\Edit\Button;
use Magento\Framework\View\Element\UiComponent\Control\ButtonProviderInterface;
use Magento\Ui\Component\Control\Container;
class Save extends Generic implements ButtonProviderInterface
{
    /**
    * Get button data
    *
    * @return array
    */
    public function getButtonData()
    {
        return [
            'label' => __('Save'),
            'class' => 'save primary',
            'data_attribute' => [
                'mage-init' => [
                    'buttonAdapter' => [
                        'actions' => [
                            [
                                'targetName' => 'uiexample_form.uiexample_form',
                                'actionName' => 'save',
                                'params' => [false],
                             ],
                         ],
                     ],
                 ],
             ],
         ];
     }
}

Bottom Line

Calling it a day!

In this manner, you can Create UI Component Grid and Form in Magento 2. We anticipate this blog was a beneficial one for you. If you face troubles while executing the code, go ahead and mention them in the comments section below.

Happy Coding!

FAQ

What is a UI component in Magento 2?

A UI component in Magento 2 is an XML-driven structure used to build dynamic user interfaces in the admin panel, such as forms, grids, and listings. It provides better flexibility and reusability.

What is the difference between UI Grid and Form in Magento 2?
  • A UI Grid is used to display tabular data in the admin panel.
  • A UI Form is used to add or edit data records within Magento 2’s admin.
Dhiren Vasoya
onSeptember 29, 2021
Share
Previous Article

How to Start Dropshipping With Shopify (The Definitive Guide)

Next Article

Guide to Implement Autocomplete Address Field in Magento 2

Write a Comment
  2. raoul guillermo
    on June 23, 2023

    I get the following error ::

    Argument #2 ($componentData) must be of type array, null given, called in /var/www/html/vendor/magento/framework/View/Element/UiComponentFactory.php on line 221

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

Read Next

Get Connect With Us

Subscribe to our email newsletter to get the latest posts delivered right to your email.
Pure inspiration, zero spam ✨