Thursday, March 10, 2011

Bookmarklets to extend APEX 4.0

APEX allows you to add help text for your pages at a page level, and also an item level.
Your only given a plain textarea to add your text, as you can see in the following screenshot.
Hint APEX team: can we change this in the next version?

One way to replace the textarea with the APEX Rich Text Editor is to use a Bookmarklet, which allows you to embed JavaScript code in a browser bookmark.
Then simply click the bookmarklet to convert the textarea to a Rich Text Editor when needed:

Simply drag the following links onto your browser bar to save the bookmarklets:
The source code for the Page Level Help bookmarklet is:
javascript: (function(){
    function getScript(url, success){
        var script = document.createElement('script');
        script.src = url;
        var head = document.getElementsByTagName('head')[0];
        var done = false;
        /* Attach handlers for all browsers*/
        script.onload = script.onreadystatechange = function(){
            if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
                done = true;
    /* Code to execute after script loaded */
    function run(){
        apex.widget.ckeditor3("#F4000_P4301_HELP_TEXT", {
            "language": "en",
            "toolbar": "Basic",
            "toolbarStartupExpanded": true,
            "skin": "kama"
    /* Main */
    if (!window.CKEDITOR) {
        getScript('/i/libraries/ckeditor/3.2/ckeditor.js', function(){
    else {

All we are doing is adding the ckeditor.js file when it's not present, and then converting the specified page item to use the basic CKEditor.
For the advanced version replace "toolbar": "Basic" with "toolbar" : "Full".

You may need to adjust the item reference if your not using Application Express, or a translated version.

1 comment:

Kris Scorup said...

That's pretty handy. Thanks for the tip!