Magento 2 Experten — Hyvä Theme, Tailwind CSS & SEO aus einer Hand ›

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

  1. UI Components remain the admin standard - regardless of Hyvä replacing KnockoutJS on the storefront (chapter 1).
  2. listing.xml/form.xml are a contract between PHP and JavaScript - every component value references a concrete RequireJS module (chapters 1, 4, 9).
  3. 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).
  4. addFieldToFilter() always as ['eq' => $value] - a PHPStan-level-5 requirement in this project (chapters 5, 18, 24).
  5. 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

  1. After every db_schema.xml change: setup:upgrade, or the change stays inert.
  2. addFieldToFilter() always as ['eq' => $value], never as a bare scalar.
  3. Server-side validation in the save controller is mandatory, regardless of client-side validation.
  4. Don't forget HttpPostActionInterface on every controller that saves or deletes.
  5. Always guard destructive mass actions with <confirm>.
  6. Column renderers, modifiers, and buttons must not bypass their required base classes - extract extra logic into separate services.
  7. No per-row database queries in column renderers - preload once.
  8. Assign ACL granularly per action (view/save/delete separately), not as one coarse node.
  9. On unexpected behavior, check the browser console and network tab first, only search PHP code afterward.
  10. assert() and @ error silencing are off-limits - use explicit checks with LocalizedException or 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.