Sunday, May 05, 2013

Implementing Shuttle Region

Shuttle region allows users to move items between two lists as well as reorder the items in the list. When you implement a Shuttle region, you define two lists:


A Leading list (Available List) - from which user can select items from a given list of items
A Trailing list (Selected List) - user will select item from Leading list and move those to this trailing list.

Also we can implement a Shuttle region with just one list, to achieve only Reorder functionality, in that case only a Leading list is required.

We can also add buttons/icons in the footer below each of the Shuttle lists. By Simply defining Leading footer child or Trailing footer child in region creates a flowLayout region by default, to which we can add a button or image.

Here, I have created a simple page to implement shuttle region. User will select employee name from 'Available List' and move them to 'selected List'. A button is also added at footer of trailing list. Clicking on this button will show all the employees selected in a message.

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)
We are creating a page for implementing shuttle region, so specify the details of page as below:
          Name: ShuttlePG
          Package: xxcus.oracle.apps.fnd.shuttle.webui

2) Create a new view objects (VO):
=========================
Right click --> New View Object (This will open a wizard having 7 steps).

Step 1
         Package: xxcus.oracle.apps.fnd.shuttle.server
         Name: ShuttleVO
         Choose the radio button 'Read-only Access' (as there is no DML operation). Click Next.

Step 2
         Enter the below query in 'Query Statement':
               select ename from employee

Keep defaults for step3, 4, 5, 6 & 7 and click Finish. Save All.   

3) Create a new Application Module (AM):
=========================

Step 1
         Package: xxcus.oracle.apps.fnd.shuttle.server
         Name: ShuttleAM. Click Next.

Step 2
    Here we will add an instance of the VO created in (2). Select ShuttleVO 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:ShuttleCO
            package: xxcus.oracle.apps.fnd.shuttle.webui


5) Creating the Page Layout & Setting its Properties :-
==========================


1) Create a new region under pageLayout of type shuttle. This will automatically create a region for leading list.
2) Add Trailing list: right click shuttle region --> new --> Trailing.
3) Add trailing footer to display button: Again right click on shuttle region --> new --> trailingFooter. This will create a flowLayout region under trailingFooter.
4) Add 'Display Items' button: Create an item of type submitButton under the flowLayout region.

Now change the properties for each field from property inspector as shown below:


pageLayout:
            ID: pageLayoutRN
            AM Definition: xxcus.oracle.apps.fnd.shuttle.server.ShuttleAM
            Window Title: Shuttle  Page
            Title: Shuttle 

shuttle:
           ID: shuttleRN
           Available Header: Available Employees
           Selected Header: Selected Employees


leadingList:
           Picklist View Definition: xxcus.oracle.apps.fnd.shuttle.server.ShuttleVO
           Picklist View Instance: ShuttleVO1
           Picklist Display Attribute: Ename
           Picklist Value Attribute: Ename

list2:
           Picklist Display Attribute: Ename
           Picklist Value Attribute: Ename

submitButton:
           ID: displayBtn
           Prompt: Display Items




We will catch the button event (displayBtn) in PFR method of controller and display a message showing all the employees present in selected list. If there is no item in selected list, throw an error message. Below is code for the same:

public void processFormRequest(OAPageContext pageContext,
                               OAWebBean webBean) {
    super.processFormRequest(pageContext, webBean);
     
    String message = "";
     
    if (pageContext.getParameter("displayBtn") != null) {
        OADefaultShuttleBean shuttle =
            (OADefaultShuttleBean)webBean.findChildRecursive("shuttleRN");
        String[] items =
            shuttle.getTrailingListOptionValues(pageContext, shuttle);
     
    if (items != null) {
            for (int i = 0; i < items.length - 1; i++) {
                message = items[i] + " , " + message;
            }
             
            message = message + items[items.length - 1];           
            throw new OAException("Items in trailing list are: " +
                                  message, OAException.INFORMATION);
        } else {
       throw new OAException("Please shuttle at least one item from available list.",
                                  OAException.ERROR);
        }
    }
}



regards 
Rekha Kasyap .

Creating Bar Graph in OAF

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:
=========================
Right click on project (xxcus) --> New --> Web Tier --> OA Components --> select 'Page' item. Click OK. (This will open a popup window)
          Name: BarGraphPG
          Package: xxcus.oracle.apps.fnd.bargraph.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.bargraph.server
Name: GraphVO
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.bargraph.server
Name: BarGraphAM. Click Next.

Step 2
Here we will add an instance of the VO created in (2). Select GraphVO 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: BarGraphCO
package: xxcus.oracle.apps.fnd.bargraph.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.bargraph.server.BarGraphAM
     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: GraphVO1
View Attribute: Ename
Purpose in Graph: groupLabels (it represents data on X-axis)

set properties for graphData1:
ID: yAxisData
View Instance: GraphVO1
View Attribute: Sal
Purpose in Graph: data (it represents data on Y axis)
Prompt: Salary

In PR method, we call a method of AM to intiate query:

public void processRequest(OAPageContext pageContext ,OAWebBean webBean){
     super.processRequest(pageContext,webBean);
   OAApplicationModule am = pageContext.getRootApplicationModule();
    am.invokeMethod("initQuery");
}

Code for initQuery method in BarGraphAMImpl.java file:

public void initQuery()
{
   try{
       GraphVOImpl graphVO=getGraphVO1();
       graphVO.setMaxFetchSize(-1);
       graphVO.executeQuery();
     } catch(Exception ex){
              ex.printStackTrace();
              }
}  




regards 
RekhaKasyap.