Friday, 28 December 2012

13. Implementing Shuttle Region in OAF

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: XxShuttleDemoPG
          Package: xxcus.oracle.apps.fnd.shuttledemo.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.shuttledemo.server
         Name: XxEmpShuttleVO
         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.shuttledemo.server
         Name: XxShuttleDemoAM. Click Next.

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


5) Creating the Page Layout & Setting its Properties :-
==========================
The page will appear as below:



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.shuttledemo.server.XxShuttleDemoAM
            Window Title: Shuttle Demo Page
            Title: Shuttle Demo

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


leadingList:
           Picklist View Definition: xxcus.oracle.apps.fnd.shuttledemo.server.XxEmpShuttleVO
           Picklist View Instance: XxEmpShuttleVO1
           Picklist Display Attribute: Ename
           Picklist Value Attribute: Ename

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

submitButton:
           ID: displayBtn
           Prompt: Display Items

The declarative page structure in jDev will be similar to as shown below:


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);
        }
    }
}

Below is how the error message will appear:








Tuesday, 25 December 2012

3. Creating Lists & Tables in HTML Page

In this post, I'll be extending the page created in previous post and add functionalities of lists and tables.

List is a way of presenting data in some order or sequence. 
Similarly, as lists are one dimensional, tables on the other hand are two dimensional and used to represent data in tabular form.

This is how the HTML page will appear after using lists and tables:



Here is script for the same:


< HTML>
	< HEAD>
		< TITLE>My First Web Page< /TITLE>
	< /HEAD>
	
	< BODY>
		< H1>Sushant Sharma< /H1>
		< P>< B>B.TECH (CSE)< /B>< BR>
		< A HREF="http://sushantsharmaa.blogspot.in">My Home Page< /A>< BR>
		This is realted to java realted technologies.< BR>
		< A HREF="mailto:abc@gmail.com">contanct me< /A>< BR>< /P>
		< P>This page is about my personal information.< /P>
		< P>My subjects:< /P>
		< UL>
			< LI>Java< /LI>
			< LI>OOPS< /LI>
			< LI>DBMS< /LI>
		< /UL>
		< P>Yearly Courses:< /P>
		
		< TABLE border="1">
			< TR>
				< TH>Year< /TH>
				< TH>Subject< /TH>
			< /TR>
			< TR>
				< TD>1st< /TD>
				< TD>C++< /TD>
			< /TR>			
			< TR>
				< TD>2nd< /TD>
				< TD>DBMS< /TD>
			< /TR>
			< TR>
				< TD>3rd< /TD>
				< TD>Java< /TD>
			< /TR>						
		< /TABLE>
		
	< /BODY>
	
< /HTML>

Lists
=========

  • <UL> tag is used to display unordered lists and by default "bullet" for these lists is "disc" (we can change this to "circle" or "square" with the help of "type" attribute).
  • <OL> tag is used to display lists in some specific order and by default order for list is 1,2,3....
  • We can change the order of lists using "type" attribute. For example: <OL type="a"> for order a,b,c.... ,<OL type="i"> for order in roman format or <OL start="25"> to display order from any number..
  • Also we can create nested lists using <OL> or <UL> tag inside another list tag.

Tables
=========

  • Tables are used to represent data in two dimensional format.
  • <TABLE> tag: this tag includes set of all rows to be displayed inside the table.
  • <TR> tag: inside TR tag, we specify set of cells; cells can either be of type heading or type data.
  • <TH> used in only first row to display heading and it shows in bold. <TD> is tag for displaying the actual data.

Here, I have only shown text inside a table however we can display lists, images or even a form or a table inside a table as well. Some attributes of table are:

  • border - thickness of table.
  • cellpadding: distance between border of cell and content of cell.
  • cellspacing: empty spacing between borders of 2 adjacent cells.

