Hiding and showing JSF components dynamically

Ever wondered how to hide and show components depending on what the user selects on your page. I had a recent requirement for a page that would show the users a list of reports, and depending on which report they selected, to show a list of values that they could select from for the report parameters. My problem is that I had four different tables that I wanted to use, and depending on the report type selected, show the associated table.

Using the PPR features of ADF and the data bindings I was able to get this done. Lets take a look how.

Here is a look at my page in the structure panel, after I dropped all my components onto the page:

The key making this work is the use of the panel group. Once we get done, anything in the panel group will be refreshed when the user selects an item in the reports table.

Ok, we have our page layout, now we need to set the rendered property of each the panel headers in the header group to point to column in the reports table. For this example the reports table has a column title EntityObject, which is the name of the table it uses for a report parameter. The code that goes in the render tag looks like this:

                              rendered=”#{bindings.ReportView1.EntityObject ==’PATCH’}”
                              binding=”#{backing_reports.patchHeader}”
                              id=”patchHeader”>
            

The text in blue is the part that will look at the current row on the reports view and determine if the value is what it is looking for.

Next you need to set up the PPR portion of the page. This for me was confusing, as I always seem to get it backwards to the way I think it should work. The way it works is the the child component’s partial trigger is set to the parents. In this example, the partial trigger on the panel group is set to watch the report table and report table select one objects.

                           id="updateWithPPR"
                           partialTriggers=”table1 tableSelectOne1″>

Again the text in blue is the part that you need to add to your code. Running this page will now only show the item in the panel group that applies to the current selected row in the report view. This idea can be used any way you like, you could have drop downs or other components that work in the same manner.   If you have tips on PPR or some cool demos for this area drop me a note.