Tuesday, 19 June 2012

Using JavaScript in Oracle Application Express


Incorporating JavaScript in Oracle Application Express

In Oracle APEX you use JavaScript attribute of the page to include JavaScript into your applications. This is a cgood approach for functions that are very specific to a page and a convenient way to test a function before you include it in the .js file.

You are provided the following two options to add JavaScript code to the JavaScript attribute:

Function and Global Variable Declaration - Enter JavaScript code (for example, functions or global variable declarations) for code to be used on this page (see page 111 of the book). If the code is used on multiple pages, consider putting it into an external JavaScript file to avoid duplication.

Execute When Page Loads - Enter JavaScript code to execute when the page loads. The code is executed after the JavaScript code generated by Oracle Application Express. For example, adding the following would test a function accessible from anywhere on the current page.

function test(){window.alert('This is a test.');}


On page 111 of my book "Create Rapid Web Applications Using Oracle Application Express", the first approach is used to declare a function named productPopup as shown below:
function productPopup(productID) {
  var url;
  url = 'f?p=&APP_ID.:20:&SESSION.::::P20_PRODUCT_ID:' + productID;
  html_PopUp(url,'ProductInfo',700,400,1,1);
};
 
This function is called from PL/SQL code on page 113 and 114 using the parameter productID: 
 
<a href="javascript:productPopup(''' || product_id || ''');">' || sys.htf.escape_sc(product_name) || '</a> 
and  
<a href="javascript:productPopup('''||c1.pid||''');">'||c1.i||'</a> 
 
The url variable contains the value that creates link between pages in the application. Here, it calls Page 20 of our application to display product details. P20_PRODUCT_ID is a hidden item on Page 20 (see page 123) to represent product ID. Html_PopUP is a function provided by APEX which opens a page in a popup using the specified url variable value, page name and dimensions. The complete syntax of html_popup is: html_PopUp(pURL,pName,pWidth,pHeight,pScroll,pResizable).

How it works
When you proceed to step 2 in order placement wizard, the PL/SQL code (mentioned above) creates a hyperlink for each product. Upon clicking any product link, the ID of that product is conveyed to the function “productPopup“ which, initially, creates a complete url by adding the product ID and finally displays a new popup window showing details about the selected product.

You can add multiple JavaScript functions as tested here. Make a duplicate of the above function by copying it under the existing one with the changes shown in bold as under:

function productPopup(productID) {
  var url;
  url = 'f?p=&APP_ID.:20:&SESSION.::::P20_PRODUCT_ID:' + productID;
  html_PopUp(url,'ProductInfo',700,400,1,1);
};

function productPopup2(productID) {
  var url;
  url = 'f?p=&APP_ID.:20:&SESSION.::::P20_PRODUCT_ID:' + productID;
  html_PopUp(url,'ProductInfo',1000,100,1,1);
};

In the Select Items PL/SQL under Regions, change the function name in Display Current Order section to point to the above entry:

<a href="javascript:productPopup2('''||c1.pid||''');">

Apply changes and run the page. First, click any product under the product section. You’ll see the same Product Info page that used to appear. Click the Add> link to add a product to the Current Order section. Click the product here, this time the second function productPopup2 will be called displaying product info in a page having a width of 1000 pixels.


The New Oracle APEX Book

NextPreviousHome

 

2 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. I really appreciate the information shared above. It’s of great help. If someone wants to learn Online (Virtual) instructor lead live training in Oracle Application Express TECHNOLOGY, kindly Contact MaxMunus
    MaxMunus Offer World Class Virtual Instructor-led training on TECHNOLOGY. We have industry expert trainer. We provide Training Material and Software Support. MaxMunus has successfully conducted 1,00,000 + training in India, USA, UK, Australia, Switzerland, Qatar, Saudi Arabia, Bangladesh, Bahrain and UAE etc.
    For Demo Contact us.
    Pratik Shekhar
    MaxMunus
    E-mail: pratik@maxmunus.com
    Ph:(0) +91 9066268701
    www.MaxMunus.com

    ReplyDelete