How To Create UI Form And UI Grid In Magento 2

Today, we will teach you how to create UI Form and UI Grid in Magento 2. First of all, we will explain to you UI Form and then UI Grid. In the previous blog, we saw how to perform CRUD operations with the custom module in Magento 2. The UI Component is designed to have a simple and scalable user interface.

It makes it possible to link visual UI components to the associated user data process. For admin in Magento 2 UI components are the most important element. The Form component is a group of fields divided into tabs and fieldsets. The Listing UI Grid component is implements grids, lists, and tiles with filtering, pagination, sorting and lots of other features.

We need to create a contact form with the Name, Email, Phone No, Message, and table name is dolphin_mymodule_contact. So first of all create InstallSchema/UpgradeSchema and Model, Resource Model for this dolphin_mymodule_contact table.

UI Form for Magento 2

We explain to you step by step process to create UI component form in Magento 2.
Step 1: You have to create a router for the admin controller, so create a routes.xml file in app/code/Dolphin/MyModule/etc/adminhtml folder.

<?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="mymodule" frontName="mymodule">
            <module name="Dolphin_MyModule"/>
        </route>
    </router>
</config>

<?xml version="1.0"?>

</route>

</router>

</config>

Step 2: Create a controller file Edit.php in app/code/Dolphin/MyModule/Controller/Adminhtml/Contact folder.

<?php

namespace Dolphin\MyModule\Controller\Adminhtml\Contact;

class Edit extends \Magento\Backend\App\Action
{
    protected $resultPageFactory;

    public function __construct(
        \Magento\Backend\App\Action\Context $context,
        \Magento\Framework\View\Result\PageFactory $resultPageFactory
    ) {
        parent::__construct($context);
        $this->resultPageFactory = $resultPageFactory;
    }

    public function execute()
    {
        $resultPage = $this->resultPageFactory->create();
        $resultPage->getConfig()->getTitle()->prepend(__('Edit Contacts'));
        return $resultPage;
    }
}

<?php

namespace Dolphin\MyModule\Controller\Adminhtml\Contact;

class Edit extends \Magento\Backend\App\Action

{

protected $resultPageFactory;

public function __construct(

\Magento\Backend\App\Action\Context $context,

\Magento\Framework\View\Result\PageFactory $resultPageFactory

) {

parent::__construct($context);

$this->resultPageFactory = $resultPageFactory;

}

public function execute()

{

$resultPage = $this->resultPageFactory->create();

$resultPage->getConfig()->getTitle()->prepend(__('Edit Contacts'));

return $resultPage;

}

Step 3: Create a layout file mymodule_contact_edit.xml in app/code/Dolphin/MyModule/view/adminhtml/layout folder.

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

<?xml version="1.0"?>

<body>

</referenceContainer>

</body>

</page>

Step 4: Create UI form file contact_form.xml in app/code/Dolphin/MyModule/view/adminhtml/ui_component folder.

<?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">contact_form.contact_form_data_source</item>
            <item name="deps" xsi:type="string">contact_form.contact_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">contact_form</item>
        </item>
        <item name="spinner" xsi:type="string">general_information</item>
        <item name="template" xsi:type="string">templates/form/collapsible</item>
    </argument>
    <dataSource name="contact_form_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Dolphin\MyModule\Model\DataProvider</argument>
            <argument name="name" xsi:type="string">contact_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="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">10</item>
            </item>
        </argument>
        <field name="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">Name</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">name</item>
                    <item name="dataScope" xsi:type="string">name</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>
        <field name="email">
            <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">Email</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">email</item>
                    <item name="dataScope" xsi:type="string">email</item>
                </item>
            </argument>
        </field>
        <field name="phone_no">
            <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">Phone Number</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">phone_no</item>
                    <item name="dataScope" xsi:type="string">phone_no</item>
                </item>
            </argument>
        </field>
        <field name="message">
            <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">Message</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">message</item>
                    <item name="dataScope" xsi:type="string">message</item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

<?xml version="1.0" encoding="UTF-8"?>

<item name="provider" xsi:type="string">contact_form.contact_form_data_source</item>

<item name="deps" xsi:type="string">contact_form.contact_form_data_source</item>

</item>

<item name="label" xsi:type="string" translate="true">General Information</item>

<item name="namespace" xsi:type="string">contact_form</item>

</item>

<item name="spinner" xsi:type="string">general_information</item>

<item name="template" xsi:type="string">templates/form/collapsible</item>

</argument>

<argument name="class" xsi:type="string">Dolphin\MyModule\Model\DataProvider</argument>

<argument name="name" xsi:type="string">contact_form_data_source</argument>

</argument>

<item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>

</item>

</argument>

</dataSource>

<item name="collapsible" xsi:type="boolean">false</item>

<item name="label" xsi:type="string" translate="true">General Information</item>

</item>

</argument>

<item name="formElement" xsi:type="string">input</item>

</item>

</argument>

</field>

<item name="label" xsi:type="string" translate="true">Email</item>

<item name="formElement" xsi:type="string">input</item>

<item name="source" xsi:type="string">email</item>

<item name="dataScope" xsi:type="string">email</item>

</item>

</argument>

</field>

<item name="label" xsi:type="string" translate="true">Phone Number</item>

<item name="formElement" xsi:type="string">input</item>

<item name="source" xsi:type="string">phone_no</item>

<item name="dataScope" xsi:type="string">phone_no</item>

</item>

</argument>

</field>

<item name="label" xsi:type="string" translate="true">Message</item>

<item name="formElement" xsi:type="string">input</item>

<item name="source" xsi:type="string">message</item>

<item name="dataScope" xsi:type="string">message</item>

</item>

</argument>

</field>

</fieldset>

</form>

If you need to add button in UI form then you can see the tutorial on how to add Buttons into Ui Component Form Magento 2.
Step 5: Create DataProvider.php file in app/code/Dolphin/MyModule/Model folder.

<?php

namespace Dolphin\MyModule\Model;

use Dolphin\MyModule\Model\ResourceModel\Contact\CollectionFactory;

class DataProvider extends \Magento\Ui\DataProvider\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()
    {
        if (isset($this->loadedData)) {
            return $this->loadedData;
        }
        $items = $this->collection->getItems();
        foreach ($items as $item) {
            $this->loadedData[$item->getId()] = $item->getData();
        }
        return $this->loadedData;
    }
}

