Programmatically Rendering and Hiding JSF Controls

1. Programmatically Rendering and Hiding JSF Controls This section describes how to hide and show JSF controls programmatically, using EGL server-side logic.

2. 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.  Rendering Controls Lab 1 of 3 – Create the Page and JSFHandler • 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.  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 • You will be prompted for a type. Select Type: JSP • 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 3rd 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.  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): • Select the JSF control • From Properties / All Attributes – open the ComboBox on the right hand side of the rendered value. • 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.