1. ® IBM Software Group © 2006 IBM Corporation Individual Cell Coloring – in a JSF dataTable Control You may need to programmatically (using EGL) change the color of a specific cell in a dataTable, in order to draw the user’s attention to a value. This learning module shows you “how to”.

2. 2 Last update: 12/04/2007 JSF dataTable Row Actions – Programmatically Changing a Cell Color in a dataTable  Another common requirement is to programmatically (that is, within your EGL JSFHandler) color a given cell of a dataTable, for the purpose of drawing the user’s attention to it.  Let’s see how to implement this with EGL and JSF.

3. 3 Last update: 12/04/2007 – 1 of 6  Programmatically Changing a Cell Color in a dataTable – 1 of 6  Create a new,.JSP web page, named: allcustomers5.jsp  Edit the JSFHandler and Copy/Paste the code in the Notes section of this slide – Save your changes, and read the comments. Notes: 1.Essentially, in this technique you will create two panel- groups inside the column (cell) with a different colored HTML table in each. You will duplicate the JSF output field in each panel, and then hide/show the appropriate panel as per your logic requirements. 2.So, after reading the database, you will iterate over the rows returned to the dynamic array and value the vis1/vis2 boolean fields (which are used to render the JSF panel groups) appropriately 3.You will have to customize the SQLRecord (or BasicRecord) and add Persistent=no fields.

4. 4 Last update: 12/04/2007 – 2 of 6  Programmatically Changing a Cell Color in a dataTable – 2 of 6  From Page Designer/Page Data – drag the customers array on to the page.  Output (read/only) fields – although that is just for this workshop, you could just as well have selected input fields  But, don’t select the vis1 or vis2 boolean fields {Phone}  Select and delete the {Phone} field (not the column, just the field)

5. 5 Last update: 12/04/2007 – 3 of 6  Programmatically Changing a Cell Color in a dataTable – 3 of 6  From the Palette JSP  Drag a Panel – Group Box (type: JSP) into the PHONE column  Select  Select (set focus to) the Panel – Group Box, and from HTML Tags, double-click: Table  1 row/1 column  100% Table width  0 pixel Border width 

6. 6 Last update: 12/04/2007 – 4 of 6  Programmatically Changing a Cell Color in a dataTable – 4 of 6  From Enhanced Faces Components, drag an Output field into the table (inside the Panel – Group)  From Page Data, select PHONE and drag & drop on top of the new Output field  Repeat the above series of steps to create another Panel – Group (type: JSP) with another HTML table and new Output field bound (also) to PHONE

7. 7 Last update: 12/04/2007 – 5 of 6  Programmatically Changing a Cell Color in a dataTable – 5 of 6  Select the HTML table, and from Properties, specify:  Height: 100%  Color  Color (some custom color)  Select the other HTML table  Select the other HTML table, and repeat, giving it a different color

8. 8 Last update: 12/04/2007 – 6 of 6  Programmatically Changing a Cell Color in a dataTable – 6 of 6 (For each of the JSP Panel Groups)  Select the component  From Properties/All Attributes  Specify the rendered value as:  Compute  From Page Data –From the customers array, select either vis1 or vis2  Run the page on the server