Magento 2 Admin Grids & Forms Tutorial: UI Components lernen | Mironsoft
Magento 2 Admin-Grids & Formulare: Das komplette UI-Components-Tutorial
UI Components für Magento-2-Admin-Grids und -Formulare von Grund auf lernen: listing.xml und form.xml, DataProvider, Spalten, Filter, Massenaktionen, Feldtypen, Validierung, Modifier, Custom-Renderer, Inline-Edit, Export und Performance - demonstriert an einer durchgehenden Kundenstimmen-Verwaltung.
Das lernst du
- Wie das UI-Components-Framework aufgebaut ist und wie listing.xml, form.xml, DataProvider und der Layout-XML-Aufruf zusammenspielen
- Wie man ein eigenes Modul mit db_schema.xml, Model/ResourceModel/Collection, ACL und Admin-Menüpunkt von Grund auf aufsetzt
- Wie man einen vollständigen Admin-Grid baut: Spaltentypen, Filter, Sortierung und Massenaktionen
- Wie man ein vollständiges Admin-Formular baut: Feldtypen inklusive Bild-Upload, Validierung, Save-Controller und Formular-Modifier
- Wie man Schritt für Schritt eine eigene Kundenstimmen-Verwaltung baut: DB-Schema, Grid, Formular, Delete-Controller und Store-View-Sichtbarkeit
- Wie man fortgeschrittene Techniken einsetzt: Custom-Renderer, Inline-Edit, dynamische Felder, eigene Toolbar-Buttons, Export und Grid-Performance bei großen Datenmengen
- Wie man ACL granular vergibt und die häufigsten Grid- und Formular-Fehler systematisch debuggt
Voraussetzungen
- Solide PHP-Kenntnisse und ein Grundverständnis der Magento-2-Modulstruktur werden vorausgesetzt - auf das eigenständige Modul-Grundgerüst (Registrierung, module.xml, db_schema.xml) wird in Block 1 trotzdem kurz eingegangen, bevor es an die UI-Components selbst geht
Kapitel dieser Serie
- 1 Was sind Magento 2 UI Components? Überblick über Grid, Formular und ihren Platz im System ~7 Min. Lesezeit
- 2 Voraussetzungen schaffen: eigenes Modul, db_schema.xml, Model/ResourceModel/Collection anlegen ~8 Min. Lesezeit
- 3 ACL und eigenen Menüpunkt im Admin-Backend einrichten ~6 Min. Lesezeit
- 4 listing.xml Grundgerüst: DataSource, Columns, Toolbar ~8 Min. Lesezeit
- 5 Die DataProvider-Klasse verstehen und anpassen ~8 Min. Lesezeit
- 6 Spalten-Typen im Detail: Text, Date, Select, Image, Actions-Spalte ~9 Min. Lesezeit
- 7 Filter und Sortierung im Grid konfigurieren ~7 Min. Lesezeit
- 8 Massenaktionen (Mass Actions): Aktivieren/Deaktivieren, Löschen ~8 Min. Lesezeit
- 9 form.xml Grundgerüst: Fieldsets, Felder, DataProvider ~9 Min. Lesezeit
- 10 Feldtypen im Detail: Text, Textarea, WYSIWYG, Select, Boolean, Image-Upload ~9 Min. Lesezeit
- 11 Validierung im Formular: client- und serverseitig ~7 Min. Lesezeit
- 12 Den Save-Controller richtig implementieren ~9 Min. Lesezeit
- 13 Formular-Modifier (Data/Meta Modifiers) für dynamisches Verhalten ~9 Min. Lesezeit
- 14 Projektvorstellung: eigenes Modul für Kundenstimmen, DB-Schema mit db_schema.xml ~9 Min. Lesezeit
- 15 Grid für Kundenstimmen bauen: Spalten, Filter, Massenaktionen ~9 Min. Lesezeit
- 16 Formular für Kundenstimmen bauen: Felder, Bild-Upload, Validierung ~10 Min. Lesezeit
- 17 Delete-Controller und Bestätigungsdialog implementieren ~8 Min. Lesezeit
- 18 Store-View-spezifische Sichtbarkeit im Formular ergänzen ~10 Min. Lesezeit
- 19 Custom-Renderer und Custom-Column-Klassen schreiben ~9 Min. Lesezeit
- 20 Inline-Edit im Grid aktivieren ~8 Min. Lesezeit
- 21 Abhängige/dynamisch sichtbare Felder je nach Auswahl (Modifier-Vertiefung) ~9 Min. Lesezeit
- 22 Eigene Toolbar-Buttons für die UI-Component bauen ~8 Min. Lesezeit
- 23 Export der Grid-Daten (CSV/Excel) ~6 Min. Lesezeit
- 24 Grid-Performance bei großen Datenmengen ~9 Min. Lesezeit
- 25 ACL im Detail: granulare Berechtigungen für Grid, Formular und Löschen getrennt vergeben ~9 Min. Lesezeit
- 26 Häufige Fehler und wie man sie debuggt: leeres Grid, Formular speichert nicht, fehlende Cache-Invalidierung ~9 Min. Lesezeit
- 27 Zusammenfassung: Spickzettel aller wichtigsten UI-Component-Patterns aus dieser Serie ~8 Min. Lesezeit