Magento 2 Adminhtml Area

Admin Routes and ACL

The adminhtml area handles all Magento admin panel requests. Admin routes differ from frontend routes in structure and security requirements.

Admin routes.xml:

<!-- app/code/Vendor/Module/etc/adminhtml/routes.xml -->
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="admin">
        <route id="vendor_module" frontName="vendormodule">
            <module name="Vendor_Module"/>
        </route>
    </router>
</config>

Admin URLs follow: {adminPrefix}/{frontName}/{controller}/{action}

ACL Configuration:

<!-- app/code/Vendor/Module/etc/acl.xml -->
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd">
    <acl>
        <resources>
            <resource id="Magento_Backend::admin">
                <resource id="Vendor_Module::menu" title="Vendor Module">
                    <resource id="Vendor_Module::items" title="Manage Items"/>
                </resource>
            </resource>
        </resources>
    </acl>
</config>

Admin controller with ACL:

<?php
namespace Vendor\Module\Controller\Adminhtml\Item;

class Index extends \Magento\Backend\App\Action
{
    protected function _isAllowed()
    {
        return $this->_authorization->isAllowed('Vendor_Module::items');
    }
    
    public function execute()
    {
        $resultPage = $this->resultPageFactory->create();
        $resultPage->getConfig()->getTitle()->prepend(__('Manage Items'));
        return $resultPage;
    }
}

The _isAllowed() method checks if the current admin user has the required ACL resource permission.

Admin UI Components

Magento 2 uses UI components for admin forms, grids, and data display. UI components are XML-configured PHP classes that render complex admin interfaces.

Listing (Grid) Component:

<!-- app/code/Vendor/Module/view/adminhtml/ui_component/item_listing.xml -->
<?xml version="1.0"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <dataSource name="itemDataSource" component="Magento_Ui/js/grid/provider">
        <settings>
            <updateUrl path="mui/index/render"/>
        </settings>
        <aclResource>Vendor_Module::items</aclResource>
        <dataProvider class="Vendor\Module\Ui\Component\DataProvider" name="itemDataProvider">
            <settings>
                <requestFieldName>id</requestFieldName>
                <primaryFieldName>entity_id</primaryFieldName>
            </settings>
        </dataProvider>
    </dataSource>
    
    <columns name="itemColumns">
        <column name="id" class="Magento\Ui\Component\Listing\Columns\Column\Numeric">
            <settings>
                <dataType>numeric</dataType>
                <visible>true</visible>
                <label translate="true">ID</label>
            </settings>
        </column>
        <column name="name" class="Magento\Ui\Component\Listing\Columns\Column\Text">
            <settings>
                <dataType>text</dataType>
                <visible>true</visible>
                <label translate="true">Name</label>
            </settings>
        </column>
    </columns>
</listing>

Form Component:

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <dataSource name="item_form_data_source" component="Magento_Ui/js/form/provider">
        <dataProvider class="Vendor\Module\Ui\Component\DataProvider" name="item_form_data_source"/>
    </dataSource>
    
    <fieldset name="item_details">
        <field name="name" formElement="input">
            <settings>
                <dataType>text</dataType>
                <dataScope>name</dataScope>
                <label translate="true">Item Name</label>
            </settings>
        </field>
        <field name="status" formElement="select">
            <settings>
                <dataType>boolean</dataType>
                <dataScope>status</dataScope>
                <label translate="true">Status</label>
                <options>
                    <option name="1" value="1" label="Enabled"/>
                    <option name="0" value="0" label="Disabled"/>
                </options>
            </settings>
        </field>
    </fieldset>
</form>

UI components provide:

Automatic CRUD operations
Data binding via Knockout.js
Sorting, filtering, and pagination
Mass actions on grid items

Admin Menu and Configuration

Admin menu items are defined in menu.xml and system configuration sections use system.xml.

Admin Menu:

<!-- app/code/Vendor/Module/etc/adminhtml/menu.xml -->
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
    <menu>
        <add id="Vendor_Module::items"
             title="Vendor Module"
             module="Vendor_Module"
             sortOrder="50"
             resource="Vendor_Module::menu"/>
        
        <add id="Vendor_Module::items_list"
             title="Manage Items"
             module="Vendor_Module"
             sortOrder="10"
             parent="Vendor_Module::items"
             action="vendormodule/item/index"
             resource="Vendor_Module::items"/>
        
        <add id="Vendor_Module::items_new"
             title="Add New Item"
             module="Vendor_Module"
             sortOrder="20"
             parent="Vendor_Module::items"
             action="vendormodule/item/new"
             resource="Vendor_Module::items"/>
    </menu>