There are some attributes which are common in among all these tags: <TABLE>, <TR>, <TH>, <TD>:

  • align: center, left, right
  • bgcolor: ex: <TD bgcolor="red">
  • width ex: <TR width="50%">
  • height: <table height=200>

<caption> Tag: This tag can also be used to display some text information about the table. ex:
<TABLE border="1">
<caption>some text</caption>





Saturday, 22 December 2012

2. Creating a Simple Web (HTML) Page

We create web pages using HTML (Hyper Text Markup Language) language. HTML is used to create static part of our web pages. Web sites which are dynamic, use many other languages (such as java, php, javaScript....) to become dynamic.
HTML file consists of some of the contents that display on browser and others are some commands in the form of tags. Through these tags, browser comes to know what are the contents and how to display those contents to the user. 

Though there are lots of tags but any web/HTML page must have these six essential tags: <HTML>, <HEAD>, </HEAD>, <BODY>, </BODY> and </HTML>.
tag with '/', indicates that the particular tag is ending here.

Here, I have shown how to create a very basic HTML page using some tags. This is how the page will appear:


To create this page, simply open a notepad file and save it with extension '.html'. Below is code for the page:

< HTML>
 < HEAD>
  < TITLE>My First Web Page< /TITLE>
 < /HEAD>
 
 < BODY>
  < H1>Sushant Sharma< /H1>
  < P>
   < B>B.TECH (CSE)< /B>< BR>
   < A HREF="http://sushantsharmaa.blogspot.in">My Home Page< /A>< BR>
   This is realted to java realted technologies.< BR>
   < A HREF="mailto:abc@gmail.com">contanct me< /A>< BR>
  < /P>
  < P>This page is about my personal information.< /P>
 < /BODY>
 
< /HTML>


  • Every html page starts with <HTML> tag and ends with </HTML> tag.
  • HTML pages can have two portions; head and body.
  • Head portion starts with <HEAD> tag and ends with </HEAD> tag.
  • Similarly, body portion starts with <BODY> tag and ends with <BODY> tag.
  • Inside head portion, we have used only one tag <TITLE>. Anything between <TITLE> & </TITLE> will appear at upper left corner of web page.
  • In body portion, there is <H1> tag which used for heading. There are some other tags as well like <BR> & <P>. <BR> (line break) tag is different from <P> (paragraph) tag as <BR> tag takes us to next line however <P> tag leaves a empty line and then takes us to further next line.
  • Another tag we used is <B> tag. anything between these tags will appear in bold in browser. We can also use <STRONG></STRONG> to display text in bold.
  • Another important tag is anchor tag (<A>). It has 2 parts, one is label & another is action. Label is what is visible to us and action is what actually happens when we click on that label.
  • If in a anchor tag <A>, HREF starts with http, browser will take us to that web page. However, if it starts with 'mailto' followed by mail address, then browser will search if there is any email client available in the computer and then launch that. So first hyperlink takes us to a new web page but second one takes us to a new application through which we can send an email.
  • We can also use a property called 'target' inside <A> tag. If we set 'taget=_blank', it will open the link in another window.








Tuesday, 18 December 2012

12. Calling PL/SQL Function from OAF Page

Here is a simple demo for how to call a PL/SQL function from OAF page.

I have created a very basic page having one LOV and a submit button. User will select employee number from LOV field and then click on Go button.
On clicking 'Go' button, we call a PL/SQL function which taking this employee number as parameter and will return employee name and job for that particular employee.
Finally we will display that information as a message to the user.

Below is the function which retrieves the information for an employee number:

CREATE OR REPLACE FUNCTION xx_get_emp_details (p_empnum IN  VARCHAR2)
RETURN VARCHAR2
    AS
       v_name   VARCHAR2 (10);
       v_job    VARCHAR2 (10);

    BEGIN
       SELECT ename, job
         INTO v_name, v_job
         FROM employee
        WHERE empno = p_empnum;
       RETURN (   'Employee info :: '
               || 'Employee Number: '
               || p_empnum
               || '  Employee Name: '
               || v_name
               || '  Employee Job: '
               || v_job
              );
    END;

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)
Specify the details of page as below:
Name: XxPlSqlFuncDemoPG
Package: xxcus.oracle.apps.fnd.plsqlfuncdemo.webui

