How to Create custom Tab in magento2

Spread the love

Tab : – Tabs in Magento 2 can be customized and extended to meet the specific needs of an
online store. Developers and store owners can add new tabs, rename existing tabs, and
modify the content of tabs to display custom data. This flexibility allows store owners to create
a personalized user interface that meets the unique needs of their business.

To create a custom tab in Magento 2, please follow the below steps:

Step1 – Firstly, create registration.php file inside app\code\BluethinkInc\AddCustomTab

<?php
/**
* Copyright © BluethinkInc. All rights reserved.
* See COPYING.txt for license details.
*/
use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
ComponentRegistrar::MODULE,
"Bluethinkinc_AddCustomTab",
__DIR__
);

<?php

/**

* See COPYING.txt for license details.

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(

ComponentRegistrar::MODULE,

"Bluethinkinc_AddCustomTab",

__DIR__

);

Step2 – create module.xml file inside app\code\BluethinkInc\AddCustomTab\etc

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Bluethinkinc_AddCustomTab"/>
</config>

<?xml version="1.0" ?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">

</config>

Step3 – create routes.xml file inside app\code\BluethinkInc\AddCustomTab\etc\adminhtml

<?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="popupmodal" frontName="popupmodal">
<module name="Bluethinkinc_AddCustomTab" before="Magento_Adminhtml"/>
</route>
</router>
</config>

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">

</route>

</router>

</config>

Step4 – create menu.xml file inside app\code\BluethinkInc\AddCustomTab\etc\adminhtml

<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
<menu>
<add id="Bluethinkinc_AddCustomTab::popup" title="Bluethinkinc" translate="title"
module="Bluethinkinc_AddCustomTab" sortOrder="15"
resource="Bluethinkinc_AddCustomTab::popup"/>

<add id="Bluethinkinc_AddCustomTab::grid" title="Grid Tabs"
translate="title" module="Bluethinkinc_AddCustomTab"
parent="Bluethinkinc_AddCustomTab::popup" sortOrder="10"
resource="Bluethinkinc_AddCustomTab::grid" action="popupmodal/index/gridtab"
/>
</menu>
</config>

<?xml version="1.0"?>

<!--

/**

* See COPYING.txt for license details.

-->

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">

<menu>

<add id="Bluethinkinc_AddCustomTab::popup" title="Bluethinkinc" translate="title"

module="Bluethinkinc_AddCustomTab" sortOrder="15"

resource="Bluethinkinc_AddCustomTab::popup"/>

<add id="Bluethinkinc_AddCustomTab::grid" title="Grid Tabs"

translate="title" module="Bluethinkinc_AddCustomTab"

parent="Bluethinkinc_AddCustomTab::popup" sortOrder="10"

resource="Bluethinkinc_AddCustomTab::grid" action="popupmodal/index/gridtab"

</menu>

</config>

Step5 – create GridTab.php file inside app\code\BluethinkInc\AddCustomTab\Controller\Adminhtml\Index

<?php
declare(strict_types=1);
/**
* Copyright © BluethinkInc All rights reserved.
* See COPYING.txt for license details.
*/
namespace Bluethinkinc\AddCustomTab\Controller\Adminhtml\Index;

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

class GridTab extends \Magento\Backend\App\Action

{
/**
* Page return
*
* @var PageFactory
*/
protected $_pageFactory;

/**
* Execute function
*
* @param Context $context
* @param PageFactory $pageFactory
*/
public function __construct(
\Magento\Backend\App\Action\Context $context,
\Magento\Framework\View\Result\PageFactory $pageFactory
) {
$this->_pageFactory = $pageFactory;
parent::__construct($context);
}

/**
* Page return
*
* @return mixed
*/
public function execute()
{
$resultPage = $this->_pageFactory->create();
$resultPage->setActiveMenu("Bluethinkinc_AddCustomTab::popup");
$resultPage
->getConfig()
->getTitle()
->prepend(__("Tabs"));
return $resultPage;
}
}

<?php

declare(strict_types=1);

