Confidential & Proprietary 1 1
Achieving better functionality
from Apex
using Javascripts, HTML By
Beena V T
Confidential & Proprietary 2 2
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
Confidential & Proprietary 3 3
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
Confidential & Proprietary 4 4
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
Confidential & Proprietary 5 5
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
Confidential & Proprietary 6 6
Disable multi row check box in report without page refresh
§ Challenge
Confidential & Proprietary 7 7
Under Region Definition -> In ‘Source’ enter the code
Disable multi row check box in report without page refresh
§ Solution
Confidential & Proprietary 8 8
Disable multi row check box in report without page refresh
Under Page -> In ‘HTML Header’ enter the code
Confidential & Proprietary 9 9
Creating application item ‘F_FLAG’ under Shared components of the application
Disable multi row check box in report without page refresh
Confidential & Proprietary 10 10
Creating an application process ‘BACK_UPDATE’
Disable multi row check box in report without page refresh
Confidential & Proprietary 11 11
Output with Checkbox not disabled
Disable multi row check box in report without page refresh
Confidential & Proprietary 12 12
Disable multi row check box in report without page refresh
Under Region Definition -> In ‘Source’ Modify the code to disable the checkbox
Confidential & Proprietary 13 13
Disable multi row check box in report without page refresh
Under Region Definition -> In ‘Source’ Modify the code to vanish the alert message without user intervention
Confidential & Proprietary 16 16
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.
Confidential & Proprietary 17 17
§ Challenge Click " Add Row"
Overcome default ADD ROW functionality in Apex Tabular form with Report
Confidential & Proprietary 18 18
Click " Add Row"
Overcome default ADD ROW functionality in Apex Tabular form with Report
Confidential & Proprietary 19 19
• Two hidden items are created in the redirected page. P3_BUTTON & P3_HIDE
Overcome default ADD ROW functionality in Apex Tabular form with Report
§ Solution
Confidential & Proprietary 20 20
Overcome default ADD ROW functionality in Apex Tabular form with Report
Under Page -> In ‘HTML Header’ & ‘Page HTML Body Attribute’ enter the code
Confidential & Proprietary 21 21
• In the report page, Edit the "Add Row" button, set the values
Overcome default ADD ROW functionality in Apex Tabular form with Report
Confidential & Proprietary 22 22
• In the redirected page, Create the process ‘Hide’ • Edit PageProcess to include the code in ‘Source’
Overcome default ADD ROW functionality in Apex Tabular form with Report
Confidential & Proprietary 23 23
• Form can be opened in the redirected page without user action
Overcome default ADD ROW functionality in Apex Tabular form with Report
Confidential & Proprietary 24 24
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.
Confidential & Proprietary 25 25
• 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
Confidential & Proprietary 26 26
• 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
Confidential & Proprietary 27 27
• 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
Confidential & Proprietary 28 28
• 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
Top Related