Create Custom Type Field In Admin Form Magento2 – In many cases , when we need to create a custom type field in admin form. which can handle our custom data. so here i am going to explain, how to create a custom type field in admin form.you have to just follow these steps to create custom type field in form.
1 . go to your admin form page
Webkul\CustomFormField\Block\Adminhtml\Customformfield\Edit\Tab\Form
namespace Webkul\CustomFormField\Block\Adminhtml\Customformfield\Edit\Tab; class Form extends \Magento\Backend\Block\Widget\Form\Generic implements \Magento\Backend\Block\Widget\Tab\TabInterface { /** * @var \Magento\Store\Model\System\Store */ protected $_systemStore; /** * @param \Magento\Backend\Block\Template\Context $context * @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\Data\FormFactory $formFactory, \Magento\Store\Model\System\Store $systemStore, array $data = [] ) { $this->_systemStore = $systemStore; parent::__construct($context, $formFactory, $data); } /** * Prepare form * * @return $this */ protected function _prepareForm() { $form = $this->_formFactory->create(); $form->setHtmlIdPrefix('customfield_'); $fieldset = $form->addFieldset( 'base_fieldset', ['legend' => __('Custom Form Field'), 'class' => 'fieldset-wide'] ); $fieldset->addType( 'mycustomfield', '\Webkul\CustomFormField\Block\Adminhtml\Customformfield\Edit\Renderer\CustomRenderer' ); $this->setForm($form); return parent::_prepareForm(); } }
In above code i have created a custom type field (mycustomfield) and also define a renderer file path for it.Now We have to create renderer file on above mentioned location.
2 . create renderer file
here i have created renderer file on this location.
Webkul\CustomFormField\Block\Adminhtml\Customformfield\Edit\Renderer\CustomRenderer
namespace Webkul\CustomFormField\Block\Adminhtml\Customformfield\Edit\Renderer; /** * CustomFormField Customformfield field renderer */ class CustomRenderer extends \Magento\Framework\Data\Form\Element\AbstractElement { /** * Get the after element html. * * @return mixed */ public function getAfterElementHtml() { // here you can write your code. $customDiv = '<div style="width:600px;height:200px;margin:10px 0;border:2px solid #000" id="customdiv"><h1 style="margin-top: 12%;margin-left:40%;">Custom Div</h1></div>'; return $customDiv; } }
3 . now you can use name of custom type field as a field type for another field.
* Prepare form * * @return $this */ protected function _prepareForm() { $form = $this->_formFactory->;create(); $form->setHtmlIdPrefix('customfield_'); $fieldset = $form->addFieldset( 'base_fieldset', ['legend' => __('Custom Form Field'), 'class' => 'fieldset-wide'] ); $fieldset->addType( 'mycustomfield', '\Webkul\CustomFormField\Block\Adminhtml\Customformfield\Edit\Renderer\CustomRenderer' ); $fieldset->addField( 'custom div', 'mycustomfield', [ 'name' => 'customdiv', 'label' => __('Custom Div'), 'title' => __('Custom Div'), ] ); $this->setForm($form); return parent::_prepareForm(); }
Now your div will be display like that in a admin form
hope so it will help you.
3 comments
$customDiv = $this->getValue();
in renderer and change method name getAfterElementHtml to getElementHtml