Magento 2: Add Products Grid to Custom Admin Module

6

Magento 2 provides an easy way to create grids and forms in admin using UI Components. But it may be tricky to add new grid to your module’s admin form tabs. In this article we will see how to add custom products grid in admin module. If you so n ot know how to create custom modules in Magento 2, this article will also be helpful to you because it also shows how to create custom module with database table in Magento 2.

Magento2 admin module
Magento2 admin module

As the module contains large number of files, so I have hosted the module on GitHub. You can access the code here.

Steps to add products grid in admin module:

Create New Tab in Admin Form

To create the new tab, you have to modify the layout xml of form edit page. In our module this file is: app\code\Webspeaks\ProductsGrid\view\adminhtml\layout\wsproductsgrid_contacts_edit.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="editor"/>
    <body>
        <referenceContainer name="content">
            <block class="Webspeaks\ProductsGrid\Block\Adminhtml\Contact\Edit" name="wsproductsgrid_contact_edit"/>
        </referenceContainer>
        <referenceContainer name="left">
            <block class="Webspeaks\ProductsGrid\Block\Adminhtml\Contact\Edit\Tabs" name="wsproductsgrid_contact_edit_tabs">
                <block class="Webspeaks\ProductsGrid\Block\Adminhtml\Contact\Edit\Tab\Main" name="wsproductsgrid_contact_edit_tab_main"/>
                <action method="addTab">
                    <argument name="name" xsi:type="string">main_section</argument>
                    <argument name="block" xsi:type="string">wsproductsgrid_contact_edit_tab_main</argument>
                </action>

                <!-- This code is added for products grid -->
                <action method="addTab">
                    <argument name="name" xsi:type="string">attachment_products</argument>
                    <argument name="block" xsi:type="array">
                        <item name="label" xsi:type="string">Select Products</item>
                        <item name="title" xsi:type="string">Select Products</item>
                        <item name="url" xsi:type="helper" helper="Webspeaks\ProductsGrid\Helper\Data::getProductsGridUrl"></item>
                        <item name="class" xsi:type="string">ajax</item>
                    </argument>
                </action>
                <!-- This code is added for products grid -->

            </block>
        </referenceContainer>
    </body>
</page>

Now in the helper file of our module, add the following function

#File: app\code\Webspeaks\ProductsGrid\Helper\Data.php

<?php
namespace Webspeaks\ProductsGrid\Helper;

class Data extends \Magento\Framework\App\Helper\AbstractHelper
{
    ...
    ...

    /**
     * get products tab Url in admin
     * @return string
     */
    public function getProductsGridUrl()
    {
        return $this->_backendUrl->getUrl('wsproductsgrid/contacts/products', ['_current' => true]);
    }
}

Create Products grid controllers

Now we will have to create the controller for loading the products grid. Create: Webspeaks\ProductsGrid\Controller\Adminhtml\Contacts\Products.php
We also need to add the Products grid controller which will have the same code: Webspeaks\ProductsGrid\Controller\Adminhtml\Contacts\ProductsGrid.php

Create layout files for products grids controllers

The above controllers will be accessible only if we create layout files for these. Here are our layout files:
Webspeaks/ProductsGrid/view/adminhtml/layout/wsproductsgrid_contacts_products.xml
Webspeaks/ProductsGrid/view/adminhtml/layout/wsproductsgrid_contacts_productsgrid.xml

Create the admin block for loading tab contents

In admin we need to load the tab contents. So we will create a block for loading products grid.
See Webspeaks/ProductsGrid/Block/Adminhtml/Contact/Edit/Tab/Products.php

That should be enough if you followed all steps religiously.
Dont forget to clear the cache as php bin/magento cache:clear

Written by Arvind Bhardwaj

Arvind is a certified Magento 2 expert with more than 10 years of industry-wide experience.

Website: http://www.webspeaks.in/

6 thoughts on “Magento 2: Add Products Grid to Custom Admin Module”

  1. Hello,

    I have apply this code than i have face some issue.
    Notice: Undefined property: XJ\Brand\Helper\Data::$_backendUrl in data.php file.

    can you please help me for resolve the issue.

  2. Great post!
    Thanks.
    I need to load subscribers in the grid instead than products. Have I to modify only Webspeaks/ProductsGrid/Block/Adminhtml/Contact/Edit/Tab/Products.php?
    I tried without success.

Comments are closed.