Get Free Audit

Customizing Tab Options in the Admin Panel of Magento 2.0

Mar 4, 2016

1683 Artsem Miklashevich

Customizing Tab Options in the Admin Panel of Magento 2.0

One day you may need to redefine default output from the admin panel of Magento. For such things, in Magento 1.x and 2.0 there is a possibility to re-define default templates that allow us to make any customization of the theme.

Let’s look into customizing of attributes in the admin panel of Magento 2.0.

We need to add a new tab to the page for editing product attributes. Unlike Magento 1.x, in Magento 2.0 we should to place all template and layout files into the module’s view category. Just as it’s shown on the following image:

Customizing Tab Options in the Admin Panel of Magento 2.0

To re-define product attributes block, we need to rewrite appropriate layout rules. In our layout we should reference to the catalog_product_attribute_edit.xml. In this file we changed the block  \Magento\Catalog\Block\Adminhtml\Product\Attribute\Edit\Tabs.
Original:
\Magento\Catalog\Block\Adminhtml\Product\Attribute\Edit\Tabs
Updated:
Belvg\CustomStockStatus\Block\Adminhtml\Product\Attribute\Edit\Tabs.


With this referenceContainer update we replaced Magento\Catalog\Block\Adminhtml\Product\Attribute\Edit\Tabs block with our custom Belvg\CustomStockStatus\Block\Adminhtml\Product\Attribute\Edit\Tabs.

magento webdesign

Magento Webdesign

Take your online store to the next level with BelVG Magento Webdesign

Visit the page

And added a new block  Belvg\CustomStockStatus\Block\Adminhtml\Product\Attribute\Edit\Tabs\Statuses. This block will define the look of our custom tab.

In order to add the required functionality we extended the original class \Magento\Catalog\Block\Adminhtml\Product\Attribute\Edit\Tabs with the Belvg\CustomStockStatus\Block\Adminhtml\Product\Attribute\Edit\Tabs. Also compatibility requires to transmit the necessary arguments to the   __construct method from the parent object. So code of the block will look like:

Andrey_Dubina
Partner With Us Let's discuss how to grow your business. Get a Free Quote.
Talk to Andrey


In this class we overloaded the beforeToHtml() method to add the new tab definition:


Directive $this->getChildHtml(‘statuses’) references to the Belvg\CustomStockStatus\Block\Adminhtml\Product\Attribute\Edit\Tabs\Statuses block (we defined it in the catalog_product_attribute_edit.xml). Statuses block is responsible for the content of the new tab. Now we should define the template and custom logic for the new tab.


Template’s location is defined in the following way: Namespace_Module::relative_path. So we have  Belvg_CustomStockStatus::product/attributes/tabs/statuses/statuses.phtml. According to the module’s structure this path should look like:

Customizing Tab Options in the Admin Panel of Magento 2.0

The main principles of redefining and customizing the default theme are the same in Magento 2.0 and Magento 1.x. But in Magento 2.0 all template and layout files are located in the module’s catalog. I think it’s really convenient  and won’t take much time for Magento 1.x developers to switch.

magento custom development

Magento Custom Development

Take your online store to the next level with BelVG Magento Custom Development

Visit the page
Andrey Dubina
Partner With Us Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Andrey

1 comment

Post a new comment

BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *