1. ® IBM Software Group © 2006 IBM Corporation Programmatically Rendering and Hiding JSF Controls This section describes how to hide and show JSF controls programmatically, using EGL server-side logic.

2. 2 Last update: 12/04/2007 Programmatically Rendering Controls Visible/Invisible  An extremely common requirement for production applications is to be able to render certain controls visible in the browser (or not) based on some programmatic condition.  This is very easy to do with RBDe/EGL – as with EGL and dynamic JSF controls – you can set properties that either render or do not render the controls at the server (before creating the HTML stream sent to the browser).  Here’s how:  Add a boolean variable to your JSFHandler  Value the variable programmatically (based on your business logic):  False – to hide controls  True – to show controls  Bind the boolean variable to control’s “rendered” property  You may use this technique to render/not-render any JSF component  Input field, button, combo-box, etc  A dataTable  A column within a dataTable  Let’s see how it works 

3. 3 Last update: 12/04/2007  Rendering Controls Lab 1 of 3 – Create the Page and JSFHandler controlVisibility.jsp  Create a new page, named: controlVisibility.jsp – use a page template  Add an HTML table to the page: 3 Rows/2 Columns. Width 100%  Add the static text and JSF components as shown below in the screen capture  NOTE:  An input field/submit button  A Record – inside of a JSF Group box  A dataTable  Copy/Paste the EGL from the Notes section of the slide, and replace the default JSFHandler with this code

4. 4 Last update: 12/04/2007  Rendering Controls Lab 2 of 3 – Add the EGL Variables to the Page  From Page Data:  Drag and drop ordersRec into the top row – it will create a vertical set of fields and literals  Make the fields output controls, and do not add OrderAmount to the page  From Enhanced Faces Components, drag and drop a Panel – Group Box JSP  You will be prompted for a type. Select Type: JSP Group Box  Drag and drop ordersRec into the Group Box  Make the fields output controls, and do not add OrderAmount to the page  Drag and drop the orders array into the 3 rd row – where it will create a dataTable  Make the fields output controls, and do not add OrderAmount to the page  Drag and Drop the two functions on to the page – where the will create Submit Buttons

5. 5 Last update: 12/04/2007  Rendering Controls Lab 3 of 3 – Render the Controls (Visible/Invisible)  Do the following to render controls for fields (and to render specific dataTable columns): 1.Select the JSF control 2.From Properties / All Attributes – open the ComboBox on the right hand side of the rendered value. 3.Choose Compute, and from Page Data, choose the appropriate EGL visibility variable  Use the above steps to bind the visibility variables to:  In the top row, the OrderID control  In the middle row, the entire JSP Group Box – Note that in order to select the JSP Group Box:  Select the entire HTML table for the Record  Click the Left  arrow key on your PC  In the bottom row, the OrderID column of the dataTable  Run the page on the server, and click the submit buttons to see cause and effect  Note that initially the OrderID control, column and the entire Group Box is NOT displayed. This is because an EGL boolean variable is initialized by default to false.