2) Create a new view object for employee number LOV (VO):
====================
Right click (plsqlfuncdemo) –> New View Object (This will open a wizard having 7 steps).

Step 1
Package: xxcus.oracle.apps.fnd.plsqlfuncdemo.lov.server
Name: XxEmpNumLovVO
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 empno from employee

As there is no need to generate VOImpl/VORowImpl, 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.plsqlfuncdemo.server
         Name: XxPlSqlFuncDemoAM. Click Next.

Step 2
         Here we will add an instance of the VO created in (2).
       Select XxEmpNumLovVO from ‘Available View Objects’ and shuttle it to ‘Data Model’ using “>” button.

Keep defaults for all other steps (3, 4). Click Finish.

5) Create a new controller:
====================

Right click on pageLayout region –> set new controller (This will open a popup window). Enter the below details:
           Package Name: xxcus.oracle.apps.fnd.plsqlfuncdemo.webui
           Class Name: XxPlSqlFuncDemoCO

Creating the Page Layout & Setting its Properties:
====================
Page will appear as below:



1) Create a new region under pageLayout of type defaultSingleColumn.
2) Create 2 items under defaultSingleColumn region (messageLovInput, submitButton).

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

pageLayout:
ID: pageLayoutRN
AM Definition: xcus.oracle.apps.fnd.plsqlfuncdemo.server.XxPlSqlFuncDemoAM
Window Title: PL/SQL Function Demo Page
Title: PL/SQL Function Demo

defaultSingleColumn:
ID: singleColRN
Text: Choose Employee Number:

messageLovInput (for Employee Number): 
ID: empNumLov
Prompt: Employee Number

submitButton:
ID: goBtn, Prompt: Go

Creating LOV regions:
Expand empNumLov LOV, right click on region1 and create a new region using wizard.

Step 1
select ‘XxPlSqlFuncDemoAM’ from Application Module drop down and select 'XxEmpNumLovVO1' in available view usages. Click Next.

Step 2
choose region style as ‘table’ from drop down. Click Next.

Step 3
Shuttle all the fields from available to selected attributes. Click Next.
Also modify the prompt to make it more user friendly (like Employee Number).

This will create an item 'Empno' under 'XxEmpNumLovVO1' table region.
Set search allowed property to TRUE for the item created.

lovMap1:
LOV region item: Empno
Return item: empNumLov
Criteria item: empNumLov


The declarative page structure in jDev will be similar to as shown below:





We will catch go button event in PFR method of controller and call the method (callPlSqlFunction) form AM which will retrive information for the employee number selected.
If employee LOV is empty, throw an error message 'Please choose employee numer.'

public void processFormRequest(OAPageContext pageContext, 
                               OAWebBean webBean) {
    super.processFormRequest(pageContext, webBean);
    OAApplicationModule am = null;
    am = pageContext.getRootApplicationModule();
    if (pageContext.getParameter("goBtn") != null) {
        if (!("".equals(pageContext.getParameter("empNumLov").trim()))) {
            String empNum = pageContext.getParameter("empNumLov");
            Serializable[] param = { empNum };
            String empInfo = 
                am.invokeMethod("callPlSqlFunction", param).toString();
            throw new OAException(empInfo, OAException.INFORMATION);
        } else {
            throw new OAException("Please choose employee numer.", 
                                  OAException.ERROR);
        }
    }
}

