Tipps & Tricks - Frei gestaltete Tabelle - JavaScript

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".



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); /*Frei gestaltete Tabelle  shapedtable*/
	var recs = table.oUp.getRecords();

	var control; //Initialisierung der Variablen
	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); /*Frei gestaltete Tabelle  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; //Initialisierung der Variablen
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.

control.getHtml().css('backgroundColor', mycolor);

recs[i].getHtml().css('backgroundColor', mycolor);

Abschließend muss nur noch im CSS der Farbwert der Kontrolle zugeordnet werden. Soll die Tabellenzelle eingefärbt werden, nutzen wir control, für die komplette Zeile wird die Zuweisung für recs[i] verwendet.



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.