"Cascading" popup list on tabular form

Here is how you can create cascading popup LOV on tabular form.

First create application item called G_POPUP_PARENT_VALUE

Create application On Demand process called DUMMY and enter to process text:

htp.prn('OK');

Add to page HTML header:

<style type="text/css">
    .ui-autocomplete-loading{background: url("#IMAGE_PREFIX#libraries/jquery-ui/1.8/themes/base/images/ui-anim_basic_16x16.gif") no-repeat scroll right center transparent;}
    </style>
    

Add to tabular form page JavaScript Function and Global Variable Declaration:

(function($){;
     /*** Cascading popup list ***/
     $.fn.htmldbCascadePopup=function(parent,tempItem,options){
     
      options=$.extend({
       loadingTxt    : "Loading ...",
       loadingCss    : {"width":"80px","float":"left"}
      },options);
      
      return this.each(function(i){
      
       var self=$(this);
       var anchor=self.next("a");
       var lParent=$(parent).eq(i);
       var lHref=anchor.attr("href").substr(11);
       var lPopupFn=new Function(lHref);
       /* Clear child when parent changes */
       lParent.change(function(){
        self.val("");
       });
       
       anchor.click(function(e){
        e.preventDefault();
        
        var lParentVal=$(lParent).val();
        if(!lParentVal){lParentVal="";};
       
        $.ajax({
         type:"POST",
         async:false,
         url:"wwv_flow.show",
         data:{
          p_flow_id:"&APP_ID.",
          p_flow_step_id:"&APP_PAGE_ID.",
          p_instance:"&APP_SESSION.",
          p_request:"APPLICATION_PROCESS=DUMMY",
          p_arg_names:tempItem,
          p_arg_values:lParentVal
         },beforeSend:function(){
          self
           .hide()
           .after($("<div/>",{"html":options.loadingTxt,"css":options.loadingCss,"class":"ui-autocomplete-loading"})
            .width(self.outerWidth())
            .height(self.outerHeight())
           );
         },complete:function(){
          lPopupFn();
          self
           .show()
           .next("div.ui-autocomplete-loading")
           .remove();
         }
        });
        
       });
      });
     };
    })(apex.jQuery);
    

Next edit your tabular form popup LOV column List of values definition. In my example Employees form I have placed to Manager column List of values definition:

SELECT ename AS DIS,
      empno AS RET
    FROM emp
    WHERE deptno = :G_POPUP_PARENT_VALUE
    

Create dynamic Action. Select Advanced

• Name: Set cascading Popup LOV after refresh and onload
• Event: After Refresh
• Selection Type: Region
• Region: {select your report region}
• Condition: No Condition
• Action: Execute JavaScript code
• Fire On Page Load: True
• Code:

$("[name=f01]").htmldbCascadePopup(
    "[name=f02]",
    "G_POPUP_PARENT_VALUE"
    );
    

• Selection Type: None

In JavaScript code use popup LOV name attribute as jQuery selector and replace f01 according your popup LOV column input name. Other parameters are parent item jQuery selector and application item name.

Edit tabular form Add Row button and change action to "Defined by Dynamic Action".

Create another dynamic Action. Select Advanced

• Name: Set cascading popup LOV for new row
• Event: Click
• Selection Type: Button
• Button: {select your form add row button}
• Condition: No Condition
• Action: Execute JavaScript code
• Fire On Page Load: False
• Code:

addRow();
    $("[name=f01]:last").htmldbCascadePopup(
    "[name=f02]:last",
    "G_POPUP_PARENT_VALUE"
    );
    

• Selection Type: None

In second dynamic action JavaScript we call addRow function. Rest of code is same as fist dynamic action, except add jQuery :last selector. We need add last selector to get only added row. See example from above where add last selector.

See working example.

Sample is also available for download.