achieving better functionality from apex using javascripts ... · achieving better functionality...

Confidential & Proprietary 1 1

Achieving better functionality

from Apex

using Javascripts, HTML By

Beena V T


Oracle Application Express (APEX)

Database-centric Web application development tool Ø  Unique Rapid Application Development

(RAD) tool for the Oracle Database Ø  Browser based for Development,

Deployment & Use Ø  Declaratively build professional Web 2.0

applications that are fast and secure Ø  Leverages full Oracle database

capabilities and existing SQL & PL/SQL skills

Ø  Standard component of the database Ø  Fully supported, “no-cost” option with all

editions of the Oracle Database

Easy to develop • Easy to deploy • Easy to manage


History

HTML DB 1.5 [2004] • First Release

HTML DB 1.6 [2004] • Themes

HTML DB 2.0 [2005] • SQL Workshop

APEX 2.1 [2006] • Oracle XE

APEX 2.2 [2006] • Packaged Applications

APEX 3.0 [2007] • Flash Charts, PDF Printing, Access Migration

APEX 3.1 [2008] • Interactive Reports

APEX 3.2 [2009] • Oracle Forms Conversion

APEX 4.0 [2010] • Websheets, Dynamic Actions, Plug-Ins, Team Development

APEX 4.1 [2011] • Data Upload, Error Handling, ROWID

APEX 4.2 [2012] • Appln Builder for Mobile, Responsive Themes


Better functionality from Apex

Using Javascripts and HTML Few Scenarios

•  Disable multi row check box in report without page refresh

•  New form in redirected page of “Apex Tabular form with Report” without clicking ADD ROW for the second time when traversing from the Report page

•  Dynamic help page


Disable multi row check box in report without page refresh

§  Challenge Ø  On click of multi row Checkbox in report, this has to be disabled. This is

possible after database update and page refresh. Data base update message that get displayed has to disappear without user intervention.

§  Solution Ø  Instead of APEX_ITEM.CHECKBOX API, HTML is used to create

checkbox. Ø  Javascript and Apex Application process is used to update the database

and close the update message without user intervention



§  Challenge


Under Region Definition -> In ‘Source’ enter the code


§  Solution



Under Page -> In ‘HTML Header’ enter the code


Creating application item ‘F_FLAG’ under Shared components of the application



Creating an application process ‘BACK_UPDATE’



Output with Checkbox not disabled




Under Region Definition -> In ‘Source’ Modify the code to disable the checkbox



Under Region Definition -> In ‘Source’ Modify the code to vanish the alert message without user intervention


Overcome default ADD ROW functionality in Apex Tabular form with Report

§  Challenge Ø  Generally in Apex tabular form with report, Clicking inbuilt ADD ROW

button enables new row. This feature is redirected to a new page, User has to click the ADD ROW button once again to enable the Form.

§  Solution Ø  Javascript function is placed on the html header attribute of the

redirected page Ø  Two hidden items and a process are created in the redirected page.


§ Challenge Click " Add Row"



Click " Add Row"



•  Two hidden items are created in the redirected page. P3_BUTTON & P3_HIDE


§  Solution



Under Page -> In ‘HTML Header’ & ‘Page HTML Body Attribute’ enter the code


•  In the report page, Edit the "Add Row" button, set the values



•  In the redirected page, Create the process ‘Hide’ •  Edit PageProcess to include the code in ‘Source’



•  Form can be opened in the redirected page without user action



Dynamic Help Page

§  Challenge Ø  Generally help page is created for every page in the apex application.

As a result maintenance is difficult.

§  Solution Ø  Single page for all pages in the application by Creating a data base

table and HTML.


•  Create a table in the database CREATE TABLE help_page! ( module_name VARCHAR2(50),! page_number NUMBER ,!

help_text VARCHAR2(4000));!!

•  Create a tabular form to insert data

Dynamic Help Page


•  Create the following function in the database CREATE OR REPLACE FUNCTION fun_help (p_page_number IN NUMBER)! RETURN VARCHAR2!IS!

l_help VARCHAR2 (4000);!BEGIN! SELECT help_text! INTO l_help! FROM help_page! WHERE page_number = p_page_number;!

! RETURN l_help;!EXCEPTION! WHEN OTHERS! THEN! RETURN '<center><b>Help Page Not Available</b></center>';!END;!

/!

Dynamic Help Page


•  Create the single page (eg :Page No 5) for all data retrieval •  Create an hidden item (P5_HELP) •  Create a region ‘Help’ which is of type PL/SQL block •  Edit Region and enter the code in ‘Source’ !!!

Dynamic Help Page


•  Create a navigation bar entry, and give the name as Help. •  The target of a navigation bar entry is set to be URL, and the URL should

contain

Dynamic help page


Q & A


Thank You

achieving better functionality from apex using javascripts ... · achieving better functionality...

Documents