flexTable - Informationen strukturieren und präsentieren

flexTable - leistungsfähige Tabellen

Mit Tabellen lassen sich Informationen gut gegliedert und übersichtlich darstellen. Nicht immer ist es jedoch sinnvoll alle Informationen in ein Gitter zu quetschen, die Übersicht geht dann rasch verloren.

Ein Nachteil von statischen Tabellen im HTML Format, wie sie in Content Management Systemen verwendet werden, ist ihre aufwändige und nicht immer einfache Handhabung.

flexTable  ist ein Addon für WebsiteBaker das sich für die strukturierte Darstellung von Informationen anbietet. Im Unterschied zu starren Tabellen bietet flexTable ein paar wesentliche Vorteile:

  • jeder Datensatz kann einzeln angelegt und bearbeitet werden
  • die Tabelle wird dynamisch zur Laufzeit erzeugt und angezeigt
  • Spalten lassen sich einfach per Drag and Drop verschieben
  • in der Tabelle werden die wesentlichen Informationen dargestellt,
  • Details können durch Klick für jeden einzelnen Datensatz angezeigt werden
  • in der Tabelle können die Spalten sortiert und gefiltert werden
  • die Filter werden automatisch angelegt
  • die Gestaltung der Detailseiten ist flexibel und kann über Presets gesteuert werden

Die folgende Tabelle zeigt die grundlegenden  Fähigkeiten von flexTable. Spielen Sie mit den Sortier- und Filterfunktionen und schauen Sie sich die Detailseiten an:

Land Park Maßnahme Art der Maßnahme Verwaltung
BE Pfaueninsel Verkehrssicherheit bei Altbäumen durch natürliche Bruchstellen PM Stiftung Preußische Schlösser und Gärten Berlin-Brandenburg
BE Pfaueninsel Erhaltung von Magerrasen bei der Neuanlage von Wegen durch Umpflanzen von Grassoden BM Stiftung Preußische Schlösser und Gärten Berlin-Brandenburg
BE Schlossgarten Charlottenburg Erhaltung von Altbäumen einer historischen Lindenallee durch Absetzen der restlichen Altbäume und ergänzende Neupflanzungen PM Stiftung Preußische Schlösser und Gärten Berlin-Brandenburg
BE Schlosspark Buch Erstellung eines Baumkatasters mit Integration der Artenschutzinformationen und regelmäßigen Abstimmungen der Pflegearbeiten KP Bezirksamt Pankow von Berlin
BY Bamberger Hain Erhaltung wertvoller Altbäume bei Durchführung der Verkehrssicherheitspflicht durch Wegesperrung LM Stadt Bamberg, Grünflächenamt
MV Schlosspark Ludwigslust Erstellung eines Managementplans für das FFH-Gebiet KP Betrieb für Bau und Liegenschaften MV (BBL-MV), Verwaltung der Staatlichen Schlösser und Gärten
MV Schlosspark Neustrelitz Sanierung der Tempelallee, Standortverbesserung, Baumpflege, Neupflanzung PM Betrieb für Bau und Liegenschaften MV (BBL-MV), Verwaltung der Staatlichen Schlösser und Gärten

flexTable wird als Admin-Tool installiert, die Tabellen werden an der gewünschten Stelle mit einem Droplet eingebunden.

  • flexTable - Tabelle definieren und Spalten anlegen
  • flexTable - Einträge bearbeiten und ergänzen
  • flexTable - Ãœbersicht über die Tabelle im Backend

flexTable befindet sich noch im Aufbau und Beta-Test - nutzen Sie bitte das LEPTON Support Forum und Facebook um weitere Informationen zu flexTable sowie Support zu erhalten!

Download von flexTable.

Die ersten Schritte mit flexTable

flexTable installiert sich als Admin-Tool, Sie erreichen das Modul im WebsiteBaker Backend über Admin-Tools ⇒ flexTable.

Die Liste der Tabellen ist zunächst noch leer, mit Bearbeiten legen Sie eine neue Tabelle an:

  1. Legen einen eindeutigen Bezeichner für die Tabelle fest. Dieser Bezeichner dient dazu die Tabelle zu identifizieren, Sie benötigen den Bezeichner später um die Tabelle an der gewünschten Stelle anzeigen zu lassen.
  2. Geben Sie eine kurze Beschreibung der Aufgabe bzw. Funktion dieser Tabelle ein.
  3. Wählen Sie bei Datenfeld hinzufügen das erste Datenfeld aus. Weisen Sie dem Datenfeld dabei den gewünschten Datentyp zu - flexTable untertstützt z.Zt. die Datentypen Ganzzahl (Integer), Fließkomma (Float), Zeichenkette (bis zu 255 Zeichen), Datum/Zeit, Text (bis zu 216-1 Zeichen), Media Link und HTML Text. Klicken Sie auf Übernehmen.
  4. Legen Sie für das neu eingefügte Datenfeld einen eindeutigen Bezeichner fest. Über diesen Bezeichner können Sie später im Template direkt auf dieses Datenfeld zugreifen, darüber hinaus wird dieser Bezeichner für die automatische Definition von CSS Klassen für die Spalten in der Tabelle verwendet.
  5. Legen Sie für das neu eingefügte Datenfeld eine Kopfzeile fest - diese wird in der Kopfzeile der Tabelle als Spaltentitel verwendet.
  6. Legen Sie für das neu eingefügte Datenfeld eine Überschrift fest - diese wird auf der Detailseite als (ausführlichere) Überschrift für dieses Datenfeld verwendet.
  7. Durch Setzen des Schalters Anzeige in der Tabelle können Sie steuern, ob dieses Datenfeld in der Tabelle als Spalte angezeigt wird oder nicht. Sie können so festlegen, welche Datenfelder nur auf der Detailseite angezeigt werden sollen.
  8. Wiederholen Sie die Schritte 3. - 7. bis Sie alle Datenfelder der neuen Tabelle definiert haben.
  9. Legen Sie die Reihenfolge der Datenfelder durch Drag and Drop fest. Das oberste Datenfeld steht in der Tabelle als Spalte ganz links.
  10. Unterhalb der Definition der Datenfelder finden Sie jetzt die Eingabefelder für die einzelnen Datensätze.
  11. Fügen Sie neue Datensätze ein und füllen Sie flexTable mit Daten...
  12. Sie sehen unterhalb der Eingabefelder eine Tabelle mit den Datensätzen. Um einen Datensatz zu bearbeiten klicken Sie links in der Zeile auf Edit, um einen Datensatz zu löschen setzen Sie rechts ein Häkchen und klicken Sie dann auf Übernehmen.

flexTable installiert automatisch das Droplet [[flex_table]]. Fügen Sie dieses Droplet auf der Seite auf der die neue Tabelle angezeigt werden soll an der gewünschten Stelle ein.

Das Droplet [[flex_table]] unterstützt die folgenden Parameter:

name Der Bezeichner der Tabelle, die angezeigt werden soll
css Die frontend.css aus dem Verzeichnis /modules/flex_table laden. Vorgabe ist true, mit false schalten Sie css aus.
Damit die mitgelieferte frontend.css geladen werden kann muss DropletsExtension aktiv sein und die Funktion print_page_head() durch das Template Ihrer Website aufgerufen werden.
preset flexTable ermöglicht die Verwendung von Presets, grundlegende Informationen hierzu finden sie unter kitForm - Formulare individuell anpassen und mit Presets arbeiten.

Â

Angenommen Ihre Tabelle hat den Bezeichner meine_tabelle und Sie möchten das Preset 101 verwenden, dann sieht der Code für die Anzeige dieser Tabelle so aus:


 
[[flex_table?name=meine_tabelle&preset=101]]
 

Helfen Sie mit diese Dokumentation zu erweitern und flexTable stetig zu verbessern!

Ralf Hertsch