<?php

namespace Dolphin\MyModule\Model;

use Dolphin\MyModule\Model\ResourceModel\Contact\CollectionFactory;

class DataProvider extends \Magento\Ui\DataProvider\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()

{

if (isset($this->loadedData)) {

return $this->loadedData;

}

$items = $this->collection->getItems();

foreach ($items as $item) {

$this->loadedData[$item->getId()] = $item->getData();

}

return $this->loadedData;

}

If you want to display values in this form from to database then you need to create ResourceModel and apply code in getData() function in DataProvider.php file. It’s already mentioned a code in this file.

UI Grid for Magento 2

Let’s start with the UI Grid.
Step 1: Create a controller file Index.php in app/code/Dolphin/MyModule/Controller/Adminhtml/Contact folder.

<?php

namespace Dolphin\MyModule\Controller\Adminhtml\Contact;

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

class Index extends \Magento\Backend\App\Action
{
    const ADMIN_RESOURCE = 'Dolphin_MyModule::Contact';

    protected $resultPageFactory;

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

    public function execute()
    {
        $resultPage = $this->resultPageFactory->create();
        $resultPage->setActiveMenu('Dolphin_MyModule::Contact');
        $resultPage->addBreadcrumb(__('Contact Data'), __('Contact Data'));
        $resultPage->addBreadcrumb(__('Contact Data'), __('Contact Data'));
        $resultPage->getConfig()->getTitle()->prepend(__('Contact Data'));

        return $resultPage;
    }
}

<?php

namespace Dolphin\MyModule\Controller\Adminhtml\Contact;

use Magento\Backend\App\Action\Context;

use Magento\Framework\View\Result\PageFactory;

class Index extends \Magento\Backend\App\Action

