Skip to Main Content

Breadcrumb

Overview

The FOS - Static Region plug-in has been created to honour the "everything refreshable" principle. The plug-in allows you to refresh the static content client-side or server-side. It also supports shortcuts, Lazy Loading, Lazy Refreshing, HTML Sanitization and showing a loading spinner and mask.

Why would I want to refresh static content when it is static content after all? ...the reason is in the situations when you have used substitutions in your content.

Examples

Client-side Substitutions

This is an example of using client side substitutions that allow you to dynamically refresh the static content when referenced item values are changing on the page. The benefit here is that it all happens in the browser without any need to contact the server (for optimal performance). Below is an example of a profile that can be dynamically updated by changing page item values:

Try changing the values below....

Server-side Substitutions

This is an example of using server side substitutions that allow you to dynamically change the static content on refresh. The benefit here is that it all happens on the server which means we can substitute the content with any value in session state, which means that you can reference application items or items on other pages etc.

You can still submit local changes using "Page Items to Submit" with the benefit of them being updated in session state prior to the static content refresh, which means the values will remain in place on page reload. Below is an example of a profile that can be dynamically updated by changing page item values. Note: the refresh time is sourced from an application item which is set by checking the "Extra Option" to "Execute PL/SQL Code before Refresh". Here is the example code:


:CURRENT_DATE_TIME := to_char(sysdate, 'FMDay')||', '||to_char(sysdate, 'HH:MI:SS pm');

Lord Lazy Coder

CSS
12
Javascript
5
SQL
75
PL/SQL
40
Refreshed on:

Try changing the values below....

Lazy Loading & Refreshing

Sometimes we may not want to show or refresh our dynamic content until it's actually visible to the user i.e. it's hidden behind a tab, scrolled into view etc. This can have performance advantages for our application as we only fetch the dynamic content when the user actually is viewing the content.

In some cases the user may never click on a tab to view the content so we save time on processing/rendering, which can be really helpful on pages with a very high page view count or which have a high number of AJAX calls to refresh many regions.

This is an example showing you that we only load the dynamic content when we click the 2nd tab, and we only refresh on button click when the tab is active.

Placeholder Tab

This is just some dummy content. Please click the other tab to see the content load dynamically.

Note: we have purposely put a 1 second delay to show you the content loading.

Events

Browser events allow us to respond to things happening on the page. We have added support to fire an event "before" and "after" refreshing the static region plug-in. The button below will refresh the demo in the "Server Side Substitutions" section above. You can see the refresh time change each time you click the "Refresh" button.

HTML Sanitization

This plug-in can also sanitize its output to avoid Cross Site Scripting attacks (XSS).

The below region has the following source:


<script>alert('XSS');</script>
<h3 style="text-align: center;">Hello FOS World!</h3>

FOS - Static Content Region

As you can see, the valid HTML was rendered, but the dangerous HTML was stripped, i.e. no alert appeared.

For more information on this feature, see the FOS - PL/SQL Dynamic Content demo.

Substitutions

Substitution strings play an important role in APEX, they are replaced with their session state values. A substitution string is defined by the following syntax convention: &ITEM_NAME. They give us a lot fo flexibility in making static content dynamic. However you should be aware that there are some security considerations you need to take into account as to where you are using them. Introduced in 18.1, you now have the ability to determine what type of escaping should be used depending upon where you are using the substitution. You can use the new &ITEM_NAME![TYPE]. syntax. These are the following available escape types:

  • HTML - escapes reserved HTML characters e.g. &P1_DEPTNO!HTML.
  • STRIPHTML - removes HTML tags from the output and escapes reserved HTML characters e.g. &P1_DEPTNO!STRIPHTML.
  • ATTR - escapes reserved characters in a HTML attribute context e.g. &P1_DEPTNO!ATTR.
  • JS - escapes reserved characters in a JavaScript context e.g. &P1_DEPTNO!JS.
  • RAW - preserves the original item value and does not escape characters e.g. &P1_DEPTNO!RAW.

You can find out more information about substitution strings in the official Oracle Documentation.

Shortcuts

What are shortcuts? Most people really don't know, but they are very similar to substitutions but have a different syntax i.e. you specify the shortcut name in enclosed double quotes e.g. "SHORTCUT_NAME". You would use them when you want to centralize repeating Javascript or HTML or other text. They provide more functionality than a regular substitution as they can be dynamically generated using PLSQL for every individual shortcut substitution, meaning you don't have to rely on session state being set like you do with regular page item substitutions. Shortcuts have the ability to dynamically execute your PLSQL code to return the value/HTML/text at the time of substitution, even during refresh if you use our static content plug-in. They are pretty powerful!

They are also one of the most under used features in APEX by developers. Whilst they are not supported as widely as substitution strings there are still a number of places where they can be used. Static content regions being one of them.

Credits

The avatar icons have been developed by Oxygenna, made freely available, which you can download from the Oxygenna Website

Design

You can preview the plug-in setup as you would see it in page designer. You can either do this by clicking this button in the top right corner of each example, or you can see all the examples together in the region below.

Looking at the examples you'll see just how easy the plug-in is to use. Don't worry about changing any values as they aren't saved. We actually encourage you to change them, so you can see the behaviour of the attributes and their help text.

FAQ

  • Why would I want to locally refresh my content, and not load it from the server?

    The reason you would do this is for performance and in the situation where any values that are referenced in the template are located on the page. So you actually don't need to contact the server. User profiles are one situation where this is useful, others are live previews of data that you are changing. By not contacting the server you are saving a lot of overhead and the refresh of content itself is much faster.