Tuesday, 26 January 2016

Using af:switcher in ADF Faces to dynamically render page components

Explanation: Sometimes we need to display page components on a condition basis , this can be achieved in ADF using af:switcher component. Normally switcher component is a collection of multiple facets and on a given condition it decides which facet should be rendered.

The switcher component dynamically decides which facet component should be rendered. It has two properties. The switcher will render the facet matching "facetName"; however, if no such facet exists (or "facetName" is null), and "defaultFacet" has been set, then that facet will be used instead. (It's possible to achieve this same functionality by using a panelGroup and binding the "rendered" property of each child, but this component can be simpler. Ordinary children of the switcher component are not rendered at all.)

The switcher is a purely logical server-side component. It does not generate any content itself and has no client-side representation (no client component). Hence switching which facet of the switcher renders requires a server round-trip.

For demonstration purpose we will be using the Departments and the Countries of the HR Schema of the Oracle Database XE.

Requirement: Pass column value from af:table to an af:popup in ADF. This post will show you how to how to pass values from the af:column of an af:table into the af:popup.

Solution: For solution to the above requirement follow the steps as shown below:

Step 1: Create an Oracle ADF Fusion Web Application and name the application as SwitcherDemo.

Step 2: Create an ADF Business Components from table for the DEPARTMENTS table and the COUNTRIES table of the HR Schema of the Oracle Database XE. We will be creating all the three ADF Business Components: EntityObject, ViewObject and ApplicationModule for the DEPARTMENTS and COUNTRIES table.
Step 3: Open DepartmentsVO and create New Attribute SelectTableFlag. The Type will be String. Also select the Updateable as Always as shown below. If we dont select the Updateable as Always then it will not show any values in the af:selectOneChoice which I will be craeting in the later steps.
Step 4: Create a demo.jspx page in the ViewController project of our application. Drag and drop af:switcher inside the af:form of the demo.jspx page. Name the two facets as "Dept" and "Con". Drag and drop DepartmentsVO1 and CountriesVO1 from the SwitcherDemoAMDataControl inside the correspondinmg facets as shown below: Also I will not display the SelectTableFlag attribute inside the Departments table.
Step 5: Now I will create a static List that has values Departments for Departments table and Countries for Countries table. When I select Departments, the Departments table will be shown and when I select Countries, Countries table will be shown.
To do this drag SelectTableFlag from the DepartmentsVO1 inside SwitcherDemoAMDataControl and drop it as ADF Select One Choice on the demo.jspx. Set the Set of Values as Departments and Countries as shown below.
Set autoSubmit="true" for the af:selectOneChoice component in the demo.jspx page.

Step 6: Set the facetName property of the af:switcher as facetName="#{bindings.SelectTableFlag.inputValue=='Countries' ? 'Con' : 'Dept'}"
Step 7: Save all and run the application. Thus, the ran application is shown below:
Now when I select Countries from the SelectTableFlag af:selectOneChoice component the it will display the contents of f:facet name="Con" as shown below.
Thus, the solution to our requirement.

If you like this post please comments, share and like me on Facebook.

Thanks & Regards,
Susanto Paul