Eigene Darstellungsarten in Übersichten
Im Standard werden Datensätze in Übersichten immer in einem Datengrid dargestellt. Über die Listeneinstellungen (1 Bild unten) können jedoch auch weitere Layouts zur Darstellung konfiguriert werden.
Bereits konfigurierte Darstellungsarten werden dem Benutzer zur Auswahl angeboten (2), sofern die Listeneinstellungen entsprechend zugewiesen wurden.
Über den Reiter Eigene Darstellungsarten können beliebig viele Darstellungen konfiguriert werden. Mit Hilfe des Knopfes "+ Neue Listendarstellungsart hinzufügen" (A Bild unten) können neue Layouts angelegt werden.
Erklärung der Felder und Funktionen:
(A) Fügt eine neue Darstellungsart hinzu
(B) Gibt an, ob die Darstellungsart aktiv oder inaktiv ist. Inaktive Layouts werden dem Benutzer nicht zur Auswahl angeboten
(C) Markiert eine Darstellungsart als Standard. In diesem Fall wird diese dem Benutzer beim Öffnen der Übersicht direkt angezeigt
(D) Der Name der Darstellungsart. Dient dem Identifizieren des Layouts und wird dem Benutzer nicht angezeigt
(E) Der Layouttyp gibt an, wie das grundlegende Layout und damit auch die Daten aufgebaut sind. Hierbei werden folgende Typen unterschieden:
Liste- Liefert eine Liste von Datensätzen und bietet somit nur Listenvorlagen (I)
Gruppen - Liefert die Datensätze kategorisiert in Gruppen. Es wird ein zusätzliches Feld zum Auswählen des Gruppierungsfeldes eingeblendet
(F) Ein Bild/Icon, welches für den Benutzer zur Auswahl sichtbar dargestellt wird (eine Vorschau wird auch links in der Zeile dargestellt
(G) Ein Hinweis oder eine Beschriftung, welche dem Benutzer als Tooltip der Layoutauswahl angezeigt wird
(H) Ruft den Designer des Layouts auf (Formulardesigner). Dieser Knopf wird erst aktiviert, wenn die Listeneinstellungen bereits mit dem angelegten Layout gespeichert wurden
(I) Bietet Layoutvorlagen (z.B. Kacheln), abhängig vom ausgewählten Layout Typ (E). Nach dem Auswählen einer Vorlage wird sofort der Editiermodus gestartet
(J) Löscht die Darstellungsart
Tipp: Durch Drag&Drop des Symbols am Zeilenanfang können die Darstellungsarten entsprechend umsortiert werden. Die Reihenfolge dieser Liste entspricht auch der Reihenfolge der Auswahlmöglichkeiten für den Benutzer.
Das Layout gestalten
Mit Hilfe des Editors (Knopf H im Bild oben) kann das Layout und die Felder der Datensätze konfiguriert werden.
Abhängig davon, welcher Layouttyp (E) gewählt wurde, wird das Grundlayout der Maske mit gewissen Datenfeldern bereits angezeigt. Diese Datenfelder entsprechen natürlich der Datensatzstruktur der Übersicht. Das Feld "items" beinhaltet beispielsweise sämtliche Eintragstupel der Übersicht. Auch eine Logik zum Darstellen einer Nachricht "Keine Einträge" ist bereits vorhanden.
Hinweis: Die Übersicht darf in allen Belangen frei gestaltet werden, jedoch ist darauf zu achten, dass oftmals viele Elemente dargestellt werden und das Layout der Einträge entsprechend performant gehalten werden soltle.
Durch das Laden einer Vorlage (I), werden entsprechend detaillierte Grundlayouts vorgeladen. Im Bild unten wurde der Layouttyp "Liste" mit der Vorlage "Kacheln" geladen.
In der Vorlage "Kacheln" steht bereits ein Kachelbereich (1) zur Verfügung, in welcher die Darstellung eines Datensatzes konfiguriert werden kann.
Als vorgefertigte Elemente stehen, in der Rubrik "Projektionen" (2), sämtliche konfigurierte Spalten zur Verfügung. Die Datenfelder dieser Elemente entsprechen folgerichtig den Datenfeldern der entsprechenden Übersichtspalten.
Um die gewünschten Änderungen für den Benutzer sichtbar zu machen, muss das Formular veröffentlicht werden (Menüband: Veröffentlichen)
Beispiel: Ein Kachel Layout für eine Sendungsübersicht
Es wurden für das Beispiel lediglich die vier Felder ID, Sendungstyp, Änderungsdatum und Arbeitsstatus in die vorgefertigte Kachel gezogen.
Dem Änderungsdatum wurde zusätzlich eine Berechnungsfunktion "Geändert: $input" hinterlegt, was dafür sorgt, dass dem eigentlichen Datum ein "Geändert: " vorangestellt wird.
Die Schrift des ID Labels wurde zusätzlich auf "fett" und die Farben aller anderen Labels auf "secondaryColor" gestellt.
Nach dem Veröffentlichen steht die Darstellungsart in der Übersicht zur Verfügung.
Tipp: Über den Knopf "Filter und Sortierung ..." kann der Benutzer die Einträge wie gehabt filtern und sortieren. Dabei stehen sämtliche konfigurierte Spalten zur Verfügung.
Kachelgruppen
Wird der Darstellungstyp "Kachelgruppen" gewählt, kann zusätzlich eine Spalte für die Gruppierung festgelegt werden.
Zusätzlich kann die Sortierung der entsehenden Gruppen über das Sortiersymbol festgelegt werden.
Sortierung von Kachelgruppen
Standardmäßig werden Kategorien alphabetisch aufsteigend sortiert.
Es werden zwei Berechnungsausdrücke eingeblendet. Der erste Ausdruck (A) ermittelt das Sortierkriterium (den Wert nach dem sortiert werden soll),
der zweite (B) ermittelt wie sortiert werden soll.
Sortierwert-Ausdruck (A):
Wird für jede Gruppe ausgeführt und bekommt ein Objekt als Eingabewert ($input), welches folgende Felder beinhaltet:
group - Der Wert der Gruppe (Wert des Feldes nach dem gruppiert wurde z.B. ein Arbeitsstatus)
groupName - Der lokalisierte Name der Gruppe
items - Die einzelnen Datensätze als Liste
count - Die Anzahl an Datensätzen
Der Rückgabewert des Sortierwert-Ausdrucks (A) wird in ein dediziertes Datenfeld zum Vergleich für den Sortier-Ausdruck (B) geschrieben (siehe unten).
Sortier-Ausdruck (B):
Wird zum Vergleichen zweier Gruppen aufgerufen, welche jeweils als Datenfelder a und b zur Verfügung stehen, und gibt einen numerischen Wert zurück.
Für den Rückgabewert r gilt:
r < 0 - a wird hinter b einsortiert
r = 0 - a und b sind gleichwertig und werden nicht umsortiert
r > 0 - a wird vor b einsortiert
Der Sortier-Ausdruck wird für die Gruppen dann so oft aufgerufen, bis keine Gruppe mehr den Platz tauschen musste (bis alle Aufrufe 0 zurückliefern).
Innerhalb des Sortier-Ausdrucks wird auf die Informationen von Gruppe a über das Datenfeld a und auf die Informationen von Gruppe b über das Datenfeld b zugegriffen.
Beide Datenfelder beinhalten Objekte, welche die folgenden Felder beinhalten:
group - Der Wert der Gruppe (Wert des Feldes nach dem gruppiert wurde z.B. ein Arbeitsstatus)
groupName - Der lokalisierte Name der Gruppe
count - Die Anzahl an Datensätzen
value - Der von Sortierwert-Ausdruck (A) berechnete Wert der Gruppe
Beispiel 1: Sortieren nach Anzahl Einträgen
|
Sortierwert-Ausdruck |
leer |
|
Sortier-Ausdruck |
$calc( {a.count} - {b.count} ) |
|
Bedeutung |
Gruppen mit höherer Anzahl Einträgen werden nach vorne und Gruppen mit einer geringeren Anzahl nach hinten sortiert |
Beispiel 2: Statische Reihenfolge (am Beispiel Arbeitsstatus)
|
Sortierwert-Ausdruck |
$trim( |
|
Sortier-Ausdruck |
$calc( {a.value} - {b.value} ) |
|
Bedeutung |
Im Sortierwert-Ausdruck werden zunächst Arbeitsstatus in konstante Zahlen übersetzt (die gewünschte Reihenfolge). |
Beispiel für ein Kachelgruppen Layout für Sendungen mit Gruppenfeld "Arbeitsstatus"
Für das Beispiel wurden lediglich die Felder ID, Sendungstyp, Sendungsdatum und Arbeitsstatus in die Kachel gezogen.
Die Schriftfarbe für alle Label Elemente wurde auf "secondaryColor" und für das ID Element zusätzlich auf "fett" gestellt.
Besonderheit: Der Benutzer, welcher die Sendung zuletzt bearbeitet hat, soll als Bild in der rechten oberen Kachelecke dargestellt werden.
Hierzu wurde das Benutzerfeld "avatarURL" über eine Subselektprojektion im Reiter "Zusätzliche Projektionen" der "Zuletzt geändert von" Spalte hinzugefügt (Spalteneinstellungen im Übergeordneten Dialog).
Dieses Feld steht dann nicht über eine separate Spalte zur Verfügung, ist aber im Datensatztupel der Sendung zugreifbar.
Somit ist das Datenfeld des Avatar Elements (Bild/Icon) gleich "avatarURL".
Nach dem Veröffentlichen steht die Darstellungsart in der Übersicht zur Verfügung.
Datenstruktur der Layouttypen
Abhängig vom eingestellten Layout Typ werden die Maskendaten entsprechend vorbereitet.
Eingangsdaten Layouttyp "Liste"
Ein Client Objekt mit den folgenden Datenfeldern:
items - Enthält die Datensatztupel der Übersicht als Liste
count - Beinhaltet die Anzahl an Datensatztupeln
Eingangsdaten Layouttyp "Gruppen"
Eine Liste, welche ein Client Objekt pro Gruppe beinhaltet.
Die Datenfelder eines Gruppenobjektes sind:
group Der Wert des Gruppenfeldes
groupName Der Wert des Gruppenfeldes als String (ggf. lokalisierter Wert z.B. bei Dynamische Aufzählungen)
items Enhält die Datensatztupel der Gruppe
count Beinhaltet die Gesamtzahl an Datensatztupeln in der Gruppe (unabhängig vom Paging)
Einträge für die Übersicht auswählbar machen
Innerhalb eines Übersicht Layout-Editors wird für Elementcontainer, welche wiederholbar sind (direktes Kind eines Wiederholenden Element Containers) in der Eigenschaftenrubrik "Allgemein" eine neue Option eingeblendet:
Die Option "Ist Listeneintrag" legt fest, dass dieser Container einen Datensatz aus der Übersicht repräsentiert.
Das schaltet das Selektieren eines Items für diesen Container frei. Die Elementdaten des Containers werden dabei als Datenkontextdaten interpretiert und sollten daher kompatibel zu den Tupeln aus der Übersicht sein.
Dadurch ist der volle Umfang des Menübandes auch für freie Layouts zugänglich und steuerbar.
Zusätzlich wird den Elementen sämtlicher ausgewählter Einträge die CSS Klasse "selected" gesetzt, welche zum stilistischen Feinschliff der freien Übersicht verwendet werden kann.
Achtung: Für die korrekte Einstellung ist der Konfigurator verantwortlich. Es werden keinerlei Plausibilitätsprüfungen unternommen, noch wird der Konfigurator daran gehindert mehrere oder falsche selektierbare Listenitems zu konfigurieren.
Nützliche CSS Klassen zum Gestalten von Übersichten
|
Klassenname |
Wirkung |
|
pro-customlist-tile |
Stellt einen Elementcontainer als Kachel dar |
|
pro-customlist-tile-layout |
Elementcontainer, welcher ungruppierte Kacheln beinhaltet |
|
pro-customlist-tilegroups-container |
Elementcontainer, welcher Gruppen beinhaltet |
|
pro-customlist-tilegroup |
Klass für den Container einer Gruppe |
|
pro-customlist-tilegroup-head |
Beschreibt den Kopf einer Gruppe. Im Standard keine Auswirkung |
|
pro-customlist-tilegroup-items |
Klasse für den Container, welcher Gruppeneinträge beinhaltet (Scrollbereich) |