Search from 700 + Posts

Oct 7, 2009

ADF Navigation List to update the Page

Navigation List in ADF Page is a list that when updated will actually update/refresh another part of page.

Test case – we have an application to capture the details from credit card statements and then prepare Monthly Budget (Budget has Header, lines and Spending category).
In this example, I will create a VO with the Budget category and Lines and then design a Page that will show all the expenses for a particular category for all existing budgets. Whenever user change the category name , underline page will be refreshed to show the detail of the newly selected category.

Steps
Open Oracle Jdeveloper (Jdev11g).
1. Select New application.
2. Select the template Fusion Web Application (ADF) and Wizard will help you to create TWO projects.


1.Model
2.View Controller.

Model is for Data Control and ViewController for UI.

In Model Project Design the Business Services by selecting categories > business tier >ADF Business components >“Business Components from table”.
1.Complete Database connection Setup.
2.Select the budget_lines and budget_categories table and created Entity Object (EO). Then Create VO by joining the budget_lines and budget_category via category_id, finally create Application Module (AM)
3.Creation of Application Model will exposed our VO to client, and they will appear under Data Control.
4.Save your Work.

In ViewController Project open adfc-config.xml and drag a JSF page component by dragging View from Component palette (Pic 1.1). Save your work

1.Open the page and save it as NavigationList.jspx. (Please note that this is unbounded task flow).
2.Drag BgBudgetCategoryView1 VO on the page and select navigation List from Popup as shown in Pic 1.2/1.3.
3.Select the Display Attribute of List, as shown in Pic 1.4. (In my example it is Category Name)
4.Jdev will Drop Navigation List Component. This component has 2 section,
Section 1- List (where it drops the List component in my example categoryName.
Section 2- this is for detail block as shown in Pic 1.5
5.In the Detail section drag and drop the view BGBudgetLinesView2 from Data Control (Pic 1.6)
6.Select the column that you want to display in Details (Pic 1.7)

Now I will explain how it works.
Go to Property of the list and check the ID, and Auto Submit (pic 1.8). Auto submit is TRUE and ID = navList1.


Go to the Detail Block and check the Property Partial Trigger, System has populated it with navList1 (Pic 1.9) . (it indicates that whenever there us change in the List value refresh the detail section).




As shown below , when we update the category Name in Navigation List , underlying block got refreshed with the respective data.
In Pic1.1 below category Name = Gas , but when we change the Category Name = “Home Phone and Internet “ in Pic 1.2 , underlying block updated/refreshed with the data for = “Home Phone and Internet “

2 comments:

  1. What database are you using for this example?

    ReplyDelete
  2. Database for this application was Oracle 10g.

    Thanks

    ReplyDelete