Skip to main content

Oracle APEX integration

The plug-in integrates with Oracle APEX using the JavaScript API and page designer item attributes.

Debug mode

When Oracle APEX debug mode is enabled, the plug-in:

  • produces browser console logs (Oracle APEX debug levels are used)
  • produces PL/SQL logs available in APEX View Debug

Dynamic Actions

The table below presents supported native Oracle APEX dynamic actions.

Dynamic ActionDescription
Set valueSets a new rich text value. The plug-in respects the Suppress Change Event flag.
ClearResets rich text HTML to empty value. Triggers change event.
DisableDisables the Froala editor.
EnableEnables the Froala editor.
HideHides the Froala editor.
ShowShows the Froala editor.
RefreshFetches the draft CLOB value from the session state and replaces the current rich text HTML.
Set FocusSets focus on the Froala editor.

Help in the Page Designer

The plug-in attributes are available in the page designer with built-in Help. Built-in help is only the supporting documentation available in the page designer and only describes some of the plug-in features.

image-20230303183119075


Native JavaScript API

The table below presents the supported native Oracle APEX JavaScript API.

APIDescription
apex.item.getValueReturns the current value (HTML) of the Froala editor
apex.item.addValueAdds the value to the Froala editor

Native JavaScript events

The plug-in is listening and triggering Oracle APEX native JavaScript events.

Change

The plug-in triggers a native change event (change) without additional event data.

The event is triggered when:

  • dynamic action Refresh on item implementing the plug-in is finished
  • the end-user leaves the editor after modifying rich HTML text
  • native APEX JavaScript API apex.item.addValue is executed

Before Refresh

The plug-in triggers a native before refresh event (apexbeforerefresh) before an item is refreshed. The plug-in extends the native event with extra data indicating whether an item refresh event is triggered by the native Refresh dynamic action or is triggered by the supporting dynamic action plug-in (Reset value).

The event is triggered along with the data described below.

PropertyTypeDescription
this.data.reasonTextIndicates what action triggered the event.

The this.data.reason might be set to the following values:

  • froalaresetclob - an item is refreshed by the supporting plug-in
  • apexdarefresh - an item is refreshed by the native Refresh dynamic action

After Refresh

The plug-in triggers a native after refresh event (apexafterrefresh) after an item is refreshed. The event is triggered along with the plug-in data indicating whether an item was refreshed by the native Refresh dynamic action or was triggered by the supporting dynamic action plug-in (Reset value).

The event is triggered along with the data described below.

PropertyTypeDescription
this.data.reasonTextIndicates what action triggered the event.

The this.data.reason might be set to the following values:

  • froalaresetclob - an item is refreshed by the supporting plug-in
  • apexdarefresh - an item is refreshed by the native Refresh dynamic action

Translation Messages

The plug-in supports the following Oracle APEX Text Messages. The translation Text message must be defined in an application, and it has to have the attribute Used in JavaScript enabled.

Translation CodeTranslation default text
UC_CONFIRM_UPLOAD_PENDINGFile(s) are not yet uploaded. Do you want to continue?

Validation

The plug-in supports HTML5 validation using an item attribute Validation and PL/SQL validation checking if rich text HTML is empty. Additionally, the plug-in has built-in validation checking if the currently edited CLOB value has been changed before submitting a page.

Understanding CLOB checksum validation

When the page is submitted, the built-in plug-in validation compares the on-load CLOB checksum with the CLOB checksum currently stored in the database. If checksums don't match, the page submission is terminated with error message:

Value has been overridden in the meantime. Reload the page and save it again

The purpose of this feature is the following:

  1. prevent two different end-users from saving their changes to the same CLOB stored in the database,
  2. prevent one end-user from saving different changes done in multiple browser tabs on the same CLOB.

A developer can enable CLOB checksum validation using the plug-in page item attribute Validation Request(s).

By the default the plug-in uses APEX hidden items named f01 to store page items CLOB checksums. A page item checksum can be stored in a custom page item - just create a new page item named {PX_PAGE_ITEM}_CHECKSUM, where {PX_PAGE_ITEM} is page item implementing the plug-in.