Chapters Close

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

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 Resources:

  1. How to display a custom admin system notification?
  2. How to change PAD length in order increment number in Magento 2?
  3. Dependency Inversion Principle and how it is used in Magento 2?
  4. What are the main benefits of the all new PHP 7.2 for Magento sites?
Speak your Mind

Post a Comment

Got a question? Have a feedback? Please feel free to leave your ideas, opinions, and questions in the comments section of our post! ❤️

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

Grow your online business like 3,809 subscribers

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

    Thank You!

    We are reviewing your submission, and will be in touch shortly.