APEX provides capabilities to include custom JavaScript and CSS to enhance the look and functionality of your web applications. By implementing these scripts and styles at the application level, you ensure consistency and reusability across all pages. This guide will walk you through the process of integrating JavaScript and CSS at the application level in Oracle APEX.

Saving the css/js file

Upload the JavaScript File to APEX Static Files

1. Navigate to Shared Components:

   • From the Application Builder, select the application you want to add the JS/CSS file to.

   • Click on Shared Components in the application menu.

   • Under the Files and Reports section, click on Static Application Files.

2. Upload/Create the File:

   • Click on the Create File button.

   • Choose the file from your local machine or click on create to open the editor

   • Optionally, you can create a directory to keep your files organized. For example, you might create a directory called js and upload the javascript files into this directory.

   • Click Create to add the file to your application’s static files.

     

Reference the JavaScript File in Your Application

After uploading the file, you need to reference it in your application so it can be utilized across various pages.

In this example, I created the app.js JavaScript file, and APEX automatically created the minified version of this file. We should also use the minified version to reduce memory usage and loading time.

1. Navigate to User Interface Attributes:

   • From the Application Builder, click on Shared Components.

   • Under the User Interface section, click on JavaScript or CSS depending on your file type.

Add the file path pointing to the file we just created.

Check if the file is loaded

• Run the Application:

  • Add the following code to the app.js file

      console.log('app.js loaded successfully!');
    

  • Run your application.

  • Open the browser’s Developer Tools (usually accessed by pressing F12) and check the Console and you chould see the message app.js loaded successfully!

Using version control

When we don't use version control, after a change to app.js, the browser can cache the file and the changes won't be available when running the app. Users will need to manually clear the cache. To avoid that, use version control. Every time you make changes to the app and release it, the browsers will be forced to refresh the cached file when running the app.

Version control for static files in APEX is implemented by appending ?version=#APP_VERSION# to file URLs, ensuring users always receive the latest versions of CSS and JavaScript files without manual cache clearing.

When setting the file URL instead of

#APP_FILES#js/app#MIN#.js

we should use

#APP_FILES#js/app#MIN#.js?version=#APP_VERSION#