/**

* See COPYING.txt for license details.

namespace Bluethinkinc\AddCustomTab\Controller\Adminhtml\Index;

use Magento\Backend\App\Action\Context;

use Magento\Framework\View\Result\PageFactory;

class GridTab extends \Magento\Backend\App\Action

{

/**

* Page return

* @var PageFactory

protected $_pageFactory;

/**

* Execute function

* @param Context $context

* @param PageFactory $pageFactory

public function __construct(

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

\Magento\Framework\View\Result\PageFactory $pageFactory

) {

$this->_pageFactory = $pageFactory;

parent::__construct($context);

}

/**

* Page return

* @return mixed

public function execute()

{

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

$resultPage->setActiveMenu("Bluethinkinc_AddCustomTab::popup");

$resultPage

->getConfig()

->getTitle()

->prepend(__("Tabs"));

return $resultPage;

}

Step6 – create DataProvider.php file inside app\code\BluethinkInc\AddCustomTab\Model\CustomTab

<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
namespace Bluethinkinc\AddCustomTab\Model\CustomTab;

use Bluethinkinc\AddCustomTab\Model\ResourceModel\View\CollectionFactory;
use Magento\Framework\App\Request\DataPersistorInterface;
use Magento\Ui\DataProvider\Modifier\PoolInterface;

/**
* Class DataProvider
*/
class DataProvider extends \Magento\Ui\DataProvider\ModifierPoolDataProvider
{
/**
* @var \Magento\Cms\Model\ResourceModel\Block\Collection
*/
protected $collection;

/**
* @var DataPersistorInterface
*/
protected $dataPersistor;

/**
* @var array
*/
protected $loadedData;

/**
* Constructor
*
* @param string $name
* @param string $primaryFieldName
* @param string $requestFieldName

* @param CollectionFactory $blockCollectionFactory
* @param DataPersistorInterface $dataPersistor
* @param array $meta
* @param array $data
* @param PoolInterface|null $pool
*/
public function __construct(
$name,
$primaryFieldName,
$requestFieldName,
CollectionFactory $blockCollectionFactory,
DataPersistorInterface $dataPersistor,
array $meta = [],
array $data = [],
PoolInterface $pool = null
) {
$this->collection = $blockCollectionFactory->create();
$this->dataPersistor = $dataPersistor;
parent::__construct(
$name,
$primaryFieldName,
$requestFieldName,
$meta,
$data,
$pool
);
}

/**
* Get data
*
* @return array
*/
public function getData()
{
if (isset($this->loadedData)) {
return $this->loadedData;
}
$items = $this->collection->getItems();

/** @var \Magento\Cms\Model\Block $block */
foreach ($items as $block) {
$this->loadedData[$block->getBluethinkId()] = $block->getData();
}

$data = $this->dataPersistor->get("bluethink_blog");
if (!empty($data)) {
$block = $this->collection->getNewEmptyItem();
$block->setData($data);
$this->loadedData[$block->getBluethinkId()] = $block->getData();
$this->dataPersistor->clear("bluethink_blog");
}

return $this->loadedData;
}
}

<?php

/**

* See COPYING.txt for license details.

namespace Bluethinkinc\AddCustomTab\Model\CustomTab;

use Bluethinkinc\AddCustomTab\Model\ResourceModel\View\CollectionFactory;

use Magento\Framework\App\Request\DataPersistorInterface;

use Magento\Ui\DataProvider\Modifier\PoolInterface;

/**

* Class DataProvider

class DataProvider extends \Magento\Ui\DataProvider\ModifierPoolDataProvider

{

/**

* @var \Magento\Cms\Model\ResourceModel\Block\Collection

protected $collection;

/**

* @var DataPersistorInterface

protected $dataPersistor;

/**

* @var array

protected $loadedData;

/**

* Constructor

* @param string $name

* @param string $primaryFieldName

* @param string $requestFieldName

* @param CollectionFactory $blockCollectionFactory

* @param DataPersistorInterface $dataPersistor

* @param array $meta

* @param array $data

* @param PoolInterface|null $pool

public function __construct(

$name,

$primaryFieldName,

$requestFieldName,

CollectionFactory $blockCollectionFactory,

DataPersistorInterface $dataPersistor,

array $meta = [],

array $data = [],

PoolInterface $pool = null

) {

$this->collection = $blockCollectionFactory->create();

$this->dataPersistor = $dataPersistor;

parent::__construct(

$name,

$primaryFieldName,

$requestFieldName,

$meta,

$data,

$pool

);

}

/**

* Get data

* @return array

public function getData()

{

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

return $this->loadedData;

}

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

/** @var \Magento\Cms\Model\Block $block */

