+ All Categories
Home > Documents > Application Express (APEX): Introduction and Deployment - Part 2

Application Express (APEX): Introduction and Deployment - Part 2

Date post: 27-Nov-2014
Category:
Upload: sampetruda
View: 3,885 times
Download: 0 times
Share this document with a friend
Description:
 
Popular Tags:
97
The Oracle Experts Oracle Application Express Advanced Topics By Lawrence Linnemeyer, TUSC Oracle Certified Advantage Partner
Transcript
Page 1: Application Express (APEX): Introduction and Deployment - Part 2

The Oracle Experts

Oracle Application Express Advanced Topics

By Lawrence Linnemeyer, TUSC

Oracle Certified Advantage Partner

Page 2: Application Express (APEX): Introduction and Deployment - Part 2

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.

Page 3: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 4: Application Express (APEX): Introduction and Deployment - Part 2

The Oracle Experts

Custom Pop Ups Returning Multiple Values

Page 5: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 6: Application Express (APEX): Introduction and Deployment - Part 2

The Oracle Experts

Button with JavaScript call

Button is on a normal text field, made up of an image and a JavaScript call

Page 7: Application Express (APEX): Introduction and Deployment - Part 2

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>

Page 8: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 9: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 10: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 11: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 12: Application Express (APEX): Introduction and Deployment - Part 2

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.');"

Page 13: Application Express (APEX): Introduction and Deployment - Part 2

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.');"

Page 14: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 15: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 16: Application Express (APEX): Introduction and Deployment - Part 2

The Oracle Experts

Pop Up Page

Page 17: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 18: Application Express (APEX): Introduction and Deployment - Part 2

The Oracle Experts

Pop Up Page – Two Approaches

Page 19: Application Express (APEX): Introduction and Deployment - Part 2

The Oracle Experts

JavaScript call constructed

javascript:passBackValues(‘P4_EMPNO',P4_EMPNO','7839',‘P4_ENAME','KING',‘P4_SAL','5000',‘P4_COMM','')

or

=

Page 20: Application Express (APEX): Introduction and Deployment - Part 2

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','')

Page 21: Application Express (APEX): Introduction and Deployment - Part 2

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','')

Page 22: Application Express (APEX): Introduction and Deployment - Part 2

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','')

Page 23: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 24: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 25: Application Express (APEX): Introduction and Deployment - Part 2

The Oracle Experts

One Page Multi Record Master Detail

Page 26: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 27: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 28: Application Express (APEX): Introduction and Deployment - Part 2

The Oracle Experts

“Select “ Links

Page 29: Application Express (APEX): Introduction and Deployment - Part 2

The Oracle Experts

Hidden Items for “Selected” row

Hidden items used to track “selected” master and for dynamic Region titles.

Page 30: Application Express (APEX): Introduction and Deployment - Part 2

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;

Page 31: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 32: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 33: Application Express (APEX): Introduction and Deployment - Part 2

The Oracle Experts

Custom Template

Compare “selected” variableagainst current row

Page 34: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 35: Application Express (APEX): Introduction and Deployment - Part 2

The Oracle Experts

Using AJAX

Select a valuePopulates Job

Select a departmentPopulates select list

Page 36: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 37: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 38: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 39: Application Express (APEX): Introduction and Deployment - Part 2

The Oracle Experts

AJAX using a Query Process

JavaScript bringsit all together

Defined in HTMLHeader section of Page Attributes

Page 40: Application Express (APEX): Introduction and Deployment - Part 2

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>

Page 41: Application Express (APEX): Introduction and Deployment - Part 2

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.

Page 42: Application Express (APEX): Introduction and Deployment - Part 2

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.

Page 43: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 44: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 45: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 46: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 47: Application Express (APEX): Introduction and Deployment - Part 2

The Oracle Experts

AJAX using an XML Process

Page 48: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 49: Application Express (APEX): Introduction and Deployment - Part 2

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>

Page 50: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 51: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 52: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 53: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 54: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 55: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 56: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 57: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 58: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 59: Application Express (APEX): Introduction and Deployment - Part 2

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.

Page 60: Application Express (APEX): Introduction and Deployment - Part 2

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.

Page 61: Application Express (APEX): Introduction and Deployment - Part 2

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.

Page 62: Application Express (APEX): Introduction and Deployment - Part 2

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>

Page 63: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 64: Application Express (APEX): Introduction and Deployment - Part 2

The Oracle Experts

Using Multiple Dynamic Checkboxes

Page 65: Application Express (APEX): Introduction and Deployment - Part 2

The Oracle Experts

Multi-Checkbox Key Elements

Display checkboxes with LOV based on a query

Check previously selected boxes

Process Multiple selected dynamic checkboxes

Page 66: Application Express (APEX): Introduction and Deployment - Part 2

The Oracle Experts

Multiple Checkbox

Checkboxes are based on an LOV, therefore the options displayed can be dynamic.

Page 67: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 68: Application Express (APEX): Introduction and Deployment - Part 2

The Oracle Experts

Multi-Checkbox Source

Item source provides the values of the checkboxes that will be “checked”

Page 69: Application Express (APEX): Introduction and Deployment - Part 2

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;

Page 70: Application Express (APEX): Introduction and Deployment - Part 2

The Oracle Experts

Result of Dynamic LOV and Source

Page 71: Application Express (APEX): Introduction and Deployment - Part 2

The Oracle Experts

Result of Dynamic LOV and Source

Page 72: Application Express (APEX): Introduction and Deployment - Part 2

The Oracle Experts

Biggest Problem with Tabular Forms?

Page 73: Application Express (APEX): Introduction and Deployment - Part 2

The Oracle Experts

Not Any More!!!!

Page 74: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 75: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 76: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 77: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 78: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 79: Application Express (APEX): Introduction and Deployment - Part 2

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;

Page 80: Application Express (APEX): Introduction and Deployment - Part 2

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;

Page 81: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 82: Application Express (APEX): Introduction and Deployment - Part 2

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);

