Custom Admin Grid - Bluethink Inc.

Spread the love

In this blog we will learn how to create custom admin grid. Magento 2 grids are a way to list the items in a database table for better management. Grid allows us to sort, filter, edit and update data.

Before you begin: You should have a custom module, in that you need to create menu and other related files and folders.

If you want to create custom menu click here.

To register a frontend route, we must create a routes.xml file:

Step 1: Create routes.xml

app/code/Bluethink/CustomMenu/etc/adminhtml/routes.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
	<router id="admin">
		<route id="menu" frontName="menu">
			<module name="Bluethink_CustomMenu"/>
		</route>
	</router>
</config>

</route>

</router>

</config>

The id attribute is a unique string which will identify this route.

The frontName attribute is also a unique string which will be shown on the url request.

Step 2: Create controller

app/code/Bluethink/CustomMenu/Controller/Adminhtml/Post/Index.php

All controllers have to contain a public execute method. It is called when accessing the controller. The storefront controllers are inherited from the \Magento\Framework\App\Action\Action class.

<?php
namespace Bluethink\CustomMenu\Controller\Adminhtml\Post;
class Index extends \Magento\Backend\App\Action
{
	protected $resultPageFactory = false;
	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((__('Custom Data')));
		return $resultPage;
	}
}

<?php

namespace Bluethink\CustomMenu\Controller\Adminhtml\Post;

class Index extends \Magento\Backend\App\Action

{

protected $resultPageFactory = false;

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((__('Custom Data')));

return $resultPage;

}

After create controller we will create layout file.

Step 3: Create menu_post_index.xml

app/code/Bluethink/CustomMenu/view/adminhtml/layout/menu_post_index.xml

The layout file is an XML file which will define the page structure.

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

<body>

</referenceContainer>

</body>

</page>

In this layout file, we declare an uiComponent for the content of this page. Basically with uiComponent, Magento allows us to create nice user interface for lists, forms etc. we need to create ui_component folder inside view/adminhtml folder.

Step 4: Create quote_listing.xml

app/code/Bluethink/CustomMenu/view/adminhtml/ui_component/quote_listing.xml

In the ui_component folder, we will finally create the UI Grid and display customer data.

<?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">quote_listing.quote_listing_data_source</item>
            <item name="deps" xsi:type="string">quote_listing.quote_listing_data_source</item>
        </item>
        <item name="spinner" xsi:type="string">spinner_columns</item>
    </argument>
    <dataSource name="nameOfDataSource">
        <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">quote_listing_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">entity_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="indexField" xsi:type="string">entity_id</item>
                    </item>
                </item>
            </argument>
        </argument>
    </dataSource>
    <listingToolbar name="listing_top">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="sticky" xsi:type="boolean">true</item>
            </item>
        </argument>
        <bookmark name="bookmarks"/>
        <columnsControls name="columns_controls"/>
        <filterSearch name="fulltext"/>
        <filters name="listing_filters" />
    </listingToolbar>
    <columns name="spinner_columns">
        <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">entity_id</item>
                </item>
            </argument>
        </selectionsColumn>
        <column name="entity_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>
            </argument>
        </column>
        <column name="customer_firstname">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="editor" xsi:type="array">
                        <item name="editorType" xsi:type="string">text</item>
                        <item name="validation" xsi:type="array">
                            <item name="required-entry" xsi:type="boolean">true</item>
                        </item>
                    </item>
                    <item name="label" xsi:type="string" translate="true">First Name</item>
                </item>
            </argument>
        </column>
        <column name="customer_lastname">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="editor" xsi:type="array">
                        <item name="editorType" xsi:type="string">text</item>
                        <item name="validation" xsi:type="array">
                            <item name="required-entry" xsi:type="boolean">true</item>
                        </item>
                    </item>
                    <item name="label" xsi:type="string" translate="true">Last Name</item>
                </item>
            </argument>
        </column>
        <column name="customer_email">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="editor" xsi:type="array">
                        <item name="editorType" xsi:type="string">text</item>
                        <item name="validation" xsi:type="array">
                            <item name="required-entry" xsi:type="boolean">true</item>
                        </item>
                    </item>
                    <item name="label" xsi:type="string" translate="true">Email</item>
                </item>
            </argument>
        </column>
    </columns>
</listing>

100

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

<item name="provider" xsi:type="string">quote_listing.quote_listing_data_source</item>

<item name="deps" xsi:type="string">quote_listing.quote_listing_data_source</item>

</item>

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

</argument>

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

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

<argument name="primaryFieldName" xsi:type="string">entity_id</argument>

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

<item name="indexField" xsi:type="string">entity_id</item>

</item>

</argument>

</dataSource>

</item>

</argument>

</listingToolbar>

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

<item name="indexField" xsi:type="string">entity_id</item>

</item>

</argument>

</selectionsColumn>

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

</item>

</argument>

</column>

</item>

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

</item>

</argument>

</column>

</item>

</item>

</argument>

</column>

</item>

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

</item>

</argument>

</column>

</columns>

</listing>

Step 5: Create di.xml

app/code/Bluethink/CustomMenu/etc/di.xml

Declare resource in dependency injection file. Now we will create di.xml file which will connect to the Model to get the data for our grid.

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd">
    <type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
        <arguments>
            <argument name="collections" xsi:type="array">
                <item name="quote_listing_data_source" xsi:type="string">Magento\Quote\Model\ResourceModel\Quote\Grid\Collection</item>
            </argument>
        </arguments>
    </type>
    <virtualType name="Magento\Quote\Model\ResourceModel\Quote\Grid\Collection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
        <arguments>
            <argument name="mainTable" xsi:type="string">quote</argument>
            <argument name="resourceModel" xsi:type="string">Magento\Quote\Model\ResourceModel\Quote</argument>
        </arguments>
    </virtualType>
</config>

<item name="quote_listing_data_source" xsi:type="string">Magento\Quote\Model\ResourceModel\Quote\Grid\Collection</item>

</argument>

</arguments>

</type>

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

<argument name="resourceModel" xsi:type="string">Magento\Quote\Model\ResourceModel\Quote</argument>

</arguments>

</virtualType>

</config>

The type is used for changing arguments of class or to pass new arguments to that class. Whereas virtualType is used to create a virtual sub-class (means we don’t have to create the .php file).

Step 6: Create UpgradeSchema.php

app/code/Bluethink/CustomMenu/Setup/UpgradeSchema.php

In this blog we use magento quote table, we need to index table for perform full text search in admin grid.

<?php
namespace Bluethink\CustomMenu\Setup;
use Magento\Framework\Setup\UpgradeSchemaInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\SchemaSetupInterface;
class UpgradeSchema implements UpgradeSchemaInterface
{
    public function upgrade(
        SchemaSetupInterface $setup,
        ModuleContextInterface $context
    ) {
        $installer = $setup;
        $installer->startSetup();
        if (version_compare($context->getVersion(), '1.0.0', '<')) {
          $installer->getConnection()->addIndex(
                $installer->getTable('quote'),
                $setup->getIdxName(
                    $installer->getTable('quote'),
                    ['customer_firstname', 'customer_lastname', 'customer_email'],
                    \Magento\Framework\DB\Adapter\AdapterInterface::INDEX_TYPE_FULLTEXT
                ),
                ['customer_firstname', 'customer_lastname', 'customer_email'],
                \Magento\Framework\DB\Adapter\AdapterInterface::INDEX_TYPE_FULLTEXT
            );
        }
        $installer->endSetup();
    }
}