How to create Tab with form fields in admin customer edit section Adobe Commerce (Magento 2)

Here we will learn how to add a Tab with form fields in the Admin custom edit section in Adobe Commerce (Magento 2)

1. Create a file Webkul/CustomerEdit/view/adminhtml/layout/customer_index_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">
    <body>
        <referenceBlock name="customer_form">
             <block class="Webkul\CustomerEdit\Block\Adminhtml\Customer\Edit\Tabs" name="custom_edit_tab_view" />
        </referenceBlock>    
    </body>
</page>

2. Now, create the Tabs.php in Webkul/CustomerEdit/Block/Adminhtml/Customer/Edit as we defined in the customer_index_edit.xml file

<?php
namespace Webkul\CustomerEdit\Block\Adminhtml\Customer\Edit;

use Magento\Customer\Controller\RegistryConstants;
use Magento\Ui\Component\Layout\Tabs\TabInterface;
use Magento\Backend\Block\Widget\Form;
use Magento\Backend\Block\Widget\Form\Generic;

/**
 * Customer account form block
 */
class Tabs extends Generic implements TabInterface
{
    /**
     * @var \Magento\Store\Model\System\Store
     */
    protected $_systemStore;

    /**
     * @var \Magento\Framework\Registry
     */
    protected $_coreRegistry;

    /**
     * @param \Magento\Backend\Block\Template\Context $context
     * @param \Magento\Framework\Registry $registry
     * @param \Magento\Framework\Data\FormFactory $formFactory
     * @param \Magento\Store\Model\System\Store $systemStore
     * @param array $data
     */
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        \Magento\Framework\Registry $registry,
        \Magento\Framework\Data\FormFactory $formFactory,
        \Magento\Store\Model\System\Store $systemStore,
        array $data = []
    ) {
        $this->_coreRegistry = $registry;
        $this->_systemStore = $systemStore;
        parent::__construct($context, $registry, $formFactory, $data);
    }

    /**
     * @return string|null
     */
    public function getCustomerId()
    {
        return $this->_coreRegistry->registry(RegistryConstants::CURRENT_CUSTOMER_ID);
    }

    /**
     * @return \Magento\Framework\Phrase
     */
    public function getTabLabel()
    {
        return __('Demo Tab');
    }

    /**
     * @return \Magento\Framework\Phrase
     */
    public function getTabTitle()
    {
        return __('Demo Tab');
    }

    /**
     * @return bool
     */
    public function canShowTab()
    {
        if ($this->getCustomerId()) {
            return true;
        }
        return false;
    }

    /**
     * @return bool
     */
    public function isHidden()
    {
        if ($this->getCustomerId()) {
            return false;
        }
        return true;
    }

    /**
     * Tab class getter
     *
     * @return string
     */
    public function getTabClass()
    {
        return '';
    }

    /**
     * Return URL link to Tab content
     *
     * @return string
     */
    public function getTabUrl()
    {
        return '';
    }

    /**
     * Tab should be loaded trough Ajax call
     *
     * @return bool
     */
    public function isAjaxLoaded()
    {
        return false;
    }

    public function initForm()
    {
        if (!$this->canShowTab()) {
            return $this;
        }
        /**@var \Magento\Framework\Data\Form $form */
        $form = $this->_formFactory->create();
        $form->setHtmlIdPrefix('myform_');
        
        $fieldset = $form->addFieldset('base_fieldset', ['legend' => __('Fields Information')]);
        $rowcom = "test";
        $fieldset->addField(
            'demo_field',
            'text',
            [
                'name' => 'demo_field',
                'data-form-part' => $this->getData('target_form'),
                'label' => __('Demo Field in Customer Section'),
                'title' => __('Demo Field in Customer Section'),
                'value' => $rowcom,
            ]
        );
        $this->setForm($form);
        return $this;
    }

    /**
     * @return string
     */
    protected function _toHtml()
    {
        if ($this->canShowTab()) {
            $this->initForm();
            return parent::_toHtml();
        } else {
            return '';
        }
    }

    /**
     * Prepare the layout.
     *
     * @return $this
     */
    public function getFormHtml()
    {
        $html = parent::getFormHtml();
        // You can call other Block also by using this function if you want to add phtml file. Otherwise, you can remove it.
        $html .= $this->getLayout()->createBlock(
            'Webkul\CustomerEdit\Block\Adminhtml\Customer\Edit\Tab\AdditionalBlock'
        )->toHtml();
        return $html;
    }
}

Now reload the page, and Tab will be displayed.

If you need technical assistance, please reach out to us at support@webkul.com. Additionally, discover various solutions to improve your online store by visiting the Adobe Commerce modules section.

For professional advice or to create custom functionalities, consider hiring Adobe Commerce Developers for your project.

Categories: Magento2

Abhishek Singh 18-December-2025

View Comments (11) Comment or Ask a Question

Quick Links