How to create a custom tab and call custom phtml in admin category form in Magento 2?

Sep 27th, 2018 2 min to read

In this Magento 2 web development tip, we will be guiding you on how to create a custom tab and call custom phtml in the admin category ui-component form in Magento 2.

Here we are using Aureatelabs as the Vendor name and CustomTab as the name of the module.  You can change this according to your Vendor and Module name.

First, we will create a custom tab in category admin form after that we will call our custom block and phtml file inside our custom tab.

First you have to create category_form.xml file in app/code/Aureatelabs/CustomTab/view/adminhtml/ui_component directory

<?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">
   <fieldset name="category_custom_tab_789" sortOrder="120">
       <settings>
           <collapsible>true</collapsible>
           <label translate="true">Custom Tab</label>
       </settings>
       <container name="custom_tab_container" sortOrder="100">
           <htmlContent name="html_content">
               <block name="custom_category_tab" class="Aureatelabs\CustomTab\Block\Adminhtml\Category\CustomTab"/>
           </htmlContent>
       </container>
   </fieldset>
</form>

Here we have set custom block inside our custom tab in category_form.xml.

Next we will create CustomTab.php in  app/code/Aureatelabs/CustomTab/Block/Adminhtml/Category directory.

<?php
namespace Aureatelabs\CustomTab\Block\Adminhtml\Category;

class CustomTab extends \Magento\Backend\Block\Template
{
   /**
    * Block template.
    *
    * @var string
    */
   protected $_template = 'category/custom_tab.phtml';

}

In the block file, we have defined the phtml file.

So next we will create custom_tab.phtml in app/code/Aureatelabs/CustomTab/view/adminhtml/templates/category directory

<p>This your custom phtml in admin category form</p>

Now flush the cache and open the category admin form, there you will see the custom phtml file content in our custom tab.

Well that was an easy one, wasn’t it? Let us know in the comments section below.

Related Source

  1. How to display a custom admin system notification
we forecast

Post a Comment

We don’t write crap content which is uninteresting, found everywhere and does not make any sense. Following our DNA, we write and speak about next generation technology, platforms and possibilities of digital commerce.

* This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.