In a recent dashboard-type application, I was using Google Charts for one of my dashboard regions. This meant that I needed to place some javascript inside the html page header.
The JavaScript was broken into two types
Once initialised, item P1_DRAWMAP_JS contained a part of a javascript function with about 200 lines of code. This code also contained some html tags. A snippet of the generated code is shown here, although it's not important to understand it for this article, just to note its general structure:
The page header looked something like this (below) with the dynamically generated P1_DRAWMAP_JS substitution variable placed between a <script> tag and a </script> tag along with a few other bits of static javascript code.
!HTML escapes reserved HTML characters
The JavaScript was broken into two types
- static sections that would never change, and
- a dynamic section that was generated by assigning the result of PL/SQL package function to a hidden item named P1_DRAWMAP_JS.
:P1_DRAWMAP_JS := centutils.genDrawMap (p_language => v(:FSP_LANGUAGE_PREFERENCE));Once initialised, item P1_DRAWMAP_JS contained a part of a javascript function with about 200 lines of code. This code also contained some html tags. A snippet of the generated code is shown here, although it's not important to understand it for this article, just to note its general structure:
function drawMap() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country'); // Implicit domain label col.
data.addColumn('number', 'Value'); // Implicit series 1 data col.
data.addColumn({type:'string', role:'tooltip', p: {html: 'true'}}); //
data.addRows([ [{v:"BA",f:"Bosnia and Herzegovina"},1,"<strong>P029</strong> - entry into force - 09 Aug 2019"],
[{v:"BE",f:"Belgium"},1,"<strong>C187</strong> - entry into force - 31 May 2019"],
[{v:"BG",f:"Bulgaria"},1,"<strong>C131</strong> - entry into force - 20 Mar 2019"],
[{v:"BR",f:"Brazil"},1,"<strong>C189</strong> - entry into force - 31 Jan 2019"],
....
....
The page header looked something like this (below) with the dynamically generated P1_DRAWMAP_JS substitution variable placed between a <script> tag and a </script> tag along with a few other bits of static javascript code.
So everything should work then, right? Unfortunately not - my region was blank. When viewing the html source, what I actually saw was that the javascript code contained in my substitution variable had been escaped by APEX.
This is when I decided to search the APEX documentation to see how to get around this problem. After a few minutes, I came across this documentation on escaping substitution strings.
From the documentation we can see that there are 5 different ways of escaping APEX substitution variables.
They all start with an exclamation mark and immediately follow the name and can also be used in report and interactive grid columns.
!HTML escapes reserved HTML characters
!ATTR escapes reserved characters in a HTML attribute context
!JS escapes reserved characters in a JavaScript context
!RAW preserves the original item value and does not escape characters
!STRIPHTML removes HTML tags from the output and escapes reserved HTML characters
The solution to my issue was very simple. I disabled the escaping of my substitution variable by adding !RAW to the name of the substitution string, so it now became &P1_DRAWMAP_JS!RAW.
Everything worked! The result was exactly what I expected and my region looked now looked as it should, like this.
Sometimes the solutions to our problems are very simple.
And in this case, the APEX development team at Oracle had already anticipated what was needed and provided a mechanism for implementing it. Another reason that Oracle APEX is one of the best low-code development tools out there!
And in this case, the APEX development team at Oracle had already anticipated what was needed and provided a mechanism for implementing it. Another reason that Oracle APEX is one of the best low-code development tools out there!
