APEX 5.0: Declarative Definition of CSS and JavaScript Files to Load for a Plug-in

A best practice for performant HTML pages is to load CSS files in the HTML head to reduce redrawing of the page when a CSS file gets loaded. But because the PL/SQL code of a Plug-in isn’t executed util a region or item has to be rendered, included CSS files will always be loaded at the end of the page. Oracle APEX 5.0 supports Plug-in developers to optimize loading of CSS and JavaScript files required by a Plug-in.

In the new File URLs to Load region of the Plug-in definition, you can now declaratively specify which CSS and JavaScript File URLs should be loaded when a Plug-in gets rendered. This information is used by the APEX Runtime Engine to automatically include any CSS file needed by a Plug-in when the #APEX_CSS# placeholder is substituted in the head tag of the Page Template.

As you can see from the screenshot it’s really straight forward to load a file.

Declarative Definition of CSS and JavaScript Files

#PLUGIN_FILES# is used to point to a Plug-in File. If the File Prefix attribute of the Plug-in definition is empty, it will load the file from the built-in Plug-in File Storage. If it’s set, it will just use that value. As with any other CSS/JavaScript File URL attribute, we do support #MIN# and #MIN_DIRECTORY# substitution too. I think those substitutions are especially important for optimizing the size of files loaded by a Plug-in. Please see online help for details.

Note: The documentation isn’t 100% accurate. It says that #MIN# and #MIN_DIRECTORY# will only be empty if running the page in debug mode. To make CSS and JavaScript development easier and not having to minimize the files all the time when making a change during development, the minimized versions will never be used when an application is executed from within the Builder.

As a summary, in 95% of your Plug-ins you shouldn’t have to use

apex_css.add_file (
    p_name      => 'jquery.rating',
    p_directory => p_plugin.file_prefix );


apex_javascript.add_library (
    p_name      => 'jquery.rating',
    p_directory => p_plugin.file_prefix );

in you PL/SQL code anymore.

BTW, what’s also not yet documented in the online help is that you can also use #JQUERYUI_DIRECTORY# to reference the latest jQueryUI version used by APEX. For example if you want to include the Slider widget which is not automatically loaded by APEX you can use




to always pick up the most current jQueryUI version.