Adding a Custom Field to Magento 2 Without UI Components

To add a custom field to the Magento 2 admin form without using UI components, you’ll need to create a custom module and make use of Magento’s standard programmatic approach. Here are the steps to add a custom field to an admin form:

Create a custom module:

You should create a custom module in Magento 2 if you haven’t already. This involves creating the necessary directory structure and registering the module in your app/code directory.

Create a form:

You’ll need to create a form class that extends Magento\Framework\Data\Form. This class will define the form fields and their configurations. You can do this in your custom module’s Block/Adminhtml/YourEntity/Edit/Form.php file.

Here’s an example of how to create a basic form:

namespace YourVendor\YourModule\Block\Adminhtml\YourEntity\Edit;

use Magento\Backend\Block\Widget\Form\Generic;

class Form extends Generic
{
    protected function _prepareForm()
    {
        $form = $this->_formFactory->create(
            [
                'data' => [
                    'id' => 'edit_form',
                    'action' => $this->getUrl('*/*/save', ['id' => $this->getRequest()->getParam('id')]),
                    'method' => 'post',
                ],
            ]
        );

        $form->setUseContainer(true);
        $this->setForm($form);

        $fieldset = $form->addFieldset('your_fieldset', ['legend' => __('Your Fieldset')]);

        $fieldset->addField(
            'your_field',
            'text',
            [
                'name' => 'your_field',
                'label' => __('Your Field'),
                'title' => __('Your Field'),
                'required' => true,
            ]
        );

        $form->setValues($data);
        return parent::_prepareForm();
    }
}

Create the controller action to display the form:

In your custom module, you’ll need to create a controller action to display the form. This can be done in the Controller/Adminhtml/YourEntity/Edit.php file.

namespace YourVendor\YourModule\Controller\Adminhtml\YourEntity;

use Magento\Backend\App\Action;

class Edit extends Action
{
    public function execute()
    {
        $this->_view->loadLayout();
        $this->_view->renderLayout();
    }
}

Create a layout XML file:

You’ll need a layout XML file in your custom module to define the block and template for your form. Create a view/adminhtml/layout/yourmodule_yourentity_edit.xml file.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="editor"/>
    <body>
        <referenceContainer name="content">
            <block class="YourVendor\YourModule\Block\Adminhtml\YourEntity\Edit" name="yourmodule_yourentity_edit"/>
        </referenceContainer>
    </body>
</page>

Create a link in the admin menu:

You can add a link to your custom module in the admin menu by creating a menu.xml file in your module.

<?xml version="1.0"?>
<menu xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
    <add id="YourVendor_YourModule::yourentity" title="Your Entity" module="YourVendor_YourModule" parent="YourVendor_YourModule::parent" sortOrder="10" action="yourmodule/yourentity/edit"/>
</menu>

Clear the cache:

After making these changes, be sure to clear the cache by running bin/magento cache:clean to see your new admin menu item and form.

This is a basic example of how to add a custom field to an admin form without using UI components in Magento 2. You can customize it further to fit your specific needs.

November 10, 2023 | View: 454

Adding a Custom Field to Magento 2 Without UI Components

Share this post

Comments