Monday, 25 November 2013

Oracle Apex - Including JavaScript on Multiple Pages

We recently came across the need to include some JavaScript in every page of an APEX application. We were implementing a JQuery accordion style menu as seen here.

After the menu was in place, we decided it would be good to have the relevant panel remain open when navigating to a page in the application. One method this can be achieved is with some JavaScript like such:

                                                                   Click here for the JavaScript code used above.

The issue here is, despite the many uses of the global page (zero), you cannot use it to have some JavaScript code on every page.

There are a few solutions. One is to save the necessary JavaScript as a “.js” file on your computer and then upload it directly to your application workspace. This is done by navigating to shared components > static files and then clicking upload. Now you can either navigate to Application properties > User Interface or to your page template, and under JavaScript you can link your file as “#WORKSPACE_IMAGES#YOURFILE.js”.

Using the page template is recommended as you have more control over where the JavaScript will be present in your application.

Alternatively, as of Apex 4.2.2 you can specify which pages have the JavaScript file present on them manually rather than it being present on every page in your application. To do this, on the page(s) you want the JavaScript file included, go to Edit Page Attributes and under JavaScript there is a "File URLs" field. Link your file here with the relevant URL.

The next step is to check that the JavaScript is present in your application. If you have a browser with a built in console, or if you have software like firebug, you can open the console on a page in your application and go to resources > (f) > Scripts > wwv_flow_file_mgr.get_file and this should now display the JavaScript you previously uploaded.

 If it does not show your JavaScript, try re-uploading with a different file name and changing the link to match (#workspace_images#yourfile.js)

No comments:

Post a comment