Using native form component

The Oracle APEX native form component simplifies the creation of CRUD forms through intuitive wizards. However, prior to Oracle APEX 22.2, the form component encountered challenges with CLOB values exceeding 32,767 characters. When a CLOB value surpasses this limitation, Oracle APEX raises an error when loading a document, and sets page item value to NULL when submitting a page. These limitations render the form component impractical for managing rich text documents containing extensive text or images.

In this guidelines, developers are guided through the process of creating a native form component and integrating the Rich Text Editor Pro supporting process plug-in. This integration enables rich text documents to surpass Oracle APEX Session State limitations for CLOB values.

Prerequisites

Before implementing the plug-in please read the implementation prerequisites described in parent document.

Create report page with form

In the application builder home page click Create Page button.

In the Create Page wizard step select Form and click the Next button.

In the Create Page wizard step select Report with Form and click the Next button.

In the Create Report with Form (Page Attributes) wizard step:

1. Set Report Page Number to 2
2. Set Report Page Name to Rich Text documents - report
3. Set Form page Number to 3
4. Set Form Page Name to Rich Text documents - form
5. (Optional) Configure breadcrumbs

In the Create Report with Form (Navigation Menu) wizard step:

1. Set Navigation Preference to Create a new navigation menu entry
2. Set New Navigation Menu Entry to Native Form Component
3. Click Next button

In the Data Source (Data Source) wizard step:

1. Set Table / View Name to UC_FROALA_SAMPLE_CLOBS
2. In Select Columns to be shown in the report select only columns ID and DESCRIPTION
3. Click Next button

In the Create Form - Columns and Primary Key (Form Page) wizard step:

1. In Select Columns to be displayed in the form select columns ID, DESCRIPTION, SESSION_ID, and CLOB_CONTENT
2. Set Primary Key Type to Select Primary Key Column(s)
3. Click Create button

New pages are created, see the screen shot below.

Enable page item plug-in

about this step

Enabling plug-in uploading images is optional, not uploaded images remain in a document as is without modyfing document HTML.

Navigate to page 3 Rich text document - form and update page item P3_CLOB_CONTENT by following these steps:

1. Set Identification \ Type to UC - Rich Text Editor Pro [Plug-in].
2. Set Appearance \ Template to Template \ Optional - Above
3. Set Settings \ Upload Image(s) on Request(s) to SAVE,CREATE
4. Empty Source \ Form Region
5. Save a page

Settings

Appearance

Source

Page item source explanation

This is required for Oracle APEX version prior to 22.2. When Oracle APEX native form attempts to load CLOB value exceeding 32,767 characters, it raises an error ORA-06502: PL/SQL: numeric or value error. In Oracle APEX versions prior to 22.2, loading CLOB values must be implemented using the supporting process plug-in

Page processes

about this step

Using the plug-in along with native form component in Oracle APEX 19.2 require implementing two processes, loading and updating a document (CLOB) in the database. Inserting process is not required since native form will insert NULL for CLOB values exceeding 32,768 characters.

Navigate page designer to page 3 - Rich text document - form and implement two processes before header and at processing point.

Before header - load a document

Create a new Before Header page process named Load rich text document and:

1. Set Identification \ Type to UC - Rich Text Editor Pro (Process) [Plug-in]
2. Set Settings \ Type to Load CLOB (Table)
3. Set Settings \ Item to P3_CLOB_CONTENT
4. Set Settings \ Schema to #OWNER#
5. Set Settings \ Table Name to UC_FROALA_SAMPLE_CLOBS
6. Set Settings \ CLOB Column Name to CLOB_CONTENT
7. Set Settings \ PK(s) Column(s) to ID
8. Set Settings \ Item(s) Containing PK(s) Values(s) to P3_ID
9. Set Success Message to Rich text document &P3_ID. loaded.
10. Set Server-side Condition \ Type to Item is NOT NULL
11. Set Server-side Condition \ Item to P3_ID
12. Save changes

Settings

Server-side Condition

Processing - update a document

Create a new Processing page process named Update rich text document and:

1. Set Identification \ Type to UC - Rich Text Editor Pro (Process) [Plug-in]
2. Set Settings \ Type to Update CLOB (Table)
3. Set Settings \ Item to P3_CLOB_CONTENT
4. Set Settings \ Schema to #OWNER#
5. Set Settings \ Table Name to UC_FROALA_SAMPLE_CLOBS
6. Set Settings \ CLOB Column Name to CLOB_CONTENT
7. Set Settings \ PK(s) Column(s) to ID
8. Set Settings \ Item(s) Containing PK(s) Values(s) to P3_ID
9. Set Success Message to Rich text document &P3_ID. updated.
10. Set Server-side Condition \ Type to Request is contained in Value
11. Set Server-side Condition \ Value to CREATE,SAVE
12. Save page changes

Settings

Server-side Condition

Test it

his simple and easy to implement instruction showcase how easy is utilizing the supporting process plug-in to load and update rich text documents.

To test the implementation using interactive report and modal page implementing the plug-in run page 2 - Rich Text documents - report.

Interactive report preview

Form preview

Test it in live demo

The plug-in sample application showcase this instructions implemention in example page Handle CLOB using native Form component and supporting process plug-in.