</config>

System Configuration:

<!-- app/code/Vendor/Module/etc/adminhtml/system.xml -->
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <section id="vendor_module" translate="label" type="text"
                 sortOrder="310" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>Vendor Module Settings</label>
            <group id="general" translate="label" type="text" sortOrder="100"
                   showInDefault="1" showInWebsite="1" showInStore="1">
                <label>General Settings</label>
                <field id="enabled" translate="label" type="select"
                       sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Enabled</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="api_key" translate="label" type="obscure" sortOrder="20"
                       showInDefault="1" showInWebsite="0" showInStore="0">
                    <label>API Key</label>
                    <backend_model>Magento\Config\Model\Config\Backend\Encrypted</backend_model>
                </field>
            </group>
        </section>
    </system>
</config>

Menu items reference ACL resources for permission control. System configuration sections use showInDefault, showInWebsite, and showInStore attributes to control scope visibility.

Admin Themes and Layout

Admin panels use their own theme system separate from the frontend. The default admin theme is Magento/backend.

Admin theme structure:

app/design/adminhtml/Vendor/backend/
â”œâ”€â”€ registration.php
â”œâ”€â”€ theme.xml
â””â”€â”€ web/
    â”œâ”€â”€ css/
    â”‚   â””â”€â”€ custom-admin.css
    â”œâ”€â”€ js/
    â”‚   â””â”€â”€ custom-admin.js
    â””â”€â”€ images/

Admin registration.php:

<?php
use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
    ComponentRegistrar::THEME,
    'adminhtml/Vendor/backend',
    __DIR__
);

Admin layout XML:

<!-- app/code/Vendor/Module/view/adminhtml/layout/vendormodule_item_index.xml -->
<?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"
      layout="admin-1columns">
    <body>
        <referenceContainer name="content">
            <block class="Vendor\Module\Block\Adminhtml\Item\Grid"
                   name="item.grid"
                   cacheable="false"/>
        </referenceContainer>
    </body>
</page>

Key differences from frontend:

Admin uses admin-1columns or admin-2columns-left layouts
Admin blocks extend Magento\Backend\App\Action for ACL
Admin uses the Magento/backend theme by default
Custom admin themes can be assigned per admin user role
Admin does not use full-page cache or Varnish

Flashcards

Question

What base class do admin controllers extend?

Click to reveal answer

Answer

Magento\Backend\App\Action

Question

What XML file defines admin system configuration sections?

Click to reveal answer

Answer

etc/adminhtml/system.xml

Question

What attribute controls if a system config field shows at store scope?

Click to reveal answer

Answer

showInStore="1"

Question

What layout codes are used in adminhtml?

Click to reveal answer

Answer

admin-1columns, admin-2columns-left

Revision Notes

Key Takeaways

1. Admin routes use router id="admin" in routes.xml
2. Controllers must implement _isAllowed() for ACL checks
3. UI components provide CRUD interfaces for admin grids and forms
4. Menu structure defined in etc/adminhtml/menu.xml
5. System configuration defined in etc/adminhtml/system.xml
6. Admin themes are separate from frontend themes

Interview Tips

• Explain how ACL works in admin controllers
• Describe UI components and how they render admin grids
• Discuss the difference between admin and frontend route configuration
• Explain how to add a new system configuration section
• Know how admin menu items reference ACL resources

Cheat Sheet

Adminhtml Area Cheat Sheet

Routes: etc/adminhtml/routes.xml with router id="admin"
ACL: etc/acl.xml â†’ Magento_Backend::admin
Menu: etc/adminhtml/menu.xml
System Config: etc/adminhtml/system.xml

Controller Base Class:

class MyController extends \Magento\Backend\App\Action
{
    protected function _isAllowed()
    {
        return $this->_authorization->isAllowed('Vendor_Module::resource');
    }
}

UI Components:

Listing â†’ Grid/table display
Form â†’ Edit/create forms
DataSource â†’ Data provider class

Admin Routes and ACL

Admin UI Components

Admin Menu and Configuration

Admin Themes and Layout

Quiz

Flashcards

Revision Notes

Key Takeaways

Interview Tips

Cheat Sheet

Adminhtml Area Cheat Sheet