Here is an example of how to create a Bar Graph in OAF. Graphs are created with the graphTable region style.
1) Create a new OA page:
1) Create a new OA page:
=========================
Right click on project (xxcus) --> New --> Web Tier --> OA Components --> select 'Page' item. Click OK. (This will open a popup window)
Name: XxcusGraphDemoPG
Package: xxcus.oracle.apps.fnd.graphdemo.webui
2) Create a new view object (VO):
=========================
Right click --> New View Object (This will open a wizard having 7 steps).
Step 1
Package: xxcus.oracle.apps.fnd.graphdemo.server
Name: XxcusEmpGraphVO
Choose the radio button 'Read-only Access' (as we are not performing any DML operation). Click Next.
Step 2
Enter the below query in 'Query Statement':
select ename, sal from employee
Step 3
Generate Impl class for the view object.
Keep defaults for step 4, 5, 6 & 7 and click Finish. Save All.
3) Create a new Application Module (AM):
=========================
Step 1
Package: xxcus.oracle.apps.fnd.graphdemo.server
Name: XxcusGraphDemoAM. Click Next.
Step 2
Here we will add an instance of the VO created in (2). Select XxcusEmpGraphVO from 'Available View Objects' and shuttle it to 'Data Model' using ">" button.
Keep defaults for all other steps (3, 4). Click Finish.
4) Create a new Controller (CO):
=========================
Right click on pageLayout region and create a new controller
Name: XxcusGraphDemoCO
package: xxcus.oracle.apps.fnd.graphdemo.webui
5) Creating the Page Layout & Setting its Properties
=========================
1) Create a new region under pageLayout of type graphTable. This will automatically create a default graphs container. Also, it will add a graph to the graphs container along with two default graphData columns.
Now change the properties for each field from property inspector as shown below:
pageLayout:
ID: pageLayoutRN
AM Definition: xxcus.oracle.apps.fnd.graphdemo.server.XxcusGraphDemoAM
Window Title: Employee Salary Graph Page
Title: Employee Salary Graph
graphTable:
ID: graphTableRN
Graph render style: graph
set these properties for the graph:
ID: empSalGraph
Graph Type: vertical clustered bar
Title: Employee Name vs Salary
Size: Medium
X-axis label: Employee Name
set properties for graphData1:
ID: xAxisData
View Instance: XxcusEmpGraphVO1
View Attribute: Ename
Purpose in Graph: groupLabels (it represents data on X-axis)
set properties for graphData1:
ID: yAxisData
View Instance: XxcusEmpGraphVO1
View Attribute: Sal
Purpose in Graph: data (it represents data on Y axis)
Prompt: Salary
The declarative page structure in jDev will be similar to as shown below:
In PR method, we call a method of AM to intiate query:The declarative page structure in jDev will be similar to as shown below:
1
2
3
4
5
| public void processRequest(OAPageContext pageContext, OAWebBean webBean) { super.processRequest(pageContext, webBean); OAApplicationModule am = pageContext.getRootApplicationModule(); am.invokeMethod("initQuery");} |
Code for initQuery method in XxcusGraphDemoAMImpl.java file:
1
2
3
4
5
6
7
8
9
| public void initQuery() { try { XxcusEmpGraphVOImpl vo = getXxcusEmpGraphVO1(); vo.setMaxFetchSize(-1); vo.executeQuery(); } catch (Exception e) { e.printStackTrace(); }} |
Below is how the page will appear:
0 comments