Below is code for callPlSqlFunction method in AM class:
public String callPlSqlFunction(String empNum) {
    String empInfo = "";
    String stmt = "BEGIN :1 := xx_get_emp_details(:2); end;";
    CallableStatement cs = 
        getOADBTransaction().createCallableStatement(stmt, 1);
    try {
        cs.registerOutParameter(1, Types.VARCHAR);
        cs.setString(2, empNum);
        cs.execute();
        empInfo = cs.getString(1);
        cs.close();
    } catch (Exception e) {
        e.printStackTrace();
    }
    return empInfo;
}


Finally, information will be displayed as shown in below screenshot:






Monday, 17 December 2012

1. World Wide Web

World Wide Web is a huge collection of information- logically unified (means if we want to see any information from this collection, there is a very simple way and we can go to any piece of information) and physically distributed (means all this information is not stored at one place but is distributed across the globe in various computers). These computers talk to each other and we access this information through World Wide Web.

When we talk about World Wide Web, we talk about collection of web pages. To access any web page/information, we require browser and url of the page.

Borwser: browser can be thought of as a tool through will we can see that infomation on the web.

URL: every web page on world wide web has a unique address and that address is known as URL of that page. Also from one web page, we can  further move around the web through hyperlinks, buttons or other URLs.

Search Engines: this is one of the most important tool in world wide web.  The Job of search engine is to keep looking and analysing new websites and pages and whatever terms and words they come across, they keep on indexing and listing those terms.
Now, whenever someone is interested in any field/technique or want to access some information, he would go to any search engine and enter some keywords. Search engine will search those keywords in its index or list and check on which web pages those words are appearing. It will prepare a list of all those web pages and return as a result.
Google is the largest search engine in the world.

Also, there remains a confusion that internet and web are the same thing. But this is not so. Web is just a service which runs over the internet. Internet is like a infrastructure and lots of services run over this infrastructure. 





Saturday, 15 December 2012

11. PPR (Partial Page Rendering) in OAF

While developing pages, we may face some scenarios where the requirement is to make modifications on the current page itself, instead of navigating to different page. Such as selecting an item from a choice list might result in modifications to other fields or clicking a button to add a new row in table region and many more like these.
All these tasks can be performed by simply refreshing the page however this could result in performance issues. Another alternative is to use javaScript which will give faster results but implementing complex functions can be a tough job using javaScript.

UIX Framework provides a solution for this: Partial Page Rendering i.e. to re-render only a limited portion of a page.

Working of PPR :-
==========================
PPR is a three step process:

1) Partial page event

Partial page events are quite similar to full page events. However, there are two important differences between partial and full page events. First, partial page events specify partial page rendering-specific event parameters which are not present on the full page event equivalents. For example, partial page events may include an event parameter which identifies the set of partial targets, or nodes that should be re-rendered.
The second difference between partial page events an full page events is how the events are sent. Unlike full page events, partial page events must be sent in a way which does not force the browser to reload the current page. To implement this capability, UIX PPR uses a hidden iframe as a communication channel between the browser and the web application running on the middle-tier. Partial page events are sent by forcing a navigation in the hidden iframe, which in turns causes a request to be sent to the application on the middle-tier. Since the iframe is hidden, the process of sending a partial page event and rendering partial page contents can take place behind the scenes, without discarding the contents of the current page.

2) Partial Page Rendering Pass

When the partial page event is received by the application, the application responds by determining the set of partial targets to render and performing the partial page rendering pass. The partial page rendering pass is similar to a full page rendering pass. In both cases, the UINode tree is traversed by calling render() on each node in the tree. However, in the PPR case, only the contents generated by the partial targets are actually sent back to the browser. All other contents are dropped. So, the partial page response is generally much smaller, since only the modified contents are sent back to the browser.

3) Partial Page Replacement

When the browser receives the partial page response, the new contents for each partial target node are copied from the hidden iframe into the main browser window, replacing the existing contents for each target node. For example, in the table navigation case, rather than replacing the entire page, just the contents of the table itself are replaced.