{

const ADMIN_RESOURCE = 'Dolphin_MyModule::Contact';

protected $resultPageFactory;

public function __construct(

\Magento\Framework\App\Action\Context $context,

\Magento\Framework\View\Result\PageFactory $resultPageFactory

){

parent::__construct($context);

$this->resultPageFactory = $resultPageFactory;

}

public function execute()

{

$resultPage = $this->resultPageFactory->create();

$resultPage->setActiveMenu('Dolphin_MyModule::Contact');

$resultPage->addBreadcrumb(__('Contact Data'), __('Contact Data'));

$resultPage->getConfig()->getTitle()->prepend(__('Contact Data'));

return $resultPage;

}

Step 2: Create a layout file mymodule_contact_index.xml in app/code/Dolphin/MyModule/view/adminhtml/layout folder.

<?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">
    <body>
        <referenceContainer name="content">
            <uiComponent name="contact_listing"/>
        </referenceContainer>
    </body>
</page>

<?xml version="1.0"?>

<body>

</referenceContainer>

</body>

</page>

Step 3: Create a grid listing file contact_listing.xml in app/code/Dolphin/MyModule/view/adminhtml/ui_component folder.

<?xml version="1.0"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn: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">contact_listing.contact_listing_data_source</item>
            <item name="deps" xsi:type="string">contact_listing.contact_listing_data_source</item>
        </item>
        <item name="spinner" xsi:type="string">contact_listing_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">*/*/new</item>
            </item>
        </item>
    </argument>
    <dataSource name="contact_listing_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider</argument>
            <argument name="name" xsi:type="string">contact_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="update_url" xsi:type="url" path="mui/index/render"/>
                </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>
        </argument>
        <bookmark name="bookmarks">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/controls/bookmarks/bookmarks</item>
                    <item name="displayArea" xsi:type="string">dataGridActions</item>
                    <item name="storageConfig" xsi:type="array">
                        <item name="saveUrl" xsi:type="url" path="mui/bookmark/save"/>
                        <item name="deleteUrl" xsi:type="url" path="mui/bookmark/delete"/>
                        <item name="namespace" xsi:type="string">contact_listing</item>
                    </item>
                </item>
            </argument>
        </bookmark>
        <container 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">contact_listing.contact_listing.contact_listing_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>
        </container>
        <filters name="listing_filters">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="displayArea" xsi:type="string">dataGridFilters</item>
                    <item name="dataScope" xsi:type="string">filters</item>
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">contact_listing.contact_listing.listing_top.bookmarks</item>
                        <item name="namespace" xsi:type="string">current.filters</item>
                    </item>
                    <item name="childDefaults" xsi:type="array">
                        <item name="provider" xsi:type="string">contact_listing.contact_listing.listing_top.listing_filters</item>
                        <item name="imports" xsi:type="array">
                            <item name="visible" xsi:type="string">contact_listing.contact_listing.listing_top.bookmarks:current.columns.${ $.index }.visible</item>
                        </item>
                    </item>
                </item>
            </argument>
            <filterRange name="id">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="dataScope" xsi:type="string">id</item>
                        <item name="label" xsi:type="string" translate="true">ID</item>
                        <item name="childDefaults" xsi:type="array">
                            <item name="provider" xsi:type="string">contact_listing.contact_listing.listing_top.listing_filters</item>
                        </item>
                    </item>
                </argument>
                <filterInput name="from">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="dataScope" xsi:type="string">from</item>
                            <item name="label" xsi:type="string" translate="true">from</item>
                            <item name="placeholder" xsi:type="string" translate="true">From</item>
                        </item>
                    </argument>
                </filterInput>
                <filterInput name="to">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="dataScope" xsi:type="string">to</item>
                            <item name="label" xsi:type="string" translate="true">to</item>
                            <item name="placeholder" xsi:type="string" translate="true">To</item>
                        </item>
                    </argument>
                </filterInput>
            </filterRange>
            <filterInput name="name">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="dataScope" xsi:type="string">name</item>
                        <item name="label" xsi:type="string" translate="true">Name</item>
                    </item>
                </argument>
            </filterInput>
            <filterInput name="status">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="dataScope" xsi:type="string">status</item>
                        <item name="label" xsi:type="string" translate="true">Status</item>
                    </item>
                </argument>
            </filterInput>
        </filters>
         <massaction name="listing_massaction">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="selectProvider" xsi:type="string">contact_listing.contact_listing.contact_listing_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>
            <action name="delete">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="type" xsi:type="string">delete</item>
                        <item name="label" xsi:type="string" translate="true">delete</item>
                        <item name="url" xsi:type="url" path="mymodule/contact/massDelete"/>
                    </item>
                </argument>
            </action>
            <action name="status">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="type" xsi:type="string">status</item>
                        <item name="label" xsi:type="string" translate="true">Change status</item>
                    </item>
                </argument>
                <argument name="actions" xsi:type="array">
                    <item name="0" xsi:type="array">
                        <item name="type" xsi:type="string">enable</item>
                        <item name="label" xsi:type="string" translate="true">Enable</item>
                        <item name="url" xsi:type="url" path="mymodule/contact/massStatus">
                            <param name="status">1</param>
                        </item>
                    </item>
                    <item name="1" xsi:type="array">
                        <item name="type" xsi:type="string">disable</item>
                        <item name="label" xsi:type="string" translate="true">Disable</item>
                        <item name="url" xsi:type="url" path="mymodule/contact/massStatus">
                            <param name="status">0</param>
                        </item>
                    </item>
                </argument>
            </action>
        </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">contact_listing.contact_listing.listing_top.bookmarks</item>
                        <item name="namespace" xsi:type="string">current.paging</item>
                    </item>
                    <item name="selectProvider" xsi:type="string">contact_listing.contact_listing.contact_listing_columns.ids</item>
                    <item name="displayArea" xsi:type="string">bottom</item>
                </item>
            </argument>
        </paging>
    </container>
    <columns name="contact_listing_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">contact_listing.contact_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">contact_listing.contact_listing.contact_listing_columns.actions</item>
                        <item name="target" xsi:type="string">applyAction</item>
                        <item name="params" xsi:type="array">
                            <item name="0" xsi:type="string">edit</item>
                            <item name="1" xsi:type="string">${ $.$data.rowIndex }</item>
                        </item>
                    </item>
                    <item name="storageConfig" xsi:type="array">
                        <item name="provider" xsi:type="string">contact_listing.contact_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="indexField" xsi:type="string">id</item>
                    <item name="sortOrder" xsi:type="number">0</item>
                </item>
            </argument>
        </selectionsColumn>
        <column name="id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Id</item>
                    <item name="sortOrder" xsi:type="number">10</item>
                </item>
            </argument>
        </column>
        <column name="name">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Name</item>
                    <item name="sortOrder" xsi:type="number">20</item>
                </item>
            </argument>
        </column>
         <column name="email">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Email</item>
                    <item name="sortOrder" xsi:type="number">30</item>
                </item>
            </argument>
        </column>
         <column name="message">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Message</item>
                    <item name="sortOrder" xsi:type="number">40</item>
                </item>
            </argument>
        </column>
        <column name="status">
            <argument name="data" xsi:type="array">
                <item name="options" xsi:type="object">Dolphin\MyModule\Model\Contact\Source\Status</item>
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">select</item>
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
                    <item name="editor" xsi:type="string">select</item>
                    <item name="dataType" xsi:type="string">select</item>
                    <item name="label" xsi:type="string" translate="true">Status</item>
                    <item name="sortOrder" xsi:type="number">50</item>
                </item>
            </argument>
        </column>
         <actionsColumn name="actions" class="Dolphin\MyModule\Ui\Component\Listing\Column\ContactActions">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="indexField" xsi:type="string">id</item>
                    <item name="sortOrder" xsi:type="number">200</item>
                </item>
            </argument>
        </actionsColumn>
    </columns>
</listing>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

<?xml version="1.0"?>

<item name="provider" xsi:type="string">contact_listing.contact_listing_data_source</item>

<item name="deps" xsi:type="string">contact_listing.contact_listing_data_source</item>

</item>

<item name="spinner" xsi:type="string">contact_listing_columns</item>

<item name="class" xsi:type="string">primary</item>

</item>

</argument>

<argument name="class" xsi:type="string">Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider</argument>

<argument name="name" xsi:type="string">contact_listing_data_source</argument>

</item>

</argument>

<item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>

</item>

</argument>

</dataSource>

<item name="template" xsi:type="string">ui/grid/toolbar</item>

</item>

</argument>

<item name="component" xsi:type="string">Magento_Ui/js/grid/controls/bookmarks/bookmarks</item>

<item name="displayArea" xsi:type="string">dataGridActions</item>

<item name="namespace" xsi:type="string">contact_listing</item>

</item>

</argument>

</bookmark>

<item name="provider" xsi:type="string">contact_listing.contact_listing.contact_listing_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>

</container>

<item name="displayArea" xsi:type="string">dataGridFilters</item>

<item name="dataScope" xsi:type="string">filters</item>

<item name="provider" xsi:type="string">contact_listing.contact_listing.listing_top.bookmarks</item>

<item name="namespace" xsi:type="string">current.filters</item>

</item>

<item name="provider" xsi:type="string">contact_listing.contact_listing.listing_top.listing_filters</item>

<item name="visible" xsi:type="string">contact_listing.contact_listing.listing_top.bookmarks:current.columns.${ $.index }.visible</item>

</item>

</argument>

<item name="provider" xsi:type="string">contact_listing.contact_listing.listing_top.listing_filters</item>

</item>

</argument>

</item>

</argument>

</filterInput>

</item>

</argument>

</filterInput>

</filterRange>

</item>

</argument>

</filterInput>

<item name="dataScope" xsi:type="string">status</item>

<item name="label" xsi:type="string" translate="true">Status</item>

</item>

</argument>

</filterInput>

</filters>

<item name="selectProvider" xsi:type="string">contact_listing.contact_listing.contact_listing_columns.ids</item>

<item name="component" xsi:type="string">Magento_Ui/js/grid/tree-massactions</item>

</item>

</argument>

<item name="type" xsi:type="string">delete</item>

<item name="label" xsi:type="string" translate="true">delete</item>

</item>

</argument>

</action>

<item name="type" xsi:type="string">status</item>

<item name="label" xsi:type="string" translate="true">Change status</item>

</item>

</argument>

<item name="type" xsi:type="string">enable</item>

<item name="label" xsi:type="string" translate="true">Enable</item>

</item>

<item name="type" xsi:type="string">disable</item>

<item name="label" xsi:type="string" translate="true">Disable</item>

</item>

</argument>

</action>

</massaction>

<item name="provider" xsi:type="string">contact_listing.contact_listing.listing_top.bookmarks</item>

<item name="namespace" xsi:type="string">current.paging</item>

</item>

<item name="selectProvider" xsi:type="string">contact_listing.contact_listing.contact_listing_columns.ids</item>

<item name="displayArea" xsi:type="string">bottom</item>

</item>

</argument>

</paging>

</container>

<item name="provider" xsi:type="string">contact_listing.contact_listing.listing_top.bookmarks</item>

<item name="namespace" xsi:type="string">current</item>

</item>

<item name="provider" xsi:type="string">contact_listing.contact_listing.contact_listing_columns.actions</item>

<item name="target" xsi:type="string">applyAction</item>

<item name="1" xsi:type="string">${ $.$data.rowIndex }</item>

</item>

<item name="provider" xsi:type="string">contact_listing.contact_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>

</argument>

</item>

</argument>

</selectionsColumn>

<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>

</item>

</argument>

</column>

<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>

</item>

</argument>

</column>

<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>

<item name="label" xsi:type="string" translate="true">Email</item>

</item>

</argument>

</column>

<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>

<item name="label" xsi:type="string" translate="true">Message</item>

</item>

</argument>

</column>

<item name="options" xsi:type="object">Dolphin\MyModule\Model\Contact\Source\Status</item>

<item name="filter" xsi:type="string">select</item>

<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>

<item name="editor" xsi:type="string">select</item>

<item name="dataType" xsi:type="string">select</item>

<item name="label" xsi:type="string" translate="true">Status</item>

</item>

</argument>

</column>

</item>

</argument>

</actionsColumn>

</columns>

</listing>

Step 4: Create a grid listing file di.xml in app/code/Dolphin/MyModule/etc folder.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <virtualType name="Dolphin\MyModule\Model\ResourceModel\Contact\Grid\Collection">
        <arguments>
            <argument name="mainTable" xsi:type="string">dolphin_mymodule_contact</argument>
            <argument name="resourceModel" xsi:type="string">Dolphin\MyModule\Model\ResourceModel\Contact</argument>
        </arguments>
    </virtualType>
    <type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
        <arguments>
            <argument name="collections" xsi:type="array">
                <item name="entity_listing_data_source1" xsi:type="string">Dolphin\MyModule\Model\ResourceModel\Contact\Grid\Collection</item>
            </argument>
        </arguments>
    </type>
</config>

<?xml version="1.0"?>

<argument name="mainTable" xsi:type="string">dolphin_mymodule_contact</argument>

<argument name="resourceModel" xsi:type="string">Dolphin\MyModule\Model\ResourceModel\Contact</argument>

</arguments>

</virtualType>

<item name="entity_listing_data_source1" xsi:type="string">Dolphin\MyModule\Model\ResourceModel\Contact\Grid\Collection</item>

</argument>

</arguments>

</type>

</config>

Step 5: Now, we need to create Status.php file in app/code/Dolphin/MyModule/Model/Contact/Source folder.

<?php

namespace Dolphin\MyModule\Model\Contact\Source;

class Status implements \Magento\Framework\Data\OptionSourceInterface
{
    protected $contact;

