Summary: A Cheat Sheet of the Most Important UI Component Patterns From This Series
Summary: A Cheat Sheet of the Most Important UI Component Patterns From This Series
~8 Min. Lesezeit Zuletzt aktualisiert am August 9, 2026
27 chapters, one continuous project - from the first empty table to custom renderers, inline edit, and granular ACL. This final chapter summarizes every core pattern as a reference.
The five core principles
- UI Components remain the admin standard - regardless of Hyvä replacing KnockoutJS on the storefront (chapter 1).
- listing.xml/form.xml are a contract between PHP and JavaScript - every
componentvalue references a concrete RequireJS module (chapters 1, 4, 9). - DataProvider, Column, Modifier, and Button classes enforce their own base classes - this is where the ViewModel preference reaches its limit; injectable extra logic still belongs in separate service objects (chapters 1, 5, 13, 19, 22).
addFieldToFilter()always as['eq' => $value]- a PHPStan-level-5 requirement in this project (chapters 5, 18, 24).- Server-side validation is mandatory, client-side is a convenience - both belong, neither replaces the other (chapters 11, 12).
Cheat sheet: listing.xml skeleton
<dataSource name="{name}_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">Vendor\Module\Ui\DataProvider\...</argument>
<argument name="name" xsi:type="string">{name}_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">entity_id</argument>
<argument name="requestFieldName" xsi:type="string">id</argument>
</argument>
</dataSource>Cheat sheet: form.xml skeleton
<settings>
<buttons>
<button name="save" class="Vendor\Module\Block\Adminhtml\...\SaveButton"/>
</buttons>
</settings>
<dataSource name="...">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="submit_url" xsi:type="url" path="vendor_module/entity/save"/>
</item>
</argument>
</dataSource>Cheat sheet: ACL and controller
class Save extends Action implements HttpPostActionInterface
{
public const ADMIN_RESOURCE = 'Vendor_Module::save';
// ...
}Cheat sheet: DataProvider and modifier
class MyDataProvider extends AbstractDataProvider
{
// pass primaryFieldName + requestFieldName through the constructor,
// $this->collection = $collectionFactory->create();
}
class MyModifier implements ModifierInterface
{
public function modifyData(array $data): array { /* values */ return $data; }
public function modifyMeta(array $meta): array { /* structure */ return $meta; }
}The testimonial project as a template
The twelve chapters of the continuous project (14-25) - db_schema.xml with a relation table, grid, form with image upload, delete with confirmation, store view visibility, custom renderer, inline edit, dynamic fields, custom buttons, export, performance, granular ACL - can be used directly as a template for any other own admin module in this project. The order stays stable: data model first, then grid, then form, then delete/visibility, only then advanced techniques.
Ten golden rules for daily work
- After every
db_schema.xmlchange:setup:upgrade, or the change stays inert. addFieldToFilter()always as['eq' => $value], never as a bare scalar.- Server-side validation in the save controller is mandatory, regardless of client-side validation.
- Don't forget
HttpPostActionInterfaceon every controller that saves or deletes. - Always guard destructive mass actions with
<confirm>. - Column renderers, modifiers, and buttons must not bypass their required base classes - extract extra logic into separate services.
- No per-row database queries in column renderers - preload once.
- Assign ACL granularly per action (view/save/delete separately), not as one coarse node.
- On unexpected behavior, check the browser console and network tab first, only search PHP code afterward.
assert()and@error silencing are off-limits - use explicit checks withLocalizedExceptionor PHPStan annotations.
That concludes this series. With these fundamentals, you can build any further Magento 2 admin area - whether an own module like the testimonials management area, or a customization of a core grid - in a structured way, with confidence in the underlying patterns.