Now lets create a simple page to implement PPR. In this page, there are 3 items (employee number, employee name & job). I have attach a PPR event on employee number field. Hence, user will enter the emp number and as soon as he tabs out, name and job will populate on their respective fields without refreshing the 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)
We are creating a page for implementing PPR, so specify the details of page as below:
          Name: XxPprDemoPG
          Package: xxcus.oracle.apps.fnd.pprdemo.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.pprdemo.server
         Name: XxPprDemoVO
         Choose the radio button 'Read-only Access' (as no DML operation).
         Click Next.

Step 2
         Enter the below query in 'Query Statement':
               select EMPNO, ENAME, JOB 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.pprdemo.server
         Name: XxPprDemoAM. Click Next.

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

5) Creating the Page Layout & Setting its Properties :-
==========================
The page will appear as below:



1) Create a new region under pageLayout of type defaultSingleColumn.
2) Create 3 items under defaultSingleColumn region (messageTextInput, messageStyledText, messageStyledText).

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

pageLayout:
             ID: pageLayoutRN
             AM Definition: xxcus.oracle.apps.fnd.pprdemo.server.XxPprDemoAM
             Window Title: PPR Demo Page
             Title: PPR Demo

defaultSingleColumn:
             ID: singleColRN
             Text: Enter Employee Number

messageTextInput (applied PPR event on this item):
             ID: Empno
  Prompt: Employee Number
  Action Type: firePartialAction
     Event: populateFields
 
messageStyledText (for Employee Name): 
             ID: Ename
             Prompt: Employee Name
 View Instance: XxPprDemoVO1
     View Attribute: Ename
 
messageStyledText (for Job):
             ID: Job
             Prompt: Job
     View Instance: XxPprDemoVO1
     View Attribute: Job
 
The declarative page structure in jDev will be similar to as shown below:




We will capture populateFields event (PPR event) in PFR method of controller and call the appropriate method from AMImpl class as shown in below code snippet:

public void processFormRequest(OAPageContext pageContext,
                               OAWebBean webBean) {
 super.processFormRequest(pageContext, webBean);

 OAApplicationModule am = pageContext.getRootApplicationModule();

 if ("populateFields".equals(pageContext.getParameter(EVENT_PARAM))) {
    String empNum = pageContext.getParameter("Empno");
    if (!("".equals(empNum.trim()))) {
       Serializable[] param = { empNum };
       String result = 
         am.invokeMethod("firePprEvent", param).toString();
         if ("N".equals(result)) {
            throw new OAException("Please enter valid employee number.",
                                 OAException.ERROR);
        }
    } else {
        String empnum = null;
        Serializable[] param = { empnum };
        am.invokeMethod("firePprEvent", param);
        throw new OAException("Please enter employee number",
                        OAException.ERROR);
    }
 }
}


Code for firePprEvent method in XxPprDemoAMImpl.java file:

public String firePprEvent(String empNum) {
  try {
      XxPprDemoVOImpl vo = getXxPprDemoVO1();
      vo.setWhereClause(null);
      vo.setWhereClauseParams(null);
      vo.setWhereClause("EMPNO = :1");
      vo.setWhereClauseParam(0, empNum);
      vo.setMaxFetchSize(-1);
      vo.executeQuery();
      XxPprDemoVORowImpl row = (XxPprDemoVORowImpl)vo.first();
      if (row == null) {
          return "N";
      }
  } catch (Exception e) {
      e.printStackTrace();
  }
  return "Y";
}

User will enter employee number and tabs out. This will auto-populate the other two fields without full page refresh as shown below:










Tuesday, 11 December 2012

10. Dependent LOV in OAF

Concept of dependent LOV is that, we select a value from one LOV field and based on that value, another LOV field will show filtered results.

