iSeries EGL

All things EGL for the iSeries / i5 / Power System

Archive for the ‘EGL DataGrid Foreground and Background Colors’ Category

EGL Tables – How to Control Text and Background Colors

leave a comment »


This post illustrates how to control the foreground (text) and background (cell) colors of an EGL DataGrid component. For reference material, visit IBM’s documentation for DataGrid here.


The DataGrid

Usually, table entries originate from data contained in files in the database. Each row of the table being displayed correspond to data elements of each record in the file. Shown below is an example of such a DataGrid designed to contain information about jobs running on the iSeries.

An EGL DataGrid with Defined Columns (Click to enlarge)

Each row of the table represents a single instance of a SQLRecord EGL type called SysJobsRecord the definition of which can be seen in Fig.1, below. The SQLRecord type mirrors the attributes of the physical file residing in the iSeries DB.

record SysJobsRecord type SQLRecord {tableNames = [["SYSJOBSP"] ], fieldsMatchColumns = yes}

	jbname string          	{column="JBNAME", maxLen=10};
	jbuser string          	{column="JBUSER", maxLen=10};
	jbnumber string        	{column="JBNUMBER", maxLen=6};
	jbijobid string        	{column="JBIJOBID", maxLen=16};
	jbstatus string        	{column="JBSTATUS", maxLen=10};
	jbtype string          	{column="JBTYPE", maxLen=1};
	jbsubtyp string        	{column="JBSUBTYP", maxLen=1};
	jbsbsnam string        	{column="JBSBSNAM", maxLen=10};
	jbsbslib string        	{column="JBSBSLIB", maxLen=10};
	jbpercent num(5,1)     	{column="JBPERCENT"};
	jbsamplets timeStamp("yyyyMMddHHmmssffffff")	{column="JBSAMPLETS"};
	jbsampledt num(8)      	{column="JBSAMPLEDT"};
	jbsampletm num(6)      	{column="JBSAMPLETM"};

Fig.1 – SysJobsRecord.egl

The DataGrid itself is defined using the following EGL code shown is Fig.2, below.

    sysJobsRecord SysJobsRecord[];
    sysJobsDataGrid DataGrid{  layoutData = new GridLayoutData{row = 3, column = 1,
    	verticalAlignment = GridLayoutLib.VALIGN_TOP}, 
    	behaviors = [sysJobsDataGridCellBehavior],
    	columns =[
                    new DataGridColumn{name = "jbname", displayName = "Name", width = 80},
                    new DataGridColumn{name = "jbuser", displayName = "User", width = 80},
                    new DataGridColumn{name = "jbnumber", displayName = "Number", width = 70},
                    new DataGridColumn{name = "jbstatus", displayName = "Status", width = 80},
                    new DataGridColumn{name = "jbtype", displayName = "Type", width = 60},
                    new DataGridColumn{name = "jbsubtyp", displayName = "SubType", width = 70},
                    new DataGridColumn{name = "jbsbsnam", displayName = "Subsystem Name", width = 120},
                    new DataGridColumn{name = "jbsbslib", displayName = "Subsystem Library", width = 130},
                    new DataGridColumn{name = "jbpercent", displayName = "CPU Used", width = 80}
            ], pageSize = 7, data = sysJobsRecord as any[], borderColor = "Black", borderStyle = "solid", borderWidth = 1};
    TextLabel TextLabel{layoutData = new GridLayoutData{row = 1, column = 1}, text = "Jobs with Message Wait Status", fontSize = "20"};

Fig.2 – EGL DataGrid Definition


This entry, sysJobsRecord SysJobsRecord[]; defines an array of type SysJobsRecord, shown in Fig.1, above. The next line shows its reference on the DataGrid definition and represents the source of the data to be displayed. The data in the array was placed there when the EGL-SQL statement was executed against the file containing the data. It’s the equivalent to a SQL result-set.

Controlling Foreground and Background Colors

For each record read from the array, DataGrid can execute EGL functions which can act upon the DataGrid’s cells of each row. For example, in the DataGrid shown in Fig.2 above, the behaviors = [sysJobsDataGridCellBehavior], directive tells the DataGrid to execute the sysJobsDataGridCellBehavior function for each row loaded.

This is the sysJobsDataGridCellBehavior function.

    function sysJobsDataGridCellBehavior (grid DataGrid in, cell Widget in, rowData ANY in, rowNumber INT in, column DataGridColumn in) 
        if ( (rowData.jbstatus as string == "RUN")  )
            cell.backgroundColor = "Green";
            cell.color = "White";
        if ( (rowData.jbstatus as string == "MSGW")  or
           (rowData.jbstatus as string == "LCKW") )
            cell.backgroundColor = "Red";
            cell.color = "Black";

Fig.3 – The Function sysJobsDataGridCellBehavior

Once loaded, the DataGrid looks like this.

DataGrid Showing Foreground and Background Colors. (Click to enlarge)


This post showed how an EGL DataGrid uses an EGL SQLRecord type to load the table in addition to showing how behavior functions can be employed to govern the colors of each row as determined by the data values.

Written by iseriesadmin

June 9, 2012 at 12:31 pm