    public function __construct(
        \Dolphin\MyModule\Model\Contact $contact
    ){
        $this->contact = $contact;
    }

    public function toOptionArray()
    {
        $options[] = ['label' => '', 'value' => ''];
        $availableOptions = $this->getOptionArray();
        foreach ($availableOptions as $key => $value) {
            $options[] = [
                'label' => $value,
                'value' => $key,
            ];
        }
        return $options;
    }

    public static function getOptionArray()
    {
        return [
            1 => __('Enabled'),
            0 => __('Disabled')
        ];
    }
}

<?php

namespace Dolphin\MyModule\Model\Contact\Source;

class Status implements \Magento\Framework\Data\OptionSourceInterface

{

protected $contact;

public function __construct(

\Dolphin\MyModule\Model\Contact $contact

){

$this->contact = $contact;

}

public function toOptionArray()

{

$options[] = ['label' => '', 'value' => ''];

$availableOptions = $this->getOptionArray();

foreach ($availableOptions as $key => $value) {

$options[] = [

'label' => $value,

'value' => $key,

];

}

return $options;

}

public static function getOptionArray()

{

return [

1 => __('Enabled'),

0 => __('Disabled')

];

}

Step 6: Create ContactActions.php file in app/code/Dolphin/MyModule/Ui/Component/Listing/Column folder.

<?php
namespace Dolphin\MyModule\Ui\Component\Listing\Column;

use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Ui\Component\Listing\Columns\Column;
use Magento\Framework\UrlInterface;

class ContactActions extends Column
{
    const CONTACT_URL_PATH_EDIT = 'mymodule/contact/edit';
    const CONTACT_URL_PATH_DELETE = 'mymodule/contact/delete';