Page 83: Application Express (APEX): Introduction and Deployment - Part 2

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>');

Page 84: Application Express (APEX): Introduction and Deployment - Part 2

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;

Page 85: Application Express (APEX): Introduction and Deployment - Part 2

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;

Page 86: Application Express (APEX): Introduction and Deployment - Part 2

The Oracle Experts

Tabular Forms - Validation

Tabular form validates with• Execute Immediate• PL/SQL Table to store user entries• APEX_APPLICATION package

Page 87: Application Express (APEX): Introduction and Deployment - Part 2

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;

Page 88: Application Express (APEX): Introduction and Deployment - Part 2

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;

Page 89: Application Express (APEX): Introduction and Deployment - Part 2

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;

Page 90: Application Express (APEX): Introduction and Deployment - Part 2

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;

Page 91: Application Express (APEX): Introduction and Deployment - Part 2

The Oracle Experts

Tabular Forms - Processing

Process Tabular form data with• User entered data processed from PL/SQL Table

Page 92: Application Express (APEX): Introduction and Deployment - Part 2

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;

Page 93: Application Express (APEX): Introduction and Deployment - Part 2

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.

Page 94: Application Express (APEX): Introduction and Deployment - Part 2

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

Page 95: Application Express (APEX): Introduction and Deployment - Part 2

The Oracle Experts

Development and Production copies of CSS and JavaScript files

Only change required it changing the substitution variable

Page 96: Application Express (APEX): Introduction and Deployment - Part 2

The Oracle Experts

Questions?

Page 97: Application Express (APEX): Introduction and Deployment - Part 2

The Oracle Experts

Copyright Information

Neither TUSC nor the author guarantee this document to be error-free. Please provide comments/questions to [email protected].

TUSC © 2008. This document cannot be reproduced without expressed written consent from an officer of TUSC.


Recommended