Tips & Tricks - Freely designed table - JavaScript

The JavaScript API for freely designed tables offers functions to read values from free tables or to control the appearance of free tables depending on values. Using Velocity, modifications to free layout tables can be performed at the time of page rendering. Because these modifications take place on the server side, they should be chosen over modifications via JavaScript for security reasons. For some scenarios, however, manipulation with JavaScript (client-side) is more suitable, e.g. if a clearer display is to be achieved and there is no security relevance. You can find the JavaScript API documentation here.

You can download the sample application here and import it as usual. Activate the expert options so that all dialogs mentioned in this example are accessible. Background knowledge in JavaScript and application development are an advantage for this workshop.

If you open the application in the "Applications" module, you will find the "Numerical value" input field on the input page. The table row should have a different color based on the numeric value.

There is also a view page with the "Title" and "Numerical value" view fields. The "ButtonContainer" style class is assigned to the grouping that contains the two fields on the "View" tab. That the color appears correctly cannot be guaranteed with other style classes.

The "All entries" page contains the freely designed table into which the view page is integrated. The following JavaScript has been defined for this table:

            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)
        

This line creates a function with the name "colorTable", which takes the GUID of the table and the GUID of the numerical value view field as parameters - here from the function call, which we will formulate later.

            var table = getElement(tableGUID); /*Free layout table  shapedtable*/
        

The table is assigned a variable here.

            var recs = table.oUp.getRecords();
        

The single data records in the table can be accessed with getRecords(). All table rows are stored in the recs array.

            var control; //Initialize variables
var myvalue;
var hvalue;
var mycolor;

        

The variables used in the loop are initialized here.

            for (var i=0;i<recs.length;i++)
        

The array values are read in a loop. The variable ""i"" means the loop iterates over the lines until it reaches the length of the array.

            control = recs[i].getControl(fieldGUID);
        

The value of an application element can be read by passing the variable fieldGUID, which is defined as a parameter for the function in this example, to the getControl() method and executing it on the current data set.

            myvalue = getFloatByLocalString(control.getValue());
        

As the value of the control can be displayed with a decimal point or decimal comma depending on the portal setting, the getFloatByLocalString() method of the HelperMain class should be used to read the value to ensure that a numerical value that JavaScript can understand is delivered.

            hvalue = Math.round(myvalue / 100 * 120);
mycolor = 'hsl('+hvalue+',100%,50%)';

        

To change the color of the cell based on the numeric value, the HSL color model is used because by changing a single value - the grade of the color value - a simple progression from red via yellow to green can be created. The H value can have a value between 0 and 360 in the HSL color model. The values may not exceed 120 for the color green. For this, the numeric value is divided by the maximum value of the numeric value edit field - in this example 100 - and the result is multiplied by 120. Because the HSL color model only understands whole values, the determined value is rounded. Afterwards, the entire color value can be stored in the mycolor variable. The saturation is set to 100% and the lightness to 50%. Finally, the color value must be assigned to the control in the CSS.

Color in table cell

The following line of script colors in the cell that contains the numeric value:

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

Color in table cell

If you want the entire line to be colored, please replace the script line

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

with this line of script

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

Assign script

The script is assigned to the onload event of the table. The GUIDs of the free layout table and the numeric value view field must be stated in the function call (in the same order of the function parameters in the script) in single quotation marks and separated by a comma. The GUIDs can be identified with the F4 key after the respective element has been selected on the workspace.