Here, I have used two LOVs: one for PO Headers and another for PO Lines.
So first, user will select a PO Header Id from LOV1.
As we are making these dependent, so LOV2 will show only those PO Lines that are related to PO header Id selected.

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 Dependent LOV page, so specify the details of page as below:
          Name: XxDemoDependentLovPG
          Package: xxcus.oracle.apps.fnd.dpndntlov.webui

2) Create two new view objects (VO):
==========================

First for PO Headers

Right click (dpndntlov) --> New View Object (This will open a wizard having 7 steps).

Step 1
        Package: xxcus.oracle.apps.fnd.dpndntlov.lov.server
        Name: XxPoHeaderLovVO
        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 PO_HEADER_ID from po_headers_all where rownum <50

As there is no need to generate VOImpl/VORowImpl, keep defaults for step3, 4, 5, 6 & 7 and click Finish. Save All.

Second for PO Lines

Right click --> New View Object

Step 1
         Package: xxcus.oracle.apps.fnd.dpndntlov.lov.server
         Name: XxPoLinesLovVO
         Choose the radio button 'Read-only Access'. Click Next.

Step 2
        Enter the below query in 'Query Statement':
        select PO_HEADER_ID, PO_LINE_ID from po_lines_all

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.dpndntlov.server
        Name: XxDemoDependentLovAM. Click Next.

Step 2
        Here we will add an instance of the VOs created in (2).
        Select XxPoHeaderLovVO & XxPoLinesLovVO from 'Available View Objects' and shuttle it to 'Data Model' using ">" button.

Keep defaults for all other steps (3, 4). Click Finish.

4) Creating the Page Layout & Setting its Properties:
==========================
Page will appear as below :



1) Create a new region under pageLayout of type defaultSingleColumn.
2) Create 2 items under defaultSingleColumn region (messageLovInput, messageLovInput).

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

pageLayout:
         ID: pageLayoutRN
         AM Definition: xxcus.oracle.apps.fnd.dpndntlov.server.XxDemoDependentLovAM
         Window Title: Dependent LOV Demo Page
         Title: Dependent LOV Demo

defaultSingleColumn: 
         ID: singleColRN; Text: PO Lines Dependent on PO Header

messageLovInput (for PO Header): 
         ID: poHearderLov
         Prompt: PO Header ID

messageLovInput (for PO Lines):
         ID: poLineLov
         Prompt: PO Line ID
 
Creating LOV regions:

Expand poHearderLov LOV, right click on region1 and create a new region using wizard.

Step 1
select 'XxDemoDependentLovAM' from Application Module drop down and select 'XxPoHeaderLovVO1' in available view usages. Click Next.

Step 2
choose region style as 'table' from drop down. Click Next.

Step 3
Shuttle all the fields from available to selected attributes. Click Next.
Also modify the prompt to make it more user friendly (like PO Header ID).

This will create an item 'PoHeaderId' under 'XxPoHeaderLovVO1' table region.
Set search allowed property to TRUE for the item created.
      lovMap1:
            LOV region item: PoHeaderId
            Return item: poHearderLov
            Criteria item: poHearderLov

Similarly, create LOV region for poLineLov choosing XxDemoDependentLovAM as AM and XxPoLinesLovVO1 as view object.
Modify the prompt to PO Lines ID.

This will create 2 items 'PoHeaderId1' & 'PoLineId' under 'XxPoLinesLovVO1' table region.
Set search allowed property of 'PoLineId' to TRUE.

      lovMap2:
            LOV region item: PoLineId
            Return item: poLineLov
            Criteria item: poLineLov

Here, in lovMap3, we are making this dependent on first LOV by setting criteria item as value of first LOV field.
      lovMap3:
            LOV region item:PoHeaderId1
            Criteria item: poHearderLov

The declarative page structure in jDev will be similar to as shown below:


Now select a value (PO Header Id) from LOV1 such as 4 (as shown in above screenshot).

Perform a search on PO Line ID LOV. This will show only those lines whose header Id is 4.
Below is screenshot for the same: