APEX 3.2 (Oracle): on change of an item dynamically populates the values of other items on the page - oracle-apex

Question

I am on APEX 3.2 and in a form used to insert fields f1 and f2 in table f, I would like to have a couple of text items that will automatically populate and display based on the data typed in f1 and from a query on table t. In other word, typing empno in f1, moving to the f2 box the user should automaticcaly see emp last_name and first_name displayed. This way she can verify the empno typed was correct, type other data in f2 and submit the form.
Any suggestion on how to reach this scope?
I guess I should use some javascript.
Many thanks.
Gabriele

Answer 1

I can see that you may already be going down the javascript road... I have worked with APEX 3.2 in the past on a similar problem and didn't know enough javascript to get this kind of dynamic functionality out of the platform. If you want to try an alternate method, you can tweak your user interface to provide the functionality you seek, but you'll have to check with the users if they can adapt to this style of approach, which you should be able to do using existing 3.2 functionality and no additional scripting:
Requirements:
Based on field inputs of field1 and field2, auto-populate an apex page with data from an existing table so that the user can confirm if the data inputted in field1 and field2 are correct. Use the data from the search results as parameters for input to a new process or form.
Suggested Design:
Page 1: start with blank page, then add three items: field1, field2 and a "submit" button.
add page process (after submit, conditional on submit button item) that redirects to Page 2 setting items P2_field1 and P2_field2 from the values on the Page 1 form.
Page 2: report page. set a query that will search your table of existing employees searching by partial or full string searches against the employee table. APEX 3.2 used to use the following convention to get around partial and case sensitive matching issues:
SELECT field1, field2, field3, field4, ...
FROM table1
WHERE instr(upper(field1), upper(:P2_field1), 1, 1) > 0
AND instr(upper(field2), upper(:P2_field2), 1, 1) > 0
Creating a report output "table" for a search effort helps when there may be multiple answers to the same search query... such as with common names like "Smith" or "John"...
Add an additional column to the report output or make the name column (field1 or field2) a linked column that goes to page 3 feeding the queried data from the employee table.
add the property to the column value on the report editor: redirect to "page 3", set P3_key = #KEY# where page 3 is your final target form or process and "key" is the index or primary key of the table you are searching from... or you can feed the n number of values needed already queried from the lookup table to populate the page 2 report.
I guess the important take-home is an appreciation for the limitations of older versions of Apex along with possible limitations with knowledge of advanced web scripting languages. Your requirements are still achievable even if all you are familiar with is the basics of your Apex version and a little SQL.
note: if your lookup table is HUGE (hundreds of thousands of records), you may need to consult your DBA for help with optimizing the table to handle the SQL search query. Adding UPPER and INSTR functions to the WHERE criteria isn't really the most efficient way to query large datasets without additional help in optimization.

Answer 2

