Thursday, December 18, 2008

Using "Prompt LOV" to replace "Popup Key LOV"

Another post about jQuery in APEX! :) I am really happy to see the interest the APEX Community has for jQuery.

After reading Dan McGhan's blog post concerning jQuery Impromptu, I decided to try this jQuery extension. For my demo, I decided to replace a "Popup Key LOV (Displays description, returns key value)" with a "Prompt LOV".
I was able to reuse code from previous demos to accelerate the development.

Here is a working example of the Prompt LOV & Calendar demo.

How does it works?

1)I assume you check and understand these demos:
A)Popup in Report
B)AJAX request Page Report
C)jQuery Datepicker

Now... we can continue to the next step. :)

2)Replace the existing Popup LOV with a Prompt. The prompt will display a report from another page(in this case, it's the page 42). The report is requested using AJAX.

This is the JavaScript code you need:

$().ready(function() {
//Replace existing POPUP-LOV
$("#P41_DEPTNO_fieldset a")

//request DEPT Report
var startTag = '<apex:ajax>';
var endTag = '</apex:ajax>';
var start = data.indexOf(startTag);

if (start > 0) {
data = data.substring(start+startTag.length);
var end = data.indexOf(endTag);
data = data.substring(0,end);

//Prompt the user with the LOV
$.prompt(data,{callback: function(v,m){
//Put the original pFlowStepId value to submit the page and process it

//Workaround to make the report "pagination" and "order by" work

3)The LOV is a Report Region using an SQL Query.

This is the query used to populate the report:

SELECT '<a href="#" onclick="select_lov_entry(this,'''||dname||''','''||deptno||''');">'||dname||'</a>' AS lov_entry
FROM dept

This is the JavaScript code you need for selecting a value:

function select_lov_entry(pNd,x,y) {

//Copy an existing function used by the original POP-UP LOV
//Small modifications are required (we are not referencing an opener window)
function passBack(x,y){
if (document.forms["wwv_flow"].p_t09.length > 1){
var l_field = document.forms["wwv_flow"].p_t09[8];
l_field.value = x;
document.forms["wwv_flow"].p_t08[8].value = y;
var l_field = document.forms["wwv_flow"].p_t09;
l_field.value = x;
document.forms["wwv_flow"].p_t08.value = y;
if(l_field.getAttribute('onchange') || l_field.onchange){
if(!(l_field.disabled || l_field.type == 'HIDDEN')){

function highlight_selection(pNd) {
jQuery(pNd).parent().css({'background-color' : '#55AAFF'});

I have to rethink about how to passBack values from the Prompt LOV to the "P41_DEPTNO_fieldset" items. This is for another blog post. ;)

I hope you enjoy this demo!