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!