I'm not a 3.2 wiz, i haven't worked with it. I do know there are no dynamic actions and no page on-demand process points, so i've worked with that in mind.
Application process: 'get_emp_details'
(I don't know the processing point you can/need to choose in 3.2. If you can pick on-demand, go for it.)
Code:
DECLARE
lEmp emp%rowtype;
BEGIN
SELECT *
INTO lEmp
FROM emp
WHERE empno = :P7_EMPNO;
htp.p('{"result":"ok", "emp":{"ename":"'||lEmp.ename||'","job":"'||lEmp.job||'"}}');
EXCEPTION
WHEN no_data_found THEN
htp.p('{"result":"nok", "emp":{}}');
END;
On your page (in my case i have used page 7, change the page numbers to your page number!) put this in the html headers section (or if you have the javascript section there, put the javascript code there without the script tags):
Edit: added in console.log lines. Mind that these will produce javascript errors in IE when the developer tools (F12) are not opened!
<script type="text/javascript">
$(document).ready(function(){
console.log('document is ready');
$("#P7_EMPNO").change(function(){
var oDBGet = new htmldb_Get(null, $('pFlowId').val(), "APPLICATION_PROCESS=get_emp_details", '0');
oDBGet.add('P7_EMPNO', $("#P7_EMPNO").val());
var oResult = oDBGet.get();
var lReturn = $.parseJSON(oResult);
if(lReturn.result=='ok'){
var lEmp = lReturn.emp;
$("#P7_ENAME").val(lEmp.ename);
} else {
alert('ename could not be found for this empno!');
};
});
});
</script>
This will do an ajax callback when the EMPNO changes, and change the ename of the employee. Since there are no temporary application items that can be used (apex_application.g_x##) i'm submitting the required page item to session state. In this case P7_EMPNO is added to the p_arg_names array and its value in the corresponding position in the p_arg_values array. This is necessary because the session state of P7_EMPNO is used in the application process.
When inspecting the console tab in Firebug:
Post values of ajax call:
Response values of ajax call:

Answer 3

Tom,
here is your code modified to work in my system:
-- On Demand Application Process get_emp_details:
DECLARE
lEmp emp%rowtype;
BEGIN
SELECT *
INTO lEmp
FROM emp
WHERE badge = :P2_BADGE;
htp.p('{"result":"ok", "emp":{"lastname":"'||lEmp.last_name||'","firstname":"'||lEmp.first_name||'"}}');
EXCEPTION
WHEN no_data_found THEN
htp.p('{"result":"nok", "emp":{}}');
END;
-- Javascript in page header:
<script type="text/javascript">
$(document).ready(function(){
$("#P2_BADGE").change(function(){
$.post('wwv_flow.show',
{"p_request" : "APPLICATION_PROCESS=get_emp_details",
"p_flow_id" : $v('pFlowId'),
"p_flow_step_id" : '0',
"p_instance" : $v('pInstance'),
"p_arg_names" : ['P2_BADGE'],
"p_arg_values" : [$('#P2_BADGE').val()]},
function(data){
if(data){
var lReturn = $.parseJSON(data);
if(lReturn.result=='ok'){
var lEmp = lReturn.emp;
$("#P2_LAST_NAME").val(lEmp.last_name);
} else {
alert('ename could not be found for this empno!');
};
};
}
);
});
});
</script>
I am probably missing something and it doesn't display last_name in P2_LAST_NAME when I type the badge number in P2_BADGE.
Thanks,
Gabriele
Tom, here is what I have in the watch right window of firebug for the function(data) step:
this
function()
arguments
[
"wwv_flow.show"
, Object { p_request=
"APPLICATION_PROCESS=get_emp_details"
, p_flow_id=
"120"
, p_flow_step_id=
"0"
, more...}, function()]
0
"wwv_flow.show"
1
Object { p_request=
"APPLICATION_PROCESS=get_emp_details"
, p_flow_id=
"120"
, p_flow_step_id=
"0"
, more...}
p_arg_names
[
"P2_BADGE"
]
p_arg_values
[
"155752"
]
p_flow_id
"120"
p_flow_step_id
"0"
p_instance
"2189517750670012"
p_request
"APPLICATION_PROCESS=get_emp_details"
2
function()
e
"wwv_flow.show"
r
Object { p_request=
"APPLICATION_PROCESS=get_emp_details"
, p_flow_id=
"120"
, p_flow_step_id=
"0"
, more...}
p_arg_names
[
"P2_BADGE"
]
p_arg_values
[
"155752"
]
p_flow_id
"120"
p_flow_step_id
"0"
p_instance
"2189517750670012"
p_request
"APPLICATION_PROCESS=get_emp_details"
s
undefined
i
function()
toString
function()
Closure Scope
Closure Scope { toString=function()}
Closure Scope
Closure Scope { toString=function()}
Window
Window f?p=120:2:2189517750670012::NO:::
From my firebug 1.10.6 console:
document is ready
f?p=12...::NO::: (line 29)
empno has changed
f?p=12...::NO::: (line 31)
performing a post with empno value: undefined
f?p=12...::NO::: (line 32)
POST
400 Bad Request
48ms
wwv_fl....min.js (line 2)
HeadersPostResponseHTMLCookies
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<HTML><HEAD>
<TITLE>400 Bad Request</TITLE>
</HEAD><BODY><H1>Bad Request</H1>
The HTTP client sent a request that this server could not understand.</BODY></HTML>
-- And the post tab:
Parametersapplication/x-www-form-urlencoded
p_arg_names[] P2_BADGE
p_arg_values[] 155751
p_flow_id 120
p_flow_step_id 0
p_instance 4466366911674565
p_request APPLICATION_PROCESS=get_emp_details
Source
p_request=APPLICATION_PROCESS%3Dget_emp_details&p_flow_id=120&p_flow_step_id=0&p_instance=4466366911674565&p_arg_names%5B%5D=P2_BADGE&p_arg_values%5B%5D=155751