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")
.attr('href','#')
.click(function(e){
e.preventDefault();

//request DEPT Report
$.post("wwv_flow.show",
{p_flow_id:$('#pFlowId').attr("value"),
p_flow_step_id:"42",
p_instance:$('#pInstance').attr("value"),
p_request:""},
function(data){
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
$('#pFlowStepId').attr("value","41");
}
});

//Workaround to make the report "pagination" and "order by" work
$('#pFlowStepId').attr("value","42");
}
);
});
});


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) {
passBack(x,y);
highlight_selection(pNd);
}

//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;
}
else{
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){
l_field.onchange();
}
if(!(l_field.disabled || l_field.type == 'HIDDEN')){
l_field.focus();
}
}

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!

3 comments:

Stew said...

Wow that's a LOT of code just to make the pop-up LOV look better!

It's nice looking, but wow.

I'll clip this to my Evernote notebook for future possible reference!

Louis-Guillaume Carrier-Bédard said...

Hi Stew,

I suggest you wait for Apex 4.0. We'll be able to create custom items (apex plugins) to make those nice things easier to integrate.

It's not that much code... easy to cut 'n paste and modify. :)

Stew said...

> It's not that much code... easy to cut 'n paste and modify. :)

Easy for you to say! ;-)

As I said, I like the end-result. I just don't have the Javascript skills (yet) to be able to maintain it if it broke.

But we're all waiting for 4.0! Or at least 4.0.1! ;-)