Friday, 16 October 2015

Pass column value from af:table to an af:popup in ADF

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.

There will have a demo.jspx page. On that page I will have an:table displaying the CountryId and CountryName columns. Now when I click on any CountryId value in the af:table, I should get an af:popup displaying the same CountryId in it.

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

Step 1: Create an Oracle ADF Fusion Web Application.

Step 2: Create an ADF Business Components from table for 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 COUNTRIES table.

Step 3: Create a demo.jspx page. Now drag and drop CountriesVO1 from the Data Control Palette on the demo.jspx as an ADF Table. For simplicity purpose we will not be displaying the RegionId column of the COUNTRIES table.

Step 4: Drag and drop af:clientAttribute inside af:outputText of the CountryId column. The value of the af:clientAttribute should exactly be same as that of the values in the af:outputText  that is value="#{row.CountryId}". Give any name for the af:clientAttribute  say name="countryId".

Now drag and drop af:popup from the component palette and set its behavior as launcherVar="source" contentDelivery="lazyUncached" eventContext="launcher".

Drag and drop af:dialog inside af:popup.And drag and drop af:outputText inside af:dialog.Give the value of the af:outputText as value="#{viewScope.counId}"

Drag and drop af:setPropertyListener inside af:popup and outside af:dialog and change the properties of the af:setPropertyListener as from="#{source.attributes.countryId}"  , type="popupFetch", and to="#{viewScope.counId}"

The value of af:outputText inside af:dialog and to of af:setPropertyListener should be same that is value="#{viewScope.counId}" for af:outputText and to="#{viewScope.counId}" for af:setPropertyListener should be same.

Now drag and drop af:showPopupBehavior inside af:clientAttribute and give the properties as popupId="::p1" triggerType="click".

Thus, the complete demo.jspx code is shown below.
Step 5: Save all and run the application. Thus, the ran application is shown below:
Step 6: When I click on the value on the CountryId column that is on AR, then we get one popup window and the value inside the Popup window is also AR as shown below:
Hence, the solution to our requirement.

If you really like the post and want to get updated of my upcoming posts, then join on: Facebook and LinkedIn.

Please don’t forget to share and comment on the post.

Thanks & Regards,

Susanto Paul