foreach ($items as $block) {

$this->loadedData[$block->getBluethinkId()] = $block->getData();

}

$data = $this->dataPersistor->get("bluethink_blog");

if (!empty($data)) {

$block = $this->collection->getNewEmptyItem();

$block->setData($data);

$this->loadedData[$block->getBluethinkId()] = $block->getData();

$this->dataPersistor->clear("bluethink_blog");

}

return $this->loadedData;

}

Step7 – create popupmodal_index_gridtab.php file inside app\code\BluethinkInc\AddCustomTab\view\adminhtml\layout

<?xml version="1.0"?>
<!--
/**
 * Copyright © BluethinkInc All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<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">
    <body>
        <referenceContainer name="content">
            <uiComponent name="grid_tab_listing"/>
        </referenceContainer>
    </body>
</page>

<?xml version="1.0"?>

<!--

/**

* See COPYING.txt for license details.

-->

<body>

</referenceContainer>

</body>

</page>

Step8 – create grid_tab_listing file inside app\code\BluethinkInc\AddCustomTab\view\adminhtml\ui_component

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Copyright © BluethinkInc All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<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">grid_tab_listing.grid_tab_listing_data_source</item>
			<item name="deps" xsi:type="string">grid_tab_listing.grid_tab_listing_data_source</item>
		</item>
		<item name="label" translate="true" xsi:type="string">Tabs</item>
		<item name="config" xsi:type="array">
			<item name="dataScope" xsi:type="string">data</item>
			<item name="namespace" xsi:type="string">grid_tab_listing</item>
		</item>
	</argument>
      <settings>
        <layout>
            <navContainerName>left</navContainerName>
            <type>tabs</type>
        </layout>
    </settings>
    <dataSource name="grid_tab_listing_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Bluethinkinc\AddCustomTab\Model\CustomTab\DataProvider</argument>
            <argument name="name" xsi:type="string">grid_tab_listing_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">bluethink_id</argument>
            <argument name="requestFieldName" xsi:type="string">bluethink_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="tab1">
        <settings>
            <label translate="true">Tab 1</label>
        </settings>
    </fieldset>
    <fieldset name="tab2">
        <settings>
            <label translate="true">Tab 2</label>
        </settings>
    </fieldset>
</form>

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

<!--

/**

* See COPYING.txt for license details.

-->

<item name="provider" xsi:type="string">grid_tab_listing.grid_tab_listing_data_source</item>

<item name="deps" xsi:type="string">grid_tab_listing.grid_tab_listing_data_source</item>

</item>

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

</item>

</argument>

</layout>

</settings>

<argument name="class" xsi:type="string">Bluethinkinc\AddCustomTab\Model\CustomTab\DataProvider</argument>

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

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

<argument name="requestFieldName" xsi:type="string">bluethink_id</argument>

</argument>

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

</item>

</argument>

</dataSource>

</settings>

</fieldset>

</settings>

</fieldset>

</form>

Now, run below commands

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento static:content:deploy -f
php bin/magento cache:flush

php bin/magento setup:upgrade

php bin/magento setup:di:compile

php bin/magento static:content:deploy -f

php bin/magento cache:flush

Here is your output

How to Create custom Tab in magento2

Leave a Reply Cancel reply

Find More Blogs

How to Add a Custom Tab to the Customer Order Detail Page in Magento 2

Exception Handling in Java

How to add custom less file in Magento2

Spring Boot Microservices

Implementation of WireMock for better testing

Magento 2: How to selected default option in configurable options?

How To Implement Simple JWT Authentication in Django Rest Framework

Optimizing Search: Integrating Elasticsearch in Django Applications

How to create Customer Segments

Proxy Design Pattern and Requisition List in Magento 2