Apex - HTML / CSS / JavaScript

Search For

This site uses Codemirror for syntax highlighting.
Sven Weller wrote a great article on how to implement this in Apex: Apex 5 – Region with syntax highlighting.

My implementation is a bit different, using a universal Dynamic Action on page 0 instead of the pages themselves. This makes maintenance a bit easier.
Also, I have tried to reduce the number of javascript scripts and Dynamic Actions needed, by using parameters in the javascript bits.

The steps I used to get Codemirror to work on this site:

Create an application item F_CODEMIRROR_VERSION.
Apex 5.0 includes Codemirror 4.4, Apex 5.1 includes Codemirror 5.16. At this moment, this site uses version 5.48.4. By using an item to store the version number, upgrading (and downgrading if needed) becomes a lot easier.

Fill this item with "5.48.4" (or any other version number you are using) e.g. using an Application Computation.

When using a newer version than the one included with Apex, copy the entire Codemirror directory to the right location, e.g. #APEX_FILES#libraries/codemirror/5.48.4

On your Page Template(s), include the following:

JavaScript -> File URLs
(Note: you may not need all of the "mode" entries, or you may need more; add/remove as you please. Just remember to adjust the javascript on page 0 if you add entries. And note that some librairies have dependencies, consult the Codemirror manual for that.)

Function and Global Variable Declaration

Cascading Style Sheet -> File URLs

On Page 0, add the codemirror Dynamic Action listed in the Code section below.

And to use all this, create textarea tags with the new codemirror-% classes, as shown in the Example regions (and Code section) below.

When using Codemirror for textareas in reports, this dynamic action will not run when changing e.g. the number of rows of the report. That triggers a refresh of the region only, not the entire page, so the dynamic action on page 0 will not run. And the same applies to all other objects that are refreshed/changed dynamically of course.
To get that to work, you'll need a copy of the dynamic action from page 0, put it on the page containing the report, and change the jQuery selector a bit. An example of this can be found on my SQL History page.

Note: Codemirror has some issues with '\' in PL/SQL (and maybe some other formats as well).
In the example below, the first "escape" line causes formatting errors; the second "escape" line has --' at the end to fix this.

select rc.*
from apex_application_page_rpt_cols rc
where (    rc.display_as_code =    'DATE_PICKER'
        or rc.display_as_code =    'DISPLAY_AND_SAVE'
        or rc.display_as_code like 'PICK\_DATE\_%' escape '\'
        or rc.display_as_code like 'POPUP%'
        or rc.display_as_code like 'RADIOGROUP%'
        or rc.display_as_code =    'SIMPLE_CHECKBOX'
        or rc.display_as_code like 'PICK\_DATE\_%' escape '\' --'
        or rc.display_as_code =    'TEXT'
        or rc.display_as_code =    'TEXTAREA'
        or rc.display_as_code =    'CHECKBOX' -- Row Selector
        or rc.display_as_code =    'HIDDEN'
      )

declare
  num1   data_table.n1%type;  -- declare variables
  num2   data_table.n2%type;  -- having same types as
  num3   data_table.n3%type;  -- database columns
  result temp.col1%type;
  cursor c1 is
    select n1, n2, n3
    from data_table
    where exper_num = 1
  ;
begin
  open c1;
  loop
    fetch c1 into num1, num2, num3;
    exit when c1%notfound;  -- true when fetch finds no more rows
    result := num2/(num1 + num3);
    insert into temp
      values (result, null, null)
    ;
  end loop;
  close c1;
  commit;
end;

<script type="text/javascript">

function HelloWorld()
{
   myname = "Joe";
   alert("Hello " + myname);
}

</script>

Textarea 1

begin
  -- this textarea is read-only
  null;
end;

Textarea 2

begin
  -- this textarea is editable
  null;
end;

Region

Identification
	Sequence	20
	Title	PL/SQL Example (read-only)
	Type	HTML/Text
