Ein ❤️-Brief an das Admin-Dashboard von Vendure

Besser als die meisten CMS-Backends

Nachdem ich seit mehr als einem Vierteljahrhundert mit vielen verschiedenen Content-Management-Systemen (CMS) gearbeitet habe, glaube ich, dass ich mir erlauben kann zu sagen: Keines der bestehenden CMS ist perfekt, aber alle kommen mit netten kleinen Features, die für bestimmte Anwendungsfälle wirklich toll sind. Viele dieser Features, die wir für unterschiedliche Websites immer wieder gebraucht haben, haben mit dem Admin-Backend zu tun, schliesslich soll dieses den Editoren helfen, ihre Inhalte einfach zu pflegen.

Von Vendure als E-Commerce-System sind meine Erwartungen ans Admin-Backend eigentlich deutlich niedriger, da seine Stärken im E-Commerce-Framework liegen sollten und nicht in der Benutzeroberfläche des Backends. Aber das neue Vendure-Dashboard kommt mit Features, die ich in fast allen bestehenden Content Management Systemen vermisse. Die meisten davon bauen auf der Erweiterbarkeit von Vendure auf. Das Admin-Dashboard folgt dem Kernkonzept von Vendure als Framework: Es liefert keine fixfertigen Lösungen für jeden Anwendungsfall, sondern die Grundlage, um diese Lösungen auf einfache Weise selbst anzupassen oder zu entwickeln.

Custom Listen- und Detailansichten

Eines dieser Features ist die Möglichkeit, eigene Listen- und Detailansichten für bestehende oder selbst definierte Entitäten zu erstellen. Alles, was man dafür braucht, sind zwei Komponenten, eine Listen- und eine Detailkomponente, welche die generischen Listen- und Detailkomponenten implementieren, die vom @vendure/dashboard-Package bereitgestellt werden. Da man diese Komponenten selbst erstellt, kann man sie vollständig an die eigenen Bedürfnisse anpassen, was bedeutet, dass es sehr einfach ist, Filter, Bulk-Actions, Workflow-Triggers oder was auch immer man sich vorstellt, zu diesen Ansichten hinzuzufügen.

Um diese eigenen Komponenten zu bauen, exportiert das Vendure-Dashboard nahezu alle seine internen Komponenten als wiederverwendbare Bausteine. Damit lässt sich praktisch alles umsetzen, was man sich vorstellt, indem man einfach die eingebauten Komponenten verwendet und sie so zusammensetzt, wie es der eigene Anwendungsfall erfordert. Darüber hinaus gibt es mehrere Hooks, die es sehr einfach machen, Daten aus der Datenbank abzurufen und in eigenen Komponenten zu verwenden.

Bestehende Ansichten erweitern

Ein weiteres Feature, welches ich mir in anderen Backend-Anwendungen immer gewünscht habe, ist die Möglichkeit, bestehende Ansichten um eigene Anforderungen zu erweitern. In Vendure kann man eigene Komponenten zu fast jedem Bereich des Backends hinzufügen. Wir nutzen das häufig, um Export- oder Import-Trigger für Entitäten wie Kunden oder Bestellungen hinzuzufügen.

Hier ist ein Beispiel, das zeigt, wie einfach es ist, einen Export-Button zur Aktionsleiste der Bestell-Detailansicht hinzuzufügen:

defineDashboardExtension({
  actionBarItems: [
    {
      id: "order-export-button",
      pageId: "order-detail",
      component: ExportOrderButton,
    },
  ],
});

Bestehende Komponenten überschreiben… WAT?!

Wahrscheinlich das beeindruckendste aller Features des Admin-Dashboards ist die Möglichkeit, Input-Komponenten für Felder von Core-Entitäten zu überschreiben (zB. ein bestehendes Feld in der Produkt-Detailansicht). Das bedeutet, man kann eigene Komponenten bauen und sie als Eingabefelder für bereits bestehende Felder von Core-Entitäten verwenden. Hat man beispielsweise spezifische Regeln für die Erstellung des URL-Slugs von Produkten, lässt sich ein eigenes Eingabefeld implementieren, das diese Regeln umsetzt und das Standard-Slug-Eingabefeld der Produktentität damit ersetzen.

Mit der folgenden Erweiterung lässt sich beispielsweise der Beschreibungstext auf einer Produktdetailseite, welcher normalerweise als Richtext-Editor angezeigt wird, mit einer einfachen Textarea ersetzen:

defineDashboardExtension({
  detailForms: [
    {
      pageId: "product-detail",
      inputs: [
        {
          blockId: "main-form",
          field: "description",
          component: TextareaInput,
        },
      ],
    },
  ],
});

Noch nicht überzeugt?

Es gibt noch eine Menge weiterer toller Features im Admin-Dashboard. Wenn ihr mehr darüber erfahren möchtet, meldet euch einfach bei uns. Wir freuen uns, von euren Ideen zu hören.