Search for a command to run...
No comments yet. Be the first to comment.
Oracle APEX already includes Font APEX as the default icon library for Universal Theme. In most cases, that is enough. But in one of my APEX apps, I needed a few icons that were not available there, s
Looking to give your Oracle APEX mobile app a modern, native feel? Here’s a quick hack: add a floating action button that stays anchored at the bottom corner just like in popular mobile apps. This sma
APEX 26.1 has been updated to the Universal Theme. While much of the attention in this release is on AI features, I think the UT improvements are just as important for developers like me who care abou
The apex_barcode package offers a PL/SQL API to generate various types of barcodes. You can output barcodes as SVG (Scalable Vector Graphics) values or as PNG file blobs, making it easy to embed them
Oracle APEX makes it easy to get data on screen fast, but often, the default tabular output isn’t enough. What if you want to highlight statuses, add icons, or display badges all without writing compl
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.
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.
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.
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.
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.
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!
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#