80 likes | 175 Views
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”.
E N D
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”.
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.
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: • 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. • 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 • You will have to customize the SQLRecord (or BasicRecord) and add Persistent=no fields.
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 • Select and delete the {Phone} field (not the column, just the field)
Programmatically Changing a Cell Color in a dataTable – 3 of 6 • From the Palette • Drag a Panel – Group Box (type: JSP) into the PHONE column • 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
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
Programmatically Changing a Cell Color in a dataTable – 5 of 6 • Select the HTML table, and from Properties, specify: • Height: 100% • Color (some custom color) • Select the other HTML table, and repeat, giving it a different color
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