    protected $urlBuilder;

    private $editUrl;

    public function __construct(
        ContextInterface $context,
        UiComponentFactory $uiComponentFactory,
        UrlInterface $urlBuilder,
        array $components = [],
        array $data = [],
        $editUrl = self::CONTACT_URL_PATH_EDIT
    ) {
        $this->urlBuilder = $urlBuilder;
        $this->editUrl = $editUrl;
        parent::__construct($context, $uiComponentFactory, $components, $data);
    }

    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items'])) {
            foreach ($dataSource['data']['items'] as & $item) {
                $name = $this->getData('name');
                if (isset($item['id'])) {
                    $item[$name]['edit'] = [
                        'href' => $this->urlBuilder->getUrl($this->editUrl, ['id' => $item['id']]),
                        'label' => __('Edit')
                    ];
                    $item[$name]['delete'] = [
                        'href' => $this->urlBuilder->getUrl(self::CONTACT_URL_PATH_DELETE, ['id' => $item['id']]),
                        'label' => __('Delete'),
                        'confirm' => [
                            'title' => __('Delete "${ $.$data.name }"'),
                            'message' => __('Are you sure you wan\'t to delete a "${ $.$data.name }" record?')
                        ]
                    ];
                }
            }
        }

        return $dataSource;
    }
}

<?php

namespace Dolphin\MyModule\Ui\Component\Listing\Column;

use Magento\Framework\View\Element\UiComponent\ContextInterface;

use Magento\Framework\View\Element\UiComponentFactory;

use Magento\Ui\Component\Listing\Columns\Column;

use Magento\Framework\UrlInterface;

class ContactActions extends Column

{

const CONTACT_URL_PATH_EDIT = 'mymodule/contact/edit';

const CONTACT_URL_PATH_DELETE = 'mymodule/contact/delete';

protected $urlBuilder;

private $editUrl;

public function __construct(

ContextInterface $context,

UiComponentFactory $uiComponentFactory,

UrlInterface $urlBuilder,

array $components = [],

array $data = [],

$editUrl = self::CONTACT_URL_PATH_EDIT

) {

$this->urlBuilder = $urlBuilder;

$this->editUrl = $editUrl;

parent::__construct($context, $uiComponentFactory, $components, $data);

}

public function prepareDataSource(array $dataSource)

{

if (isset($dataSource['data']['items'])) {

foreach ($dataSource['data']['items'] as & $item) {

$name = $this->getData('name');

if (isset($item['id'])) {

$item[$name]['edit'] = [

'href' => $this->urlBuilder->getUrl($this->editUrl, ['id' => $item['id']]),

'label' => __('Edit')

];

$item[$name]['delete'] = [

'href' => $this->urlBuilder->getUrl(self::CONTACT_URL_PATH_DELETE, ['id' => $item['id']]),

'label' => __('Delete'),

'confirm' => [

'title' => __('Delete "${ $.$data.name }"'),

'message' => __('Are you sure you wan\'t to delete a "${ $.$data.name }" record?')

]

];

}

return $dataSource;

}

We hope our guide is very effective for you. If any questions, please feel free to leave a comment below. n the next tutorial, you will help with how to use System Configuration and Helpers in Magento 2.