application express (apex): introduction and deployment - part 2
Post on 27-Nov-2014
3.892 Views
Preview:
DESCRIPTION
TRANSCRIPT
The Oracle Experts
Oracle Application Express Advanced Topics
By Lawrence Linnemeyer, TUSC
Oracle Certified Advantage Partner
The Oracle Experts
Objective
Rather than giving you an overview of a lot of advanced topics, where you would return and struggle with exactly how they were accomplished, my objective with this presentation is to give you a few advanced topics with a lot of detail about how to implement them so that you may easily implement them in your own work.
The Oracle Experts
Agenda
Custom Pop up returning multiple values
One page multi-record master detail reports, highlighting current row.
Using AJAX to update the page without refreshing the whole page
Handling multiple dynamic checkboxes
Package approach to multi-edit form
Approach to manage CSS and JS files
The Oracle Experts
Custom Pop Ups Returning Multiple Values
The Oracle Experts
Key Elements
Button with JavaScript to call popup
Popup page Can be a SQL report or dynamic pl/sql region
Can accept parameters to limit search results
Can utilize any search methodology
Calls JavaScript to pass back values
JavaScript to pass back one or more values
The Oracle Experts
Button with JavaScript call
Button is on a normal text field, made up of an image and a JavaScript call
The Oracle Experts
Button and JavaScript call
Post Element Text
<a href="javascript:callFindEmpPopup( 'P4_EMPNO', 'P4_ENAME', 'P4_SAL', 'P4_COMM', document.forms[0].P4_DEPT_NO.value, '&APP_SESSION.', '&APP_ID.');“ tabindex="999"><img src="/i/htmldb/icons/view_small.gif" border="0" width="18" height="18" alt="popup list of values"></a>
The Oracle Experts
Button and JavaScript call
Post Element Text
<a href="javascript:callFindEmpPopup( 'P4_EMPNO', 'P4_ENAME', 'P4_SAL', 'P4_COMM', document.forms[0].P4_DEPT_NO.value, '&APP_SESSION.', '&APP_ID.');“ tabindex="999"><img src="/i/htmldb/icons/view_small.gif" border="0" width="18" height="18" alt="popup list of values"></a>
Create an active link
Call JavaScript function
The Oracle Experts
Button and JavaScript call
Post Element Text
<a href="javascript:callFindEmpPopup( 'P4_EMPNO', 'P4_ENAME', 'P4_SAL', 'P4_COMM', document.forms[0].P4_DEPT_NO.value, '&APP_SESSION.', '&APP_ID.');“ tabindex="999"><img src="/i/htmldb/icons/view_small.gif" border="0" width="18" height="18" alt="popup list of values"></a>
Pass object name
Pass objects value
Use substitutions
The Oracle Experts
Button and JavaScript call
Post Element Text
<a href="javascript:callFindEmpPopup( 'P4_EMPNO', 'P4_ENAME', 'P4_SAL', 'P4_COMM', document.forms[0].P4_DEPT_NO.value, '&APP_SESSION.', '&APP_ID.');“ tabindex="999"><img src="/i/htmldb/icons/view_small.gif" border="0" width="18" height="18" alt="popup list of values"></a>
Image tag to display button as part of link
The Oracle Experts
Button and JavaScript call
JavaScript function can be defined in the HTML Header section of the page attributes or it can be in an included JavaScript file
The Oracle Experts
JavaScript to call Popup
<script language="JavaScript" type="text/javascript"><!--function callFindEmpPopup(s1, s2, s3, s4, deptId, sessionId, appId) { var pURL = 'f?p=' + appId + ':5:' + sessionId + ':::5:P5_PASSBACK,P5_PB2,P5_PB3,P5_PB4, P5_DEPT_NO:'+ s1 +',' + s2 + ',' + s3 + ',' + s4 + ',' + deptId; html_PopUp(pURL,'EmpPop',null,null); }
//--></script>
"javascript:callFindEmpPopup( ‘P4_EMPNO’, ‘P4_ENAME’, ‘P4_SAL’, ‘P4_COMM’, document.forms[0].P4_DEPT_NO.value, '&APP_SESSION.', '&APP_ID.');"
The Oracle Experts
JavaScript to call Popup
<script language="JavaScript" type="text/javascript"><!--function callFindEmpPopup(s1, s2, s3, s4, deptId, sessionId, appId) { var pURL = 'f?p=' + appId + ':5:' + sessionId + ':::5:P5_PASSBACK,P5_PB2,P5_PB3,P5_PB4, P5_DEPT_NO:'+ s1 +',' + s2 + ',' + s3 + ',' + s4 + ',' + deptId; html_PopUp(pURL,'EmpPop',null,null); }
//--></script>
"javascript:callFindEmpPopup( ‘P4_EMPNO’, ‘P4_ENAME’, ‘P4_SAL’, ‘P4_COMM’, document.forms[0].P4_DEPT_NO.value, '&APP_SESSION.', '&APP_ID.');"
The Oracle Experts
JavaScript to call Popup
<script language="JavaScript" type="text/javascript"><!--function callFindEmpPopup(s1, s2, s3, s4, deptId, sessionId, appId) { var pURL = 'f?p=' + appId + ':5:' + sessionId + ':::5:P5_PASSBACK,P5_PB2,P5_PB3,P5_PB4, P5_DEPT_NO:'+ s1 +',' + s2 + ',' + s3 + ',' + s4 + ',' + deptId; html_PopUp(pURL,'EmpPop',null,null); }
//--></script>
f?p=130:5:16683206982332333874:::5:5:P5_PASSBACK,P5_PB2,P5_PB3,P5_PB4,P5_DEPT_NO:P4_EMPNO,P4_ENAME,P4_SAL,P4_COMM,10
Construct URL
The Oracle Experts
JavaScript to call Popup
<script language="JavaScript" type="text/javascript"><!--function callFindEmpPopup(s1, s2, s3, s4, deptId, sessionId, appId) { var pURL = 'f?p=' + appId + ':5:' + sessionId + ':::5:P5_PASSBACK,P5_PB2,P5_PB3,P5_PB4, P5_DEPT_NO:'+ s1 +',' + s2 + ',' + s3 + ',' + s4 + ',' + deptId; html_PopUp(pURL,'EmpPop',null,null); }
//--></script>
function html_PopUp(pURL,pName,pWidth,pHeight)in htmldb_html_elements.jshttp://lcllaptop.here.com:7779/i/javascript/htmldb_html_elements.js
Call APEX provided function
The Oracle Experts
Pop Up Page
The Oracle Experts
Pop Up Page
Hidden items accept values
f?p=130:5:16683206982332333874:::5:5:P5_PASSBACK,P5_PB2,P5_PB3,P5_PB4,P5_DEPT_NO:P4_EMPNO,P4_ENAME,P4_SAL,P4_COMM,10
The Oracle Experts
Pop Up Page – Two Approaches
The Oracle Experts
JavaScript call constructed
javascript:passBackValues(‘P4_EMPNO',P4_EMPNO','7839',‘P4_ENAME','KING',‘P4_SAL','5000',‘P4_COMM','')
or
=
The Oracle Experts
PassBack JavaScript
<script language="JavaScript" type="text/javascript"><!--
function passBackValues(E0, E1, V1, E2, V2, E3, V3, E4, V4){ if (E1 != null){ opener.document.getElementById(E1).value = V1; } if (E2 != null){ opener.document.getElementById(E2).value = V2; } if (E3 != null){ opener.document.getElementById(E3).value = V3; } if (E4 != null){ opener.document.getElementById(E4).value = V4; } opener.document.getElementById(E0).focus(); close();}//--></script>
javascript:passBackValues(
‘P4_EMPNO',‘P4_EMPNO','7839',‘P4_ENAME','KING',‘P4_SAL','5000',‘P4_COMM','')
The Oracle Experts
PassBack JavaScript
<script language="JavaScript" type="text/javascript"><!--
function passBackValues(E0, E1, V1, E2, V2, E3, V3, E4, V4){ if (E1 != null){ opener.document.getElementById(E1).value = V1; } if (E2 != null){ opener.document.getElementById(E2).value = V2; } if (E3 != null){ opener.document.getElementById(E3).value = V3; } if (E4 != null){ opener.document.getElementById(E4).value = V4; } opener.document.getElementById(E0).focus(); close();}//--></script>
javascript:passBackValues(
‘P4_EMPNO',‘P4_EMPNO','7839',‘P4_ENAME','KING',‘P4_SAL','5000',‘P4_COMM','')
The Oracle Experts
PassBack JavaScript
<script language="JavaScript" type="text/javascript"><!--
function passBackValues(E0, E1, V1, E2, V2, E3, V3, E4, V4){ if (E1 != null){ opener.document.getElementById(E1).value = V1; } if (E2 != null){ opener.document.getElementById(E2).value = V2; } if (E3 != null){ opener.document.getElementById(E3).value = V3; } if (E4 != null){ opener.document.getElementById(E4).value = V4; } opener.document.getElementById(E0).focus(); close();}//--></script>
javascript:passBackValues(
‘P4_EMPNO',‘P4_EMPNO','7839',‘P4_ENAME','KING',‘P4_SAL','5000',‘P4_COMM','')
The Oracle Experts
PassBack JavaScript
<script language="JavaScript" type="text/javascript"><!--
function passBackValues(E0, E1, V1, E2, V2, E3, V3, E4, V4){ if (E1 != null){ opener.document.getElementById(E1).value = V1; } if (E2 != null){ opener.document.getElementById(E2).value = V2; } if (E3 != null){ opener.document.getElementById(E3).value = V3; } if (E4 != null){ opener.document.getElementById(E4).value = V4; } opener.document.getElementById(E0).focus(); close();}//--></script> Close Popup
Window
The Oracle Experts
PassBack JavaScript
<script language="JavaScript" type="text/javascript"><!--
function passBackValues(E0, E1, V1, E2, V2, E3, V3, E4, V4){ if (E1 != null){ opener.document.getElementById(E1).value = V1; } if (E2 != null){ opener.document.getElementById(E2).value = V2; } if (E3 != null){ opener.document.getElementById(E3).value = V3; } if (E4 != null){ opener.document.getElementById(E4).value = V4; } opener.document.getElementById(E0).focus(); var parentWindow = window.opener; close(); parentWindow.doSubmit('QUERY');
close();}//--></script>
get parent window JS function to submit
This is added code not shown before if you want to refresh calling window
The Oracle Experts
One Page Multi Record Master Detail
The Oracle Experts
Key Elements
SQL Report Regions Link to select current master record
Detail SQL Query limited by “selected” master row
Hidden Items to implement details
Custom Templates to highlight current row Variation on alternating color report template
PL/SQL expression condition for “selected” row
The Oracle Experts
SQL Report Regions
Decode primary key against hidden item for “selected” master row
select decode(customer_id, :P1_CUST_ID, 'CURRENT', 'Select') sel_label, customer_id, cust_last_name||', '|| cust_first_name as cust_name, cust_street_address1||'<br>'|| Cust_city||', '|| cust_state|| ' '||cust_postal_code address from demo_customers
The Oracle Experts
“Select “ Links
The Oracle Experts
Hidden Items for “Selected” row
Hidden items used to track “selected” master and for dynamic Region titles.
The Oracle Experts
Default Details for new Master
declare cursor data_cur is select order_id,order_timestamp from demo_orders where customer_id = :P1_CUST_ID;begin open data_cur; fetch data_cur into :P1_ORDER_ID, :P1_ORDER_DATE; close data_cur;end;
The Oracle Experts
Detail Region
Detail Query limited by “Selected” master row
select decode(order_id, :P1_ORDER_ID, 'CURRENT', 'Select') sel_label, order_timestamp, order_total, order_id from demo_orders where customer_id = :P1_CUST_ID
The Oracle Experts
Custom Template
•Hidden item used in PL/SQL expression to determine “Selected” row•Based off of current themes alternating row report template
The Oracle Experts
Custom Template
Compare “selected” variableagainst current row
The Oracle Experts
Using AJAX
Asynchronous Java Script and XML Not new technology, just combination of existing Interacts with the server without refreshing the page
Used a lot in APEX SQL workshop
APEX makes implementation simple
Refresh a variety of objects Single display item Multi-value things such as select list Entire report regions
The Oracle Experts
Using AJAX
Select a valuePopulates Job
Select a departmentPopulates select list
The Oracle Experts
AJAX Key Elements
Item with onChange event
JavaScript function called by onChange Calls Process using htmldb_Get
Uses results
Application Level Process On Demand
returns value or XML document
Application Level Items, used in process
Page Zero
The Oracle Experts
AJAX using a Query Process
Two page items•Select list with onChange trigger•Text field to accept value
Select list calls JavaScript function when its value is changed
The Oracle Experts
AJAX using a Query Process
Create an Application level process•Process Point – On Demand•Type – PL/SQL Block
declare v_job varchar2(10);begin select job into v_job from emp where empno = :F130_EMPNO; htp.prn(v_job);end;
Process source selects a job based on the application level item F130_EMPNO
Returns results via HTML using pl/sql web toolkit
The Oracle Experts
AJAX using a Query Process
JavaScript bringsit all together
Defined in HTMLHeader section of Page Attributes
The Oracle Experts
AJAX using a Query Process
<script language="JavaScript1.1" type="text/javascript">function getJob(callObj,setObj,pWhat) { var get = new htmldb_Get(null, &APP_ID., 'APPLICATION_PROCESS=getEmpJob', 0); get.add('F130_EMPNO',callObj.value) var gReturn= get.get(); if(gReturn && pWhat == 'OBJ') { html_GetElement(setObj).value = gReturn } else if (gReturn && pWhat == 'DIV') { html_GetElement(setObj).innerHTML = gReturn } else { html_GetElement(setObj).value = 'null' } get = null;}</script>
The Oracle Experts
AJAX using a Query Process
<script language="JavaScript1.1" type="text/javascript">function getJob(callObj,setObj,pWhat) { var get = new htmldb_Get(null, &APP_ID., 'APPLICATION_PROCESS=getEmpJob', 0); get.add('F130_EMPNO',callObj.value) gReturn= get.get(); if(gReturn && pWhat == 'OBJ') { html_GetElement(setObj).value = gReturn } else if (gReturn && pWhat == 'DIV') { html_GetElement(setObj).innerHTML = gReturn } else { html_GetElement(setObj).value = 'null' } get = null;}</script>
Three parameters
•The calling object
•The name of the object to set
•A literal to tell what the set object is.
The Oracle Experts
AJAX using a Query Process
<script language="JavaScript1.1" type="text/javascript">function getJob(callObj,setObj,pWhat) { var get = new htmldb_Get(null, &APP_ID., 'APPLICATION_PROCESS=getEmpJob', 0); get.add('F130_EMPNO',callObj.value) gReturn= get.get(); if(gReturn && pWhat == 'OBJ') { html_GetElement(setObj).value = gReturn } else if (gReturn && pWhat == 'DIV') { html_GetElement(setObj).innerHTML = gReturn } else { html_GetElement(setObj).value = 'null' } get = null;}</script>
Three parameters
•The calling object
•The name of the object to set
•A literal to tell what the set object is.
The Oracle Experts
AJAX using a Query Process
<script language="JavaScript1.1" type="text/javascript">function getJob(callObj,setObj,pWhat) { var get = new htmldb_Get(null, &APP_ID., 'APPLICATION_PROCESS=getEmpJob', 0); get.add('F130_EMPNO',callObj.value) gReturn= get.get(); if(gReturn && pWhat == 'OBJ') { html_GetElement(setObj).value = gReturn } else if (gReturn && pWhat == 'DIV') { html_GetElement(setObj).innerHTML = gReturn } else { html_GetElement(setObj).value = 'null' } get = null;}</script>
Variable get is new instantiation of htmldb_get
•It will call the on demand application process
•Executes using page zero
The Oracle Experts
AJAX using a Query Process
<script language="JavaScript1.1" type="text/javascript">function getJob(callObj,setObj,pWhat) { var get = new htmldb_Get(null, &APP_ID., 'APPLICATION_PROCESS=getEmpJob', 0); get.add('F130_EMPNO',callObj.value) var gReturn= get.get(); if(gReturn && pWhat == 'OBJ') { html_GetElement(setObj).value = gReturn } else if (gReturn && pWhat == 'DIV') { html_GetElement(setObj).innerHTML = gReturn } else { html_GetElement(setObj).value = 'null' } get = null;}</script>
The add method of an htmldb_Get allows you to set the cached value of an application or page item. Recall this is the application item that is being referenced in the query of the application process.
This could have been a page item but we are using this AJAX process in two different places
The Oracle Experts
AJAX using a Query Process
<script language="JavaScript1.1" type="text/javascript">function getJob(callObj,setObj,pWhat) { var get = new htmldb_Get(null, &APP_ID., 'APPLICATION_PROCESS=getEmpJob', 0); get.add('F130_EMPNO',callObj.value) var gReturn= get.get(); if(gReturn && pWhat == 'OBJ') { html_GetElement(setObj).value = gReturn } else if (gReturn && pWhat == 'DIV') { html_GetElement(setObj).innerHTML = gReturn } else { html_GetElement(setObj).value = 'null' } get = null;}</script>
The gReturn var will contain the results of the process.
The get method of an htmldb_Get retrieves the results of the process
The Oracle Experts
AJAX using a Query Process
<script language="JavaScript1.1" type="text/javascript">function getJob(callObj,setObj,pWhat) { var get = new htmldb_Get(null, &APP_ID., 'APPLICATION_PROCESS=getEmpJob', 0); get.add('F130_EMPNO',callObj.value) gReturn= get.get(); if(gReturn && pWhat == 'OBJ') { html_GetElement(setObj).value = gReturn } else if (gReturn && pWhat == 'DIV') { html_GetElement(setObj).innerHTML = gReturn } else { html_GetElement(setObj).value = 'null' } get = null;}</script>
The htmldb_GetElement function returns the JavaScript document element with the name of setObj
Depending on the type of object that the setObj is, either set its value or its innerHTML
The Oracle Experts
AJAX using an XML Process
The Oracle Experts
AJAX using an XML Process
Create an Application level process•Process Point – On Demand•Type – PL/SQL Block
declare cursor data_cur is select empno, ‘<![CDATA[‘ || ename ||’]]>’ from emp where deptno = :F130_DEPTNO; v_results varchar2(1000);begin
Process source selects all empnoand ename for employees in the department specified by theapplication level item F130_DEPTNO
Returns an XML documnet viaHTML using pl/sql web toolkit
The Oracle Experts
AJAX using an XML Process
Resulting XML document will look as follows
<options> <option value=“7839”>KING</option> <option value=“7782”>CLARK</option> <option value=“7934”>MILLER</option></options>
The Oracle Experts
AJAX using an XML Process
begin owa_util.mime_header('text/xml', FALSE ); htp.p('Cache-Control: no-cache'); htp.p('Pragma: no-cache'); owa_util.http_header_close; htp.prn('<options>');
for it in data_cur loop htp.prn('<option value="' || it.empno || '">' || it.ename || '</option>'); end loop; htp.prn('</options>');end;
Create header of XML document
The Oracle Experts
AJAX using an XML Process
begin owa_util.mime_header('text/xml', FALSE ); htp.p('Cache-Control: no-cache'); htp.p('Pragma: no-cache'); owa_util.http_header_close; htp.prn('<options>');
for it in data_cur loop htp.prn('<option value="' || it.empno || '">' || it.ename || '</option>'); end loop; htp.prn('</options>');end;
Open the options
Create each option
Close the options
The Oracle Experts
AJAX using an XML Process
<script language="JavaScript1.1" type="text/javascript">function getEmpLov(callObj, pSelect) { var theSelect = html_GetElement(pSelect); var get = new htmldb_Get(null, html_GetElement('pFlowId').value, 'APPLICATION_PROCESS=getEmpLOV',0); get.add('F130_DEPTNO',callObj.value) gReturn= get.get('XML'); if(gReturn && theSelect) { var cnt = gReturn.getElementsByTagName("option").length; theSelect.length = 0; /*clear existing list*/ var newOpt = document.createElement("option"); newOpt.value = ' '; newOpt.text = '-Select an Employee-'; try {
Two parameters
•The calling object
•The name of the select list object
Two parameters
•The calling object
•The name of the select list object
The Oracle Experts
AJAX using an XML Process
<script language="JavaScript1.1" type="text/javascript">function getEmpLov(callObj, pSelect) { var theSelect = html_GetElement(pSelect); var get = new htmldb_Get(null, html_GetElement('pFlowId').value, 'APPLICATION_PROCESS=getEmpLOV',0); get.add('F130_DEPTNO',callObj.value) gReturn= get.get('XML'); if(gReturn && theSelect) { var cnt = gReturn.getElementsByTagName("option").length; theSelect.length = 0; /*clear existing list*/ var newOpt = document.createElement("option"); newOpt.value = ' '; newOpt.text = '-Select an Employee-'; try {
Two parameters
•The calling object
•The name of the select list object
Two parameters
•The calling object
•The name of the select list object
The Oracle Experts
AJAX using an XML Process
<script language="JavaScript1.1" type="text/javascript">function getEmpLov(callObj, pSelect) { var theSelect = html_GetElement(pSelect); var get = new htmldb_Get(null, html_GetElement('pFlowId').value, 'APPLICATION_PROCESS=getEmpLOV',0); get.add('F130_DEPTNO',callObj.value) gReturn= get.get('XML'); if(gReturn && theSelect) { var cnt = gReturn.getElementsByTagName("option").length; theSelect.length = 0; /*clear existing list*/ var newOpt = document.createElement("option"); newOpt.value = ' '; newOpt.text = '-Select an Employee-'; try {
Get the Select list object and assign it to the variable theSelect
The Oracle Experts
AJAX using an XML Process
<script language="JavaScript1.1" type="text/javascript">function getEmpLov(callObj, pSelect) { var theSelect = html_GetElement(pSelect); var get = new htmldb_Get(null, html_GetElement('pFlowId').value, 'APPLICATION_PROCESS=getEmpLOV',0); get.add('F130_DEPTNO',callObj.value) gReturn= get.get('XML'); if(gReturn && theSelect) { var cnt = gReturn.getElementsByTagName("option").length; theSelect.length = 0; /*clear existing list*/ var newOpt = document.createElement("option"); newOpt.value = ' '; newOpt.text = '-Select an Employee-'; try {
Variable get is new instantiation of htmldb_get
•It will call the on demand application process
•Executes using page zero
The Oracle Experts
AJAX using an XML Process
<script language="JavaScript1.1" type="text/javascript">function getEmpLov(callObj, pSelect) { var theSelect = html_GetElement(pSelect); var get = new htmldb_Get(null, html_GetElement('pFlowId').value, 'APPLICATION_PROCESS=getEmpLOV',0); get.add('F130_DEPTNO',callObj.value) gReturn= get.get('XML'); if(gReturn && theSelect) { var cnt = gReturn.getElementsByTagName("option").length; theSelect.length = 0; /*clear existing list*/ var newOpt = document.createElement("option"); newOpt.value = ' '; newOpt.text = '-Select an Employee-'; try {
The add method of an htmldb_Get allows you to set the cached value of an application or page item. Recall this is the application item that is being referenced in the query of the application process.
This could have been a page item but we are using this AJAX process in two different places
The Oracle Experts
AJAX using an XML Process
<script language="JavaScript1.1" type="text/javascript">function getEmpLov(callObj, pSelect) { var theSelect = html_GetElement(pSelect); var get = new htmldb_Get(null, html_GetElement('pFlowId').value, 'APPLICATION_PROCESS=getEmpLOV',0); get.add('F130_DEPTNO',callObj.value) gReturn= get.get('XML'); if(gReturn && theSelect) { var cnt = gReturn.getElementsByTagName("option").length; theSelect.length = 0; /*clear existing list*/ var newOpt = document.createElement("option"); newOpt.value = ' '; newOpt.text = '-Select an Employee-'; try {
Use the get method of the htmldb_get object to get and store the results of the application process into the gReturn variable, specifying that the results of the get will be in the form an XML document
The Oracle Experts
AJAX using an XML Process
<script language="JavaScript1.1" type="text/javascript">function getEmpLov(callObj, pSelect) { var theSelect = html_GetElement(pSelect); var get = new htmldb_Get(null, html_GetElement('pFlowId').value, 'APPLICATION_PROCESS=getEmpLOV',0); get.add('F130_DEPTNO',callObj.value) gReturn= get.get('XML'); if(gReturn && theSelect) { var cnt = gReturn.getElementsByTagName("option").length; theSelect.length = 0; /*clear existing list*/ var newOpt = document.createElement("option"); newOpt.value = ' '; newOpt.text = '-Select an Employee-'; try {
If the get actually returned something and theSelect variable actually points to an object, retrieve the length of an array that contains the XML “option” elements
Set the length of the select object to zero, thus eliminating any existing select objects
The Oracle Experts
AJAX using an XML Process
<script language="JavaScript1.1" type="text/javascript">function getEmpLov(callObj, pSelect) { var theSelect = html_GetElement(pSelect); var get = new htmldb_Get(null, html_GetElement('pFlowId').value, 'APPLICATION_PROCESS=getEmpLOV',0); get.add('F130_DEPTNO',callObj.value) gReturn= get.get('XML'); if(gReturn && theSelect) { var cnt = gReturn.getElementsByTagName("option").length; theSelect.length = 0; /*clear existing list*/ var newOpt = document.createElement("option"); newOpt.value = ' '; newOpt.text = '-Select an Employee-'; try {
Create a new option object.
Set the options value and text properties.
The Oracle Experts
AJAX using an XML Process
try { theSelect.add(newOpt,null); //standards compliant } catch(ex) { theSelect.add(newOpt); // IE only } for (var x = 0; x < cnt; x++) { var newOpt = document.createElement("option"); var xmlRec = gReturn.getElementsByTagName("option")[x]; newOpt.value = xmlRec.getAttribute('value'); newOpt.text = xmlRec.firstChild.nodeValue; try { theSelect.add(newOpt,null); //standards compliant } catch(ex) { theSelect.add(newOpt); // IE only
If the browser is IE, catch the exception that will be thrown and add the option the IE way.
Since MicroSoft does not like to play by the rules you have to attempt to use the add method for the select list adding the newly created option.
The Oracle Experts
AJAX using an XML Process
for (var x = 0; x < cnt; x++) { var newOpt = document.createElement("option"); var xmlRec = gReturn.getElementsByTagName("option")[x]; newOpt.value = xmlRec.getAttribute('value'); newOpt.text = xmlRec.firstChild.nodeValue; try { theSelect.add(newOpt,null); //standards compliant } catch(ex) { theSelect.add(newOpt); // IE only } } } get = null; html_GetElement('theJob').innerHTML = '';}
Do a for loop for the length of the option array
Create a new option object
Use the getElementsByTagName method to retrieve the xth XML option element.
The Oracle Experts
AJAX using an XML Process
for (var x = 0; x < cnt; x++) { var newOpt = document.createElement("option"); var xmlRec = gReturn.getElementsByTagName("option")[x]; newOpt.value = xmlRec.getAttribute('value'); newOpt.text = xmlRec.firstChild.nodeValue; try { theSelect.add(newOpt,null); //standards compliant } catch(ex) { theSelect.add(newOpt); // IE only } } } get = null; html_GetElement('theJob').innerHTML = '';}
Use the getAttribute method to retrieve the value attribute
use the firstChild.nodeValue method to retrieve the value of the XML option node
<options> <option value=“7839”>KING</option> <option value=“7782”>CLARK</option> <option value=“7934”>MILLER</option></options>
The Oracle Experts
AJAX using an XML Process
for (var x = 0; x < cnt; x++) { var newOpt = document.createElement("option"); var xmlRec = gReturn.getElementsByTagName("option")[x]; newOpt.value = xmlRec.getAttribute('value'); newOpt.text = xmlRec.firstChild.nodeValue; try { theSelect.add(newOpt,null); //standards } catch(ex) { theSelect.add(newOpt); // IE only } } } get = null; html_GetElement('theJob').innerHTML = '';}
Use the same logic to add the new option
Null the get object null theJob div
The Oracle Experts
Using Multiple Dynamic Checkboxes
The Oracle Experts
Multi-Checkbox Key Elements
Display checkboxes with LOV based on a query
Check previously selected boxes
Process Multiple selected dynamic checkboxes
The Oracle Experts
Multiple Checkbox
Checkboxes are based on an LOV, therefore the options displayed can be dynamic.
The Oracle Experts
Multi-Checkbox LOV Query
select ename, empno from emp where deptno <= (select deptno from emp where empno = :P6_EMPLOYEE) and empno != :P6_EMPLOYEE order by 1
LOV query provides display/value pairs that make up the checkbox options
The Oracle Experts
Multi-Checkbox Source
Item source provides the values of the checkboxes that will be “checked”
The Oracle Experts
Multi-Checkbox Source declare results varchar2(50) := null; first_loop boolean := true; cursor data_cur is select empno from emp where mgr = :P6_EMPLOYEE;begin for it in data_cur loop if first_loop then results := it.empno; first_loop := false; else results := results||':'||it.empno; end if; end loop; return results;end;
The Oracle Experts
Result of Dynamic LOV and Source
The Oracle Experts
Result of Dynamic LOV and Source
The Oracle Experts
Biggest Problem with Tabular Forms?
The Oracle Experts
Not Any More!!!!
The Oracle Experts
Database Sessions
Page is rendered
Page submitted
for validation
Pass Validation
Processedto DB
Page is rendered
with errors
Session A
Session B
yes
no
The Oracle Experts
Database Sessions
Page is rendered
Page submitted
for validation
Pass Validation
Processedto DB
Page is rendered
with errors
Session A
Session B
yes
no
packagepl/sql table
created with user values
The Oracle Experts
Database Sessions
Page is rendered
Page submitted
for validation
Pass Validation
Processedto DB
Page is rendered
with errors
Session A
Session B
yes
no
packagepl/sql table
used to process data
The Oracle Experts
Database Sessions
Page is rendered
Page submitted
for validation
Pass Validation
Processedto DB
Page is rendered
with errors
Session A
Session B
yes
no
pl/sql tableused to display
errors anduser data
The Oracle Experts
Tabular Forms
Database Package•Package variable PL/SQL table to store data•Procedure to render tabular form•Function to validate submitted data•Procedure to process data
The Oracle Experts
Tabular FormsCREATE OR REPLACE PACKAGE manual_form as
type data_rec is record ( item varchar2(10), empno emp.empno%type, ename_val emp.ename%type, mgr_val emp.mgr%type, sal_val emp.sal%type, comm_val emp.comm%type, deptno emp.deptno%type);
type data_tbl is table of data_rec index by binary_integer;
the_emps data_tbl; empty_table data_tbl;
return_after_val_fail boolean; warning_error_exists boolean;
The Oracle Experts
Tabular Forms pkg_warning_error varchar2(2000);
Procedure Do_Form (p_deptno in number);
Function Validate_Form(p_deptno in number) return varchar2;
Procedure Process_Form_Items;
END manual_form;
-- body initialization on instantiationBEGIN return_after_val_fail := false; warning_error_exists := false; the_emps := empty_table; pkg_warning_error := null;END manual_form;
The Oracle Experts
Tabular Forms - Rendering
Tabular form rendered with• PL/SQL Toolkit
•HTP.PRINT•HTP.PRN
• APEX_ITEM package•APEX_ITEM.TEXT•APEX_ITEM.TEXTAREA•APEX_ITEM.SELECT_LIST•APEX_ITEM.CHECKBOX
•Utilizing classes from current theme
The Oracle Experts
Tabular Forms - Rendering
procedure Do_Form (p_deptno in number) is
cursor data_cur (p_deptno in number) is select rownum as item, ename, empno, mgr, sal, comm, deptno from emp where deptno = p_deptno order by 1;
v_value varchar2(32000); v_required varchar2(100) := '<img src="/i/themes/theme_2/required.gif"'|| ' alt="Required Field Icon" style="margin-right:5px;" />'; v_width number; v_name emp.ename%type; v_mgr emp.mgr%type; v_sal emp.sal%type; v_comm emp.comm%type; v_cnt number := 0; v_class varchar2(10);
The Oracle Experts
Tabular Forms - Rendering
begin
htp.print('<center>');
htp.print('<table cellpadding="0" border="0" cellspacing="0" summary=""'|| ' class="t12standardalternatingrowcolors">');
if warning_error_exists then htp.print('<tr><td colspan="4">'||pkg_warning_error||'</td></tr>'); end if;
htp.print('<tr>'); htp.print(' <th class="t12header" width="25%">Name</th>'); htp.print(' <th class="t12header" width="25%">Manager</th>'); htp.print(' <th class="t12header" width="25%">Salary</th>'); htp.print(' <th class="t12header" width="25%">Commission</th>'); htp.print('</tr>');
The Oracle Experts
Tabular Forms - Rendering
for it in data_cur(p_deptno) loop
v_cnt := v_cnt + 1; if mod(v_cnt,2) = 1 then v_class := 't12data'; else v_class := 't12dataalt'; end if;
if return_after_val_fail then v_name := the_emps(it.item).ename_val; v_mgr := the_emps(it.item).mgr_val; v_sal := the_emps(it.item).sal_val; v_comm := the_emps(it.item).comm_val; else v_name := it.ename; v_mgr := it.mgr; v_sal := it.sal; v_comm := it.comm;
end if;
The Oracle Experts
Tabular Forms - Renderinghtp.prn('<tr>'); htp.prn(' <td align=right class="'||v_class||'">'); htp.prn( apex_item.text(1,v_name)||'</td>'); htp.prn(' <td align=right class="'||v_class||'">'); htp.prn( apex_item.select_list_from_lov(2,v_mgr,'MANAGERS',null, 'YES','null','No Manager')||'</td>'); htp.prn(' <td align=right class="'||v_class||'">'); htp.prn( apex_item.text(3,v_sal,8,10)||'</td>'); htp.prn(' <td align=right class="'||v_class||'">');
if return_after_val_fail and v_comm is null then htp.prn('<img src="/i/erroricon_status.gif">'); end if;
htp.prn( apex_item.text(4,v_comm,8,10)||'</td>'); htp.prn('</tr>');
end loop; htp.print('</table></center>');
end Do_Form;
The Oracle Experts
Tabular Forms - Validation
Tabular form validates with• Execute Immediate• PL/SQL Table to store user entries• APEX_APPLICATION package
The Oracle Experts
Tabular Forms - Validation Function Validate_Form(p_deptno in number) return varchar2 is
v_value varchar2(2000); v_name emp.ename%type; v_mgr emp.mgr%type; v_sal emp.sal%type; v_comm emp.comm%type;
is_an_error boolean := false; is_a_req_error boolean := false; is_a_val_warning boolean := false; v_error varchar2(4000) ; v_req_error varchar2(4000); v_val_warning varchar2(4000);
cursor data_cur (p_deptno in number) is select rownum as item, ename, empno, mgr, sal, comm, deptno from emp where deptno = p_deptno order by ename;
statements varchar2(2000); v_run_length number;
The Oracle Experts
Tabular Forms - Validationbegin
for it in data_cur (p_deptno) loop
statements := 'begin '|| ':v_name := trim(apex_application.g_f01('||it.item||')); '|| ':v_mgr := trim(apex_application.g_f02('||it.item||')); '|| ':v_sal := trim(apex_application.g_f03('||it.item||')); '|| ':v_comm := trim(apex_application.g_f04('||it.item||')); '|| 'end; '; execute immediate(statements) using out v_name, out v_mgr, out v_sal, out v_comm;
the_emps(it.item).empno := it.empno; the_emps(it.item).item := it.item; the_emps(it.item).ename_val := v_name; the_emps(it.item).mgr_val := v_mgr; the_emps(it.item).sal_val := v_sal; the_emps(it.item).comm_val := v_comm; the_emps(it.item).deptno := it.deptno;
end loop;
The Oracle Experts
Tabular Forms - Validation v_error := '<div style="color: red; text-align: left; padding-left: 15px;">'; v_req_error := '<p><b>Address the following errors:</b></p><ul>'; v_val_warning := '<div style="color:Darkorange; text-align: left;'|| ' padding-left: 15px;"><p><b>WARNING!!!</b></p><ul>';
for x in the_emps.first .. the_emps.last loop
if the_emps(x).comm_val is null and the_emps(x).deptno = 30 then
is_a_req_error := true; v_req_error := v_req_error|| '<li><img src="/i/erroricon_status.gif">'|| the_emps(x).ename_val||' must have a commission value</li>'; end if;
if the_emps(x).comm_val > the_emps(x).sal_val then is_a_val_warning := true; v_val_warning := v_val_warning||'<li>'||the_emps(x).ename_val|| '''s commission amount is greater than the salary amount </li>'; end if;
end loop;
The Oracle Experts
Tabular Forms - Validation if is_a_req_error then is_an_error := true; v_error := v_error||v_req_error||'</ul>'; end if;
if is_a_val_warning then warning_error_exists := true; pkg_warning_error := v_val_warning||'</ul>'; else warning_error_exists := false; end if;
if is_an_error then return_after_val_fail := true; return v_error; else return_after_val_fail := false; return null; end if;
end Validate_Form;
The Oracle Experts
Tabular Forms - Processing
Process Tabular form data with• User entered data processed from PL/SQL Table
The Oracle Experts
Tabular Forms - Processing
Procedure Process_Form_Items is
begin
for x in the_emps.first .. the_emps.last loop
update emp set ename = the_emps(x).ename_val, mgr = the_emps(x).mgr_val, sal = the_emps(x).sal_val, comm = the_emps(x).comm_val where empno = the_emps(x).empno;
end loop;
end Process_Form_Items;
The Oracle Experts
Development and Production copies of CSS and JavaScript files
For performance reasons it is best to have CSS and JavaScript files reside on the server, however for security reasons you want to limit developers access to your web servers.
The Oracle Experts
Development and Production copies of CSS and JavaScript files
Solution•Use Shared component files for development•Use Server file for production•Make a single change when moving to production
The Oracle Experts
Development and Production copies of CSS and JavaScript files
Only change required it changing the substitution variable
The Oracle Experts
Questions?
The Oracle Experts
Copyright Information
Neither TUSC nor the author guarantee this document to be error-free. Please provide comments/questions to linnemeyerl@tusc.com.
TUSC © 2008. This document cannot be reproduced without expressed written consent from an officer of TUSC.
top related