Das JavaScript-API für frei gestaltete Tabellen bietet Funktionen, um Werte aus freien Tabellen auszulesen oder das Aussehen von freien Tabellen in Abhängigkeit von Datenwerten zu steuern. Mit Velocity können an frei gestalteten Tabellen sehr komfortabel Modifikationen zum Zeitpunkt des Renderns der Seite vorgenommen werden. Da diese Modifikationen serverseitig stattfinden, sollten sie aus Sicherheitsaspekten immer Modifikationen per JavaScript vorgezogen werden. Für manche Szenarien eignet sich allerdings eine Manipulation mit JavaScript (clientseitig) mehr, z.B. wenn eine übersichtlichere Darstellung erreicht werden soll und keine Sicherheitsrelevanz besteht. Die JavaScript-API-Dokumentation finden Sie hier.
Die Beispielapplikation können Sie hier herunterladen. Entpacken Sie die Downloaddatei. Anschließend können Sie die enthaltene Datei "tipps-tricks-frei-gestaltete-tabelle-javascript.lax" wie gewohnt importieren. Aktivieren Sie die Experten-Optionen, damit alle Dialoge, die in diesem Beispiel genannt werden, erreichbar sind. Kenntnisse in JavaScript und Applikationsentwicklung sind bei diesem Beitrag von Vorteil.
Wenn Sie die Applikation im Modul Applikationen öffnen, finden Sie auf der Eingabeseite das Eingabefeld "Zahlenwert". Die Tabellenzelle soll abhängig vom Zahlenwert eingefärbt werden.
Außerdem gibt es eine Ansichtsseite mit den Ansichtsfeldern "Titel" und "Zahlenwert". Der Gruppierung, die die beiden Felder enthält, ist auf dem Reiter "Ansicht" die Styleklasse "ButtonContainer" zugeordnet. Mit anderen Styleklassen ist die korrekte Darstellung der Farbe nicht gewährleistet.
Auf der Seite "Alle Einträge" befindet sich die frei gestaltete Tabelle, in die die Ansichtsseite eingebunden ist. Bei dieser Tabelle ist das folgende JavaScript eingetragen:
function colorTable(tableGUID, fieldGUID)
{
var table = getElement(tableGUID); /*Free layout table shapedtable*/
var recs = table.oUp.getRecords();
var control; //Initialize variables
var myvalue;
var hvalue;
var mycolor;
for (var i=0;i<recs.length;i++)
{
control = recs[i].getControl(fieldGUID);
myvalue = getFloatByLocalString(control.getValue());
hvalue = Math.round(myvalue / 100 * 120);
mycolor = 'hsl('+hvalue+',100%,50%)';
control.getHtml().css('backgroundColor', mycolor);
}
return true;
}
function colorTable(tableGUID, fieldGUID)Mit dieser Zeile wird eine Funktion mit dem Namen "colorTable" erstellt, die als Parameter die GUID der Tabelle und die GUID des Zahlenwert-Ansichtsfeldes - hier aus dem Aufruf der Funktion, den wir später noch formulieren werden - entgegennimmt.
var table = getElement(tableGUID); /*Free layout table shapedtable*/Hier wird die Tabelle einer Variablen zugeordnet.
var recs = table.oUp.getRecords();Mit getRecords() kann auf die einzelnen Datensätze der Tabelle zugegriffen werden. Im recs-Array sind alle Tabellenzeilen abgelegt.
var control; //Initialize variables
var myvalue;
var hvalue;
var mycolor;
Hier werden Variablen, die in der Schleife benutzt werden sollen, initialisiert.
for (var i=0;i<recs.length;i++)Die Array-Werte werden in einer Schleife ausgelesen. Mit der Variablen i wird durch die Zeilen iteriert, bis die Länge des Arrays erreicht ist.
control = recs[i].getControl(fieldGUID);Der Wert eines Applikations-Elements kann ausgelesen werden, indem die Variable fieldGUID, die in diesem Beispiel für die Funktion als Parameter definiert ist, an die Methode getControl() übergeben und diese auf dem aktuellen Datensatz ausgeführt wird.
myvalue = getFloatByLocalString(control.getValue());Da der Wert der Kontrolle je nach Portaleinstellung mit einem Dezimalpunkt oder Dezimalkomma dargestellt sein kann, sollte zum Auslesen des Wertes die Methode getFloatByLocalString() der HelperMain-Klasse genutzt werden, um sicher zu gehen, dass ein für JavaScript verständlicher Zahlenwert geliefert wird.
hvalue = Math.round(myvalue / 100 * 120);
mycolor = 'hsl('+hvalue+',100%,50%)';
Um abhängig vom Zahlenwert die Zelle einzufärben, wird der HSL-Farbraum herangezogen, da hier durch die Veränderung eines einzigen Wertes – dem Winkel des Farbwertes – ein einfacher Verlauf von Rot über Gelb zu Grün erzeugt werden kann. Der H-Wert kann im HSL-Farbraum Werte von 0 bis 360 annehmen. Für die Farbe Grün dürfen die Werte maximal 120 erreichen. Dafür wird der Zahlenwert durch den Maximal-Wert des Zahlenwert-Eingabefeldes - in diesem Beispiel 100 – geteilt und das Ergebnis mit 120 multipliziert. Da das HSL-System nur ganze Werte versteht, wird der ermittelte Wert gerundet. Danach kann der komplette Farbwert in der mycolor-Variable abgelegt werden. Die Sättigung wird auf 100%, die Lightness auf 50% gesetzt. Abschließend muss nur noch im CSS der Farbwert der Kontrolle zugeordnet werden.
Tabellenzelle einfärben
Mit der folgenden Skriptzeile wird die Zelle, die den Zahlenwert enthält, eingefärbt:
control.getHtml().css('backgroundColor', mycolor);Tabellenzeile einfärben
Wenn die komplette Zeile eingefärbt werden soll, ersetzen Sie bitte die Skriptzeile
control.getHtml().css('backgroundColor', mycolor);mit der Skriptzeile
recs[i].getHtml().css('backgroundColor', mycolor);
Skript zuordnen
Das Skript wird dem onload-Event der Tabelle zugeordnet. Die GUIDs der freien Tabelle des Zahlenwert-Ansichtsfeldes müssen (entsprechend der Reihenfolge der Funktionsparameter im Skript) in Hochkommas eingeschlossen und mit Komma getrennt hier im Funktionsaufruf angegeben werden. Die GUIDs können mit der Taste F4 ermittelt werden, wenn das jeweilige Element auf der Arbeitsfläche markiert ist.
Senden Sie uns eine E-Mail