Hyvä Admin : finalisation du module qui rend l’admin Magento 2 plus souple et rapide

Magento 2 · Développement

Présentation du module open-source Hyvä Admin, avec des exemples de grilles produits, commandes et CMS — sans UI Components.

📅 Mars 2025  |  🕒 8 min de lecture  |  🏷️ Magento 2, Hyvä, Admin, Performance

---

Module	Compatibilité	UI Components	Licence	Grilles incluses	Config
Hyvä Admin	Magento 2.4+	Aucun requis	Open Source	Products, Orders, CMS	XML déclaratif

---

---

Pourquoi l’admin Magento 2 est pas foufou

Tout développeur Magento 2 le sait : créer une grille ou un formulaire dans l’interface d’administration, c’est s’aventurer dans les méandres des UI Components. Cette architecture basée sur Knockout.js et des fichiers XML imbriqués est puissante, certes — mais elle est lente à maîtriser, difficile à déboguer et génère des pages admin qui peinent à se charger.

Entre les listing.xml, les form.xml, les providers de données et les composants virtuels, le moindre ajout d’une colonne personnalisée semble parfois compliqué, abstrait. Sans parler des performances : les UI Components chargent du JavaScript lourd côté client, ce qui alourdit considérablement l’expérience.

Hyvä Admin : une alternative allégée des UI Components

C’est exactement le problème que résout Hyvä Admin, le module open-source de l’équipe Hyvä Themes. L’objectif affiché est clair : rendre la création de grilles et de formulaires dans l’adminhtml de Magento 2 rapide et agréable.

Le module fonctionne en réduisant les couches natives d’UI Component. On repart sur une base qui s’appuie sur une configuration XML simple et génère des interfaces propres, légères et performantes. Exit Knockout.js, bootstrap ui, place à des templates PHP/HTML classiques, faciles à personnaliser et à étendre.

Exemple pour ajouter une colonne Select dans magento 2 natif

<column name="name" class="Vendor\Module\Ui\Component\Listing\Column\Name">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Vendor\Module\Model\Source\Type</item>
        <item name="config" xsi:type="array">
            <item name="filter" xsi:type="string">select</item>
            <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
            <item name="dataType" xsi:type="string">select</item>
            <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
            <item name="label" xsi:type="string" translate="true">Name</item>
            <item name="sortOrder" xsi:type="number">80</item>
            <item name="visible" xsi:type="boolean">false</item>
        </item>
    </argument>
</column>

Et maintenant sous Hyva

<column name="website_ids" label="Websites" type="website_id" template="Hyva_Admin::grid/content.phtml" source="Magento\Store\Model\ResourceModel\Website\Collection"/>

Les atouts clés

Exemple du module : grilles produits, commandes et CMS / Avec formulaire en ajax

J’ai récemment finalisé l’intégration complète du module Hyvä Admin sur un projet Magento 2. Le projet était déjà bien avancé par la communauté, il manquait plus que à mettre en place les models de save, load, les inputs, les layouts et quelques interfaces. Vous pouvez trouver le core du projet git sur ce lien.

Ajouté à ce module, il faut installé aussi Hyva admin Test qui comporte tous les grids et de formulaires réalisés.

Grille des produits du catalogue

La grille catalogue affiche, comme la grille native, les produits avec colonnes SKU, nom, prix, stock et statut.

Grille CMS, Customers & Sales : commandes, factures, livraisons et remboursements

Pareil pour les autres grilles, j’ai remis tous les éléments natifs. A savoir les mêmes mass action, les mêmes variables de grilles, export csv etc.

Formulaire Hyva Admin

Le formulaire ressemble à celui natif de magento mais il est bien épuré et plus rapide ! Avec un Save intégré en Ajax.

A partir des formulaires on peut maintenant créer plus facilement de nouveaux modules dans l’admin de Magento. Pour exemple ici https://github.com/tweetyx/pagespeedfr_cmsacf ; j’ai développé un module qui comporte à la fois la grille et le formulaire sur la même page. Cela permet une interface de gestion plus interactif, plus rapide ! La sauvegarde étant en ajax, la page ne se recharge pas donc on peut enchainé les créations et éditions de nos données.

Le module Hyva advance custom field que j’ai développé ici permet, à la chaine, d’uploader des images, fichiers, textes et liens. Cela évite au client d’avoir à faire dans certain cas du HTML ou malencontreusement à modifier du html et casser tout le site.

Comparatif : UI Components vs Hyvä Admin

Voici un tableau récapitulatif des différences concrètes entre les deux approches :

Critère	UI Components (natif)	Hyvä Admin
Courbe d’apprentissage	Très élevée	Faible
Configuration	XML complexe, imbriqué	XML simple et lisible
Dépendance Knockout.js	✅ Oui	❌ Non
Performance chargement	Lente (JS lourd)	Rapide (rendu serveur)
Debugging	Difficile	Standard PHP/HTML
Colonne personnalisée	30–60 min	5–10 min
Compatibilité Magento 2	✅ Native	✅ 2.4+
Open Source	✅ Oui	✅ Oui
Formulaires admin	✅ Oui	✅ Oui
Support Alpine.js / Tailwind	❌ Non natif	✅ Compatible

---

FAQ — Questions fréquentes sur Hyvä Admin

Les questions les plus fréquentes sur Hyvä Admin.