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 [email protected]. 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.
11 comments
Nice article thanks for sharing information.
I need to add customer edit section after wishlist call custom tab in that call uicomponent form facing issue.
It is very urgent task for me. Can you guide me for the same.
Line 136
Undefined variable: rowcom
and assign that variable to it, so i will show your saved value of this field.