Blizz Logo for Drupal Thunder CMS

Tabellen-Magic für Drupal . Blizz Table Field

von Ralf Hendel
am

Das erste Modul aus der "Blizz"-Familie ist ein Tabellen-Feld, mit dem sich Tabellen leichtgewichtig erstellen und bearbeiten lassen. "Blizz" Tabellen lassen sich per rechter Maustaste konfigurieren und bieten damit eine vergleichbare Funktionalität im Browser, wie man sie von Libre Office, Mac Numbers oder Microsoft Excel her kennt.

Herausforderung Tabellen

Innerhalb von Inhalten lassen sich Tabellen auf verschiedene Weisen einfügen. Die verschiedenen Implementierungen ziehen unterschiedliche Vor- und Nachteile nach sich. Insofern ist es wichtig, die jeweiligen Kundenanforderungen gut zu verstehen.

Die einfachste Möglichkeit besteht darin, Tabellen mit einem WYSIWYG-Editor zu erstellen. Dies bietet dem Redakteur größtmögliche Flexibilität in der Gestaltung, wenngleich die Erstellung nicht sehr komfortabel ist. Beispielsweise lassen sich Spaltenbreiten individuell im Editor festlegen und – so er es mag – hat der Kunde die Möglichkeit, die Inhalte eines jeden Feldes per WYSIWYG-Editor bearbeiten zu können.

Um die in aller Regel sehr hochwertige Gestaltung der Websites unserer Kunden zu schützen, beschränken wir die Funktionen eines WYSIWYG-Editors üblicherweise auf einen minimalen Umfang: Redakteuren stehen häufig nur die Funktionen Bold / Italic / Links / Aufzählungen / Textformat und die Quellcode-Ansicht zur Verfügung. Schaltflächen zum Einfügen und Bearbeiten von Tabellen blenden wir üblicherweise aus dem WYSIWYG-Editor aus.

Just another table field?

Die bestehenden Drupal Module für Tabellen haben uns nicht überzeugen können. Insofern haben wir ein neues Modul "Blizz Table Field" entwickelt. Darin haben wir den Ansatz verfolgt, dem Redakteur ein leichtgewichtiges Tabellenfeld zur Verfügung zu stellen, welches folgende Anforderungen adressiert:

  • Die Erstellung und Bearbeitung von Tabellen soll komfortabel und intuitiv erfolgen.
  • Funktionen wie das Hinzufügen oder Löschen von Zeilen bzw. Spalten sollen bequem per rechter Maustaste möglich sein.
  • Inhalte sollen sich per Copy / Paste aus herkömmlichen Tabellenverarbeitungs-Programmen einfügen lassen.

In "Blizz Table Field" werden die Tabelleninhalte serialisiert in einem herkömmlichen Textfeld gespeichert. Per Javascript werden die Inhalte im Frontend tabellarisch dargestellt und im redaktionellen Backend mit den entsprechenden Funktionen zur Unterstützung der rechten Maustaste angereichert. Der Redakteur bekommt die serialisiert gespeicherten Inhalte selberständlich zu keinem Zeitpunkt zu Gesicht.

Die Funktionalität haben wir durch Einbindung der beiden externen Bibliotheken "Handsontable" und "PapaParse" erreicht.

Eine Bearbeitung der Inhalte per WYSIWYG ist nicht vorgesehen.

Screenshot des Blizz Table-Fields: Ergebnisse der Frauen beim Ironman Hawaii 2017 (Quelle tri-mag.de)
Der Screenshot zeigt die Ergebnisse der Frauen beim Ironman Hawaii 2017 (Quelle: https://tri-mag.de/szene/ergebnisse-frauen-143411)

Wiederverwendbare Tabellen für Thunder

Dass sich die Tabelleninhalte in einem eigenen Feld befinden, stellt außerdem noch einen weiteren Vorteil dar: Mit dem Feld lässt sich eine Paragraphs-Komponente für Tabellen bauen, die wiederverwendbar sein können. Ebenso wie andere multimediale Inhalte – typischerweise Bilder und Videos – können Redakteure nun auch Tabellen als wiederverwendbare Assets verwenden.

Beispielsweise veröffentlichen Redakteure beim Triathlon Magazin häufig aktuelle Rennberichte. Die umfangreichen Ergebnistabellen können sie an verschiedenen Stellen ausspielen.

Auf diese Weise passt die Komponente nahtlos in Thunder ein, dessen Content-Modell auf Paragraphs basiert.

Download und Installation

Die Installation erfolgt entweder per Composer

composer require drupal/blizz_table_field