Hello Everyone,
In this blog, we will learn about how to Create a Tab with Form Field in Customer Edit Page in Admin in Magento 2.
Without wasting your time, let us guide you straight away. Follow the easy step given below to Create a Tab with Form Field in Customer Edit Page in Magento 2.
STEPS FOR CREATE A TAB WITH FORM FIELD IN CUSTOMER EDIT PAGE IN MAGENTO 2
Step 1: Create customer_index_edit.xml file
app/code/Vendor/Extension/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="Vendor\Extension\Block\Adminhtml\Customer\Edit\Tab" name="custom_edit_tab_view" />
</referenceBlock>
</body>
</page>
Step 2: Create Tab.php file
app/code/Vendor/Extension/Block/Adminhtml/Customer/Edit/Tab.php
<?php
namespace Vendor\Extension\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 Tab 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 __('Magecurious Tab');
}
/**
* @return \Magento\Framework\Phrase
*/
public function getTabTitle()
{
return __('Magecurious 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 through 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 = "magecurious";
$fieldset->addField(
'demo_field',
'text',
[
'name' => 'demo_field',
'data-form-part' => $this->getData('target_form'),
'label' => __('magecurious_custom_field'),
'title' => __('magecurious_custom_field'),
'value' => $rowcom,
]
);
$this->setForm($form);
return $this;
}
/**
* @return string
*/
protected function _toHtml()
{
if ($this->canShowTab()) {
$this->initForm();
return parent::_toHtml();
} else {
return '';
}
}
// You can call other Block also by using this function if you want to add phtml file. Otherwise, you can remove below code.
/**
* Prepare the layout.
*
* @return $this
*/
public function getFormHtml()
{
$html = parent::getFormHtml();
$html .= $this->getLayout()->createBlock(
'Vendor\Extension\Block\Adminhtml\Customer\Edit\Tab\AdditionalBlock'
)->toHtml();
return $html;
}
}
Step 3: Finally run the below commands.
$ php bin/magento cache:clean
$ php bin/magento cache:flush
Step 4: Output:
Now go to customers -> All Customers -> <select customer> -> Edit
Final Thoughts:
So this was the easiest way which we have told you in this blog. This is how you can Create a Tab with Form Field in Customer Edit Section in Admin in Magento 2. Hope you liked the blog.
So quickly go to the comment box and tell me how you like this blog?
Stay tuned with us on our site to get new updates of Magento.
Thanks for reading and visiting our site.