Source
	Source Type	STATIC_TEXT
	Region Source	<textarea class="textarea codemirror-plsql">declare num1 data_table.n1%type; -- declare variables num2 data_table.n2%type; -- having same types as num3 data_table.n3%type; -- database columns result temp.col1%type; cursor c1 is select n1, n2, n3 from data_table where exper_num = 1 ; begin open c1; loop fetch c1 into num1, num2, num3; exit when c1%notfound; -- true when fetch finds no more rows result := num2/(num1 + num3); insert into temp values (result, null, null) ; end loop; close c1; commit; end;</textarea>

Region

Identification
	Sequence	30
	Title	Javascript Example (editable)
	Type	HTML/Text
Source
	Source Type	STATIC_TEXT
	Region Source	<textarea class="textarea codemirror-javascript codemirror-edit"><script type="text/javascript"> function HelloWorld() { myname = "Joe"; alert("Hello " + myname); } </script></textarea>

Item

Identification
	Sequence	10
	Name	P1086_TEXTAREA_1
	Display As	Textarea
User Interface
User Interface	Region	Textarea Item Example (read-only)
Advanced
	CSS Classes	codemirror-plsql
	Warn on Unsaved Changes	Page Default
Source
	Source Used	Always, replacing any existing value in session state
	Source Type	Static Assignment (value equals source attribute)
	Source value or expression	begin -- this textarea is read-only null; end;

Item

Identification
	Sequence	20
	Name	P1086_TEXTAREA_2
	Display As	Textarea
User Interface
User Interface	Region	Textarea Item Example (editable)
Advanced
	CSS Classes	codemirror-plsql codemirror-edit
	Warn on Unsaved Changes	Page Default
Source
	Source Used	Always, replacing any existing value in session state
	Source Type	Static Assignment (value equals source attribute)
	Source value or expression	begin -- this textarea is editable null; end;

Dynamic Action

Note: This object is located on page 0

Identification
Identification	Name	Codemirror
Execution Options
Execution Options	Sequence	100
When
When	Event	Page Load
Advanced
Advanced	Event Scope	Static
True Action
True Action
Identification
Identification	Action	Execute JavaScript Code
Settings
Settings	Code	var arrayLength = this.affectedElements.length; var p_mode = ""; var p_readOnly = true; for (var i = 0; i < arrayLength; i++) { if (this.affectedElements[i].classList.contains("codemirror-plain")) {p_mode = "text/plain"} else if (this.affectedElements[i].classList.contains("codemirror-plsql")) {p_mode = "text/x-plsql"} else if (this.affectedElements[i].classList.contains("codemirror-sql")) {p_mode = "text/x-sql"} else if (this.affectedElements[i].classList.contains("codemirror-javascript")) {p_mode = "text/javascript"} else if (this.affectedElements[i].classList.contains("codemirror-json")) {p_mode = "application/json"} else if (this.affectedElements[i].classList.contains("codemirror-html")) {p_mode = "text/html"} else if (this.affectedElements[i].classList.contains("codemirror-css")) {p_mode = "text/css"} else if (this.affectedElements[i].classList.contains("codemirror-sh")) {p_mode = "text/x-sh"} else if (this.affectedElements[i].classList.contains("codemirror-shell")) {p_mode = "text/x-sh"} else if (this.affectedElements[i].classList.contains("codemirror-xml")) {p_mode = "application/xml"} else if (this.affectedElements[i].classList.contains("codemirror-java")) {p_mode = "text/x-java"} else {p_mode = ""} ; if (this.affectedElements[i].classList.contains("codemirror-edit")) {p_readOnly = false} else {p_readOnly = true} ; if (this.affectedElements[i].classList.contains("codemirror-nowrap")) {p_lineWrapping = false} else {p_lineWrapping = true} ; codemirrorFromTextArea ( this.affectedElements[i] , p_mode , p_readOnly , p_lineWrapping ) ; }
Execution Options
	Sequence	10
	Fire On Initialization	No
Affected Elements
	Selection Type	jQuery Selector
	jQuery Selector	[class*="codemirror-"]

Codemirror

PL/SQL Example (read-only)

Javascript Example (editable)

Textarea Item Example (read-only)

Textarea Item Example (editable)

Code

Region

Region

Item

Item

Dynamic Action

Note: This object is located on page 0