In 2022 I wrote about adding expand and collapse controls to Interactive Report control breaks with a Dynamic Action and a small amount of JavaScript. Interactive Grid already had similar functionality, while Interactive Report did not, so the solution simply added a button to each control break header and toggled the rows belonging to that group. A few years later I revisited the code with Oracle APEX 26.1 and decided that, rather than publishing another updated JavaScript snippet, it made more sense to turn the idea into a reusable Dynamic Action plug-in.

The original post is still a useful example of how Interactive Report control breaks can be manipulated on the client side: Collapse Interactive Report Control Break

This post looks at what changed when turning that small solution into a proper plug-in.

The Original Approach

The original implementation was intentionally simple.

A Dynamic Action was attached to the Interactive Report After Refresh event, and the JavaScript it executed searched for control break headers using:

th.a-IRR-header--group

For each control break header, the code added a button. Clicking the button found the following report rows up to the next control break header and toggled their visibility.

Conceptually, the important part was only this:

this$
  .closest("tr")
  .nextUntil(":has(" + lCtrBreak + ")")
  .toggle();

That remains the basic idea in the new implementation.

The old code also needed to run after every Interactive Report refresh because APEX replaces the generated report markup when the report is refreshed.

Why Revisit It?

For a single page, the original snippet is perfectly reasonable.

Once the same behavior is needed in several places, however, more questions appear:

• Should groups initially be expanded or collapsed?
• What happens after the report refreshes?
• Should a user's choices be remembered?
• How should multiple reports on the same page be handled?
• Can application developers expand or collapse all groups programmatically?
• How should the generated controls expose their state to assistive technology?
• How can another Dynamic Action react when a control break changes?

One question on the original post was also how to have the groups initially collapsed rather than expanded. The original solution could do that with a small code change, but configuration is a better fit once the behavior becomes reusable.

Those were good reasons to move the implementation out of Dynamic Action JavaScript and into a plug-in.

IR Control Break Toggler

The result is IR Control Break Toggler, a Dynamic Action plug-in. The basic page setup is still very similar to the original post.

Create a Dynamic Action on the Interactive Report:

• Event: After Refresh
• Selection Type: Region
• Region: <Your Interactive Report>

Then add a True Action:

• Action: IR Control Break Toggler [Plug-In]
• Fire on Initialization: Yes

There is no JavaScript to copy into the Dynamic Action anymore.

The plug-in receives the report that triggered the Dynamic Action and initializes the control break buttons for that region.

Remembering Control Break State

One of the larger differences from the original implementation is that the state of individual groups can now optionally be remembered.

The plug-in can use APEX scoped browser storage for either the current browser session or persistent browser storage.

This means a user can collapse a particular group, refresh the Interactive Report, and have that group remain collapsed.

The state is kept separate for each application, page, and report region.

I also wanted changing the plug-in configuration to behave predictably. For that reason, the configured initial state is stored as metadata with the remembered state. If Initially Expanded is later changed, previously remembered group states are discarded and the new configuration takes effect.

One detail that turned out to matter was group identity. APEX-generated control break header IDs can be reused when the report is paginated, so they cannot safely be used as persistent state keys. The plug-in therefore uses a separate key for remembered group state instead of relying on the DOM IDs of the currently rendered report.

Button Position and Direction

The original example always placed the button before the control break header text.

The plug-in can now place it at either the logical Start or End of the control break header.

Using logical positions instead of left and right also makes the behavior work with right-to-left layouts.

There is another small detail here: the default expand chevron changes direction depending on where the button is positioned.

For example, in a left-to-right layout:

• START → fa-chevron-right
• END → fa-chevron-left

The icon therefore points toward the content rather than always pointing in the same physical direction.

An explicitly configured Expand Icon still takes precedence.

Accessibility

The first version already used a native button and maintained aria-expanded and an accessible label.

For the plug-in I extended this by adding aria-controls.

Each toggle button references the report rows it controls:

<button
  type="button"
  aria-expanded="true"
  aria-controls="row_1 row_2"
  aria-label="Collapse">
  ...
</button>

Interactive Report data rows do not always have IDs suitable for this relationship, so the plug-in assigns IDs where needed while preserving any existing IDs.

The icon itself remains decorative with:

aria-hidden="true"

A Small Public API

One limitation of page-level Dynamic Action JavaScript is that it becomes awkward to control from elsewhere in the application.

The plug-in exposes a small API:

fi_jaris_plugin.ir.controlBreakToggler.expandAll(region);
fi_jaris_plugin.ir.controlBreakToggler.collapseAll(region);
fi_jaris_plugin.ir.controlBreakToggler.resetState(region);

Each method intentionally controls one Interactive Report region.

With the Button Trigger Action introduced in APEX 26.1, this works particularly well because the selected region can be passed directly to the API.

For example, a Collapse All button can use:

• Triggered Action: Execute JavaScript Code
• Selection Type: Region
• Region: <Your Interactive Report>
• Code:

fi_jaris_plugin.ir.controlBreakToggler.collapseAll(
  this.affectedElements
);

There is no need to hard-code the report Static ID into the JavaScript.

An Expand All button uses the same setup, but with this JavaScript code:

fi_jaris_plugin.ir.controlBreakToggler.expandAll(
  this.affectedElements
);

Reacting to Changes

The plug-in also exposes a Dynamic Action event:

Control Break Change [IR Control Break Toggler]

This means another Dynamic Action can react when a user expands or collapses a group, without manually wiring up a JavaScript event listener.

The same event is raised when the public API changes the state.

Internally the JavaScript event is:

ircontrolbreakchange

and its event data includes the report region, affected control break header IDs, resulting state, and the source of the change.

For bulk operations such as Expand All or Collapse All, one event is raised after the operation if one or more groups changed state, rather than one event for every control break header.

The Interesting Part Hasn't Changed

Despite the extra functionality, the central technique is still the one from the 2022 post. Find the control break header:

th.a-IRR-header--group

and consider the rows after its <tr> up to the next control break header to be the rows belonging to that group.

Everything else in the plug-in is mostly about making that behavior reusable:

• configuration,
• refresh handling,
• state management,
• accessibility,
• application integration,
• and avoiding duplicate initialization.

That is usually how small APEX utilities evolve. The first version proves that the idea works; the reusable version is mostly about dealing cleanly with everything around that idea.

Source Code

The plug-in source, installable APEX export, and documentation are available on GitHub:
https://github.com/jariolaine/apex-ir-control-break-toggler

The repository also contains the unminified JavaScript, CSS, render procedure, and plug-in export, so the implementation can be inspected or modified without having to extract files from the APEX plug-in.

See a working example on oracleapex.com.

When building drill down interfaces in Oracle APEX, non-chained modal drawers are one way to display hierarchical data. However, requiring users to manually close each drawer one by one to return to a previous step can lead to unnecessary clicks. Here is one approach to using custom URL actions and breadcrumbs to close multiple non-chained drawer pages at once.

In my example, I have 4 drawer pages to drill down into. Because the drawers are not chained, each new drawer opens on top of the previous one. If a user drills down to the last drawer, they can easily close the previous drawers directly from the breadcrumb.

You can use an existing breadcrumb for this, but in my example, I created a totally new breadcrumb just for my drawers.

Creating the Breadcrumb

Navigate to Application Shared Components -> Breadcrumbs and click Create Breadcrumb.

Give a name to the breadcrumb and click Create.

Click New Entry.

• Set Page to the page number where you open the first drawer page.
• Give it a Short Name.
• Change Target is a to URL.
• Enter the following into URL Target:

#action$go-to-home?close-step-4&close-step-3=true&close-step-2=true&close-step-1=true

URL Target Breakdown:

• #action$ : This prefix indicates the action is triggered via the URL.
• go-to-home : This is the name of the action being triggered. This needs to be different for each breadcrumb entry.
• ?close-step-4&close-step-3=true... : These are URL parameters passed along with the action.
  The parameter values do not matter, parameter names indicate which drawers need to be closed. It might be clearer to use parameter names like close-page-<page number>=true.

Click Create and Create Another.

Adding Child Breadcrumb Entries

• Set Page to the page number of the first drawer page.
• For Parent Entry, select the breadcrumb entry created previously.
• Give it a Short Name.
• Change Target is a to URL.
• Enter the following into URL Target:

#action$go-to-step-1?close-step-4&close-step-3=true&close-step-2=true

In the URL Target, give a different action name and remove the parameter name indicating the closing of the drawer page associated with this breadcrumb entry. In this example, it was &close-step-1=true.

Click Create and Create Another.

Repeat the above steps similarly by setting the correct Page, Parent Entry, Short Name, and URL Target, except on the last child breadcrumb entry, set Target is a to - No Target -.

Adding the Breadcrumb Region to Drawer Pages

Ensure the newly created custom breadcrumb is displayed on each of the drawer pages.

Create a new region in the Slot Dialog Header and set the Type to Breadcrumb.

Under the region's Source properties, select your custom Breadcrumb.

Repeat this step for all drawer pages so the user has a consistent navigation experience as they drill down.

Configuring the First Drawer Page

Edit your first drawer page and add the following JavaScript to Execute When Page Loads:

/* Register a custom action triggered by the breadcrumb URL. */
apex.actions.add([{
  name: "go-to-home",
  action: function(event, element, args) {
    /* Close this drawer and pass the URL parameters (args) to the parent page. */
    apex.navigation.dialog.close( true, args );
  }
}]);

The name parameter is the breadcrumb entry URL action name. The action closes the drawer and passes the URL parameters as event data.

Create a Dynamic Action:

• Event: Dialog Close
• Selection Type: Region
• Region: <Select the region name where the link or button opens the next drawer page>

Edit the True Event:

• Action: Close Dialog
• Client-side Condition -> Type: JavaScript Expression
• JavaScript Expression:

/* Check if the closed dialog passed a 'close-step-1' parameter in event data. */
this.data.hasOwnProperty( "close-step-1" );

Configuring Subsequent Drawer Pages

Edit the next drawer page and add this JavaScript to Execute When Page Loads:

apex.actions.add([{
  name: "go-to-home",
  action: function(event, element, args) {
    apex.navigation.dialog.close( true, args );
  }
},{
  name: "go-to-step-1",
  action: function(event, element, args) {
    apex.navigation.dialog.close( true, args );
  }
}]);

Here we similarly add an action for the next breadcrumb entry.

Create a Dynamic Action:

• Event: Dialog Close
• Selection Type: Region
• Region: <Select the region name where the link or button opens the next drawer page>

Edit the True Event:

• Action: Execute JavaScript Code
• Code:

apex.navigation.dialog.close( true, this.data );

• Client-side Condition -> Type: JavaScript Expression
• JavaScript Expression:

this.data.hasOwnProperty( "close-step-2" );

Repeat the above steps similarly, adding actions to the page's JavaScript Execute When Page Loads and creating corresponding dynamic actions for the other drawer pages. Note that on the very last drawer page, you do not need to create a dynamic action.

Here is how the last drawer page JavaScript Execute When Page Loads looks:

apex.actions.add([{
  name: "go-to-home",
  action: function(event, element, args) {
    apex.navigation.dialog.close( true, args );
  }
},{
  name: "go-to-step-1",
  action: function(event, element, args) {
    apex.navigation.dialog.close( true, args );
  }
},{
  name: "go-to-step-2",
  action: function(event, element, args) {
    apex.navigation.dialog.close( true, args );
  }
},{
  name: "go-to-step-3",
  action: function(event, element, args) {
    apex.navigation.dialog.close( true, args );
  }
}]);

Conclusion

By implementing this custom breadcrumb and dynamic action logic, you give your users a seamless way to navigate out of deep drill-down paths without endless clicking. See working example in action.

If you spend any time developing with Oracle APEX, you likely already have a preferred way to run a local environment. The Oracle community has produced several excellent local setups (e.g., Docker/Podman-based options) over the years, and we are fortunate to have Oracle Container Registry making this very easy.

However, everyone has their own specific preferences for how a local stack should be managed. Recently, I wanted to spin up the 26ai Free database, ORDS, and the new APEX 26.1, but I wanted to eliminate as much of the manual post-installation clicking as possible.

I ended up building my own Docker Compose environment to automate this process. I am sharing it today on GitHub as just one more option for the community. Please keep in mind that this setup is intended strictly for local development, testing, and learning purposes—it is not secured or optimized for production use. If you prefer an automated, configuration-driven approach to your local stack, this might fit nicely into your workflow.

The Problem with Tearing Down and Rebuilding

Local development containers are meant to be disposable. However, whenever I rebuilt a fresh local APEX development environment, I found myself repeating the same tedious steps: configuring APEX instance parameters and creating workspaces.

The Goal: Configuration as Code

Rather than writing extensive setup guides or manual SQL scripts, I wanted to make the environment declarative, much like the Oracle APEX low-code development platform itself.

The core philosophy of this repository is that your desired state should be defined in simple files before the database even starts.

Instead of configuring APEX through the browser or SQL scripts, you simply define what you want in YAML templates:

• Need a new workspace? Add it to the configuration file.
• Need a specific developer user assigned to that workspace? Define it upfront.
• Need to toggle an instance-level parameter like Database Actions? Set it before you spin up the container.

How does this actually work under the hood? At the highest level, Docker Compose acts as the orchestrator. It allows you to define and manage multiple interconnected containers (like the Oracle Database and ORDS) as a single unified application. Instead of running e.g. command-line scripts to link containers, Docker Compose reads your configuration files to automatically wire up the internal networks, mount persistent storage volumes, and inject the correct environment variables.

Once Docker Compose starts the environment, the database is automatically set up. Next, the ORDS container takes over to automatically install APEX into the database. After this base installation is complete, the custom scripts located in the ords-entrypoint.d directory take over. These scripts parse YAML configuration files and dynamically generate the corresponding SQL statements. The container then executes these generated SQL files against the database to handle the necessary schema creations, grant the required privileges, provision the APEX workspaces, and set up APEX instance parameters exactly as specified.

You can copy these generated SQL files from the ORDS container and reuse them to easily provision non-local environments, like a shared development or test database.

New schemas created by this process are REST-enabled. This unlocks the browser-based Database Actions and allows you to start developing e.g. ORDS REST modules. You don't necessarily need to install local client tools like SQLcl or SQL Developer for VS Code on your machine to start working—though having them is still incredibly helpful!

Available on GitHub

There is no shortage of great ways to set up local environments, but if you appreciate a YAML-driven, automated approach, feel free to give this one a try.

GitHub Repository: local-apex-dev (v1.1 Release)

(Note: If you are reading this in the future, be sure to check the main branch for the latest updates and features!)

Feedback, forks, and pull requests are always welcome!

By integrating Oracle Cloud Identity Domain into your APEX environment, you create a robust authentication mechanism that not only streamlines user management but also enhances security. This seamless integration allows organizations to leverage advanced identity management features, enabling secure single sign-on (SSO) capabilities while simplifying user experience. In this blog post, we will explore the steps to authenticate your Oracle APEX development and administration services with Oracle Cloud Identity Domain.

Access your Oracle Cloud tenancy and go to Identity & Security → Domains. Choose the Default domain and make a note of the Domain URL. You'll need this information later when setting up the APEX authentication scheme.

First, we need to create an integrated application to authenticate APEX workspaces. Navigate to the Integrated Applications section and click the "Add Application" button.

Select Confidential Application and click “Launch workflow” button.

Enter Name for application. Optionally add also Description and upload Application Icon.

Enter to Application URL “https://<your ORDS sever host>/ords/r/apex/workspace-sign-in/select-workspace” and click "Next" button.

Choose the option to Configure this application as client now and input the required details.

• Make sure to check the Authorization code checkbox.
• For the Redirect URL, enter: https://<your ORDS server host>/ords/apex_authentication.callback.
• For the Post-logout redirect URL, use: https://<your ORDS server host>/ords/apex.

After that, click the "Next" button, and on the following page of the wizard, click the “Finish” button.

Once the application is created, click the "Activate" button.

Scroll down to Resource server configuration and find the Client ID and make a note of it. Then, click on Show Secret to reveal the Client Secret and jot it down. You will need these details later when setting up the APEX authentication scheme.

Before configuring authentication schemes in the APEX development environment, log in to the database as an admin user and check the current value of APEX_BUILDER_AUTHENTICATION from the APEX_INSTANCE_PARAMETERS view. Make a note of this value in case you need to revert the authentication scheme to its original state.

select
 name
, value
from APEX_INSTANCE_PARAMETERS
where 1 = 1
 and name = ‘APEX_BUILDER_AUTHENTICATION’
;

To authorize access to the APEX development environment and administration services, you must create users in APEX workspaces, even when using external authentication.

APEX documentation says:

Even for external authentication schemes (such as HTTP Header Variable), make sure that users exist as developers or administrators in your workspace. Otherwise, APEX will not be able to verify in which workspace a user is allowed to work.

Log in to APEX Administration Services and go to Manage Workspaces → Manage Developers and Users. Create a new user in the INTERNAL workspace, using the same username as your Oracle Cloud Identity Domain account. Ensure that the User is an administrator option is set to Yes.

You can also create your user in other workspaces as needed or update your existing users username to match your Oracle Cloud username.

Next navigate Manage Instance → Security and scroll down and edit Social Sign-In authorization scheme.

Enter needed information:

• Client ID: <Identity Domain application client id noted down earlier>
• Client Secret: <Identity Domain application client secret noted down earlier>
• Confirm Client Secret: <Identity Domain application client secret noted down earlier>
• Authentication Provider: OpenID Connection Provider
• Discovery URL: <Domain URL you noted down earlier>/.well-known/openid-configuration
• Scope: profile
• Username Attribute: sub
• Verify Username: Yes

Then click "Apply Changes".

Edit again Social Sign-In authorization scheme and click Make Current Scheme.

Click “OK” to confirm authorization scheme change.

Log out of the APEX Administration Service, then return to your APEX instance login URL.

Now you should see Oracle cloud login screen.

Log in to see a list of workspaces you are authorized to access.

If an issue arises, you can restore the APEX instance authentication scheme by logging into the database as an admin user and executing the following command. Replace DB with the value you obtained earlier from the APEX_INSTANCE_PARAMETERS view query.

begin
 apex_instance_admin.set_parameter( 'APEX_BUILDER_AUTHENTICATION', 'DB' );
end;
/

Here is how you can easily set report refresh interval just using dynamic action without writing any line of JavaScript.

You need set report attribute Lazy Loading to on.

Create dynamic action:

• Type: Debounce
• Time: < enter time in milliseconds how often report is refreshed, e.g. 10000 for every 10 seconds >
• Event: After Refresh
• Selection: Type: Region
• Region: < select report region to refresh >

Create true action

• Action: Refresh
• Selection Type: Triggering Element
• Fire on Initialization: Off

See working example.

If you don't want use report Lazy loading, you need write little bit JavaScript and define dynamic action bit differently:

• Type: Debounce
• Time: < enter time in milliseconds how often report is refreshed, e.g. 10000 for every 10 seconds >
• Event: Custom
• Custom Event: custom-event-refresh
• Selection: Type: Region
• Region: < select report region to refresh >

Create true action:

• Action: Refresh
• Selection Type: Triggering Element
• Fire on Initialization: Off

Create another true action:

• Action: Execute JavaScript Code
• Selection Type: Triggering Element
• Fire on Initialization: On
• Code:

this.affectedElements.trigger( "custom-event-refresh" );

Here's an example that lets you drag and drop the rows of an interactive grid to arrange the records the way you want. A table used in an interactive grid must have a column that stores the sort order. If your table doesn't already have a column that can be used for this, edit the table and add a new column.

alter table <your table name> add (display_seq number);
update <your table name> set display_seq = rownum;
alter table <your table name> modify display_seq not null;

First, create an editable interactive grid and run the page. Sort the interactive grid in ascending order by display sequence column.

Then hide the display sequence column from the report.

Save the report.

Create new column to the interactive grid .

Enter a column name. Change the type to “HTML expression”. Add to the HTML Expression:

<span aria-hidden="true" class="fa fa-sort z-sortable--handle"></span>

Change the Source Type to None. Add a Column Initialization JavaScript Function:

sortableIG.initHandleColumn

Edit the other interactive grid columns and disable Sorting for all columns except the display sequence column.

Edit the display sequence column and add a Column Initialization JavaScript Function:

sortableIG.initSequenceColumn

Add to the interactive grid region Initialization JavaScript Function:

sortableIG.initRegion

Add to the page JavaScript Function and Global Variable Declaration:

// create a namespace for sortable IG
var sortableIG = {};

( function( $, region, sortableIG ) {

  // Set defaults
  sortableIG.options = {
    region: {
      defaultModelOptions: {
        sequenceStep: 10
      }
      ,defaultGridViewOptions: {
        reorderColumns: false
      }
    }
    ,handleColumn: {
      defaultGridColumnOptions: {
        noHeaderActivate: true
      }
      ,layout: {
        columnAlignment: "center"
        ,noStretch: true
      }
    }
    ,sequenceColumn: {
      features: {
      	sort: true
        ,canHide: false
        ,aggregate: false
        ,compute: false
        ,controlBreak: false
        ,groupBy: false
        ,highlight: false
        ,pivot: false
      }
    }
  }

  // sortable IG handle column Initialization code
  // call function in IG column Advanced: Column JavaScript Initialization Code
  sortableIG.initHandleColumn = function( options ) {

    return $.extend( true, options, sortableIG.options.handleColumn );

  }

  // sortable IG sequence column Initialization code
  // call function in IG column Advanced: Column JavaScript Initialization Code
  sortableIG.initSequenceColumn = function( options ) {

		// get sequence column name and store it for region Initialization JavaScript Function
    sortableIG.options.region.defaultModelOptions.sequenceField = options.name;

    return $.extend( true, options, sortableIG.options.sequenceColumn );

  }

  // sortable IG initialization code
  // call function in IG region Advanced: JavaScript Initialization Code
  sortableIG.initRegion = function( options ) {

    $( $x( options.regionStaticId ) ).on( "interactivegridviewchange interactivegridreportsettingschange", function( _event, ui ) {

      var view          = region( this.id ).call( "getViews", "grid" )
        , sortableArea$ = $( $x( this.id ) )
        , helperBgClass = "u-color-29-bg"
      ;

      // https://api.jqueryui.com/sortable/
      sortableArea$.sortable({
        handle:       ".z-sortable--handle"
        ,items:       "tr:has(.z-sortable--handle)"
        ,axis:        "y"
        ,tolerance:   "pointer"
        ,scrollSpeed: 8
        ,placeholder: "a-GV-cell u-color-1-bg"
        
        ,helper: function( _event, ui ){
          ui.children().each( function(){
            $( this ).width( $( this ).width() ).addClass( helperBgClass )
          })
          return ui;
        }
        
        ,update: function( _event, ui ){
          
          var model = view.model
            , item$ = $( ui.item )
            // get moved record
            , item = ( item$.length ) ? model.getRecord( item$.data( "id" ) ) : null
            // get next or previous row from visible table depending is record moved up or down
            , after$ = ( ui.originalPosition.top > ui.position.top ) ? item$.next() : item$.prev()
            , after = ( after$.length ) ? model.getRecord( after$.data( "id" ) ) : null
          ;
          
          // remove helper background class, if row isn't actually moved
          item$.children().removeClass( helperBgClass );
          // check if we have found record and place where record is moved
          if( item && after ){
            // if record is moved upwards, we need get previous record from model
            after = ( ui.originalPosition.top > ui.position.top ) ? model.recordAt( model.indexOf( after ) - 1 ) : after;
            // move record
             if( item !== after ){
              model.moveRecords( [item], null, after );
            }
          }
          
        }
      
      });

    });

    return $.extend( true, options, sortableIG.options.region );

  }

})( apex.jQuery, apex.region, sortableIG );

Add to the Page CSS Inline:

.z-sortable--handle{
  cursor: move;
}
.ui-sortable-helper{
  display: inline-flex;
}

Now when you run a page, you can drag and drop to arrange the rows of the interactive grid from the handle column.

See working example in apex.oracle.com.

If you need support for touch events, you can try jQuery UI Touch Punch. Download jquery.ui.touch-punch.js and upload the file to Static Application Files. Reference the file e.g. on page JavaScript File URLs:

#APP_FILES#jquery.ui.touch-punch.js

You can create APEX workspaces, applications and schemas exports from database using PL/SQL. This might be useful e.g. if you working on Oracle cloud always free autonomous databases. In this example we use always free autonomous database workload type APEX and store exports to object storage bucket in the Oracle cloud. You can setup object versioning and lifecycle policy rules e.g. to move old versions to infrequent access or archive storage and delete old versions after some period. You can also create database job to schedule exports.

First create new compartment to isolate needed cloud resources.

Login to your Oracle cloud tenancy, navigate to “Identity & Security” → “Compartments” and click “Create Compartment”.

Enter name and description, select root compartment as “Parent Compartment” and click “Create Compartment”.

Once the compartment is created, it will appear in the list.

We need to add a policy to the object storage service order to use lifecycle policy rules in the bucket.

Navigate to “Identity & Security” → “Policies”, select root compartment and click “Create Policy”.

Enter name, description, change “Show manual editor” to on and enter policy statements.

Allow service objectstorage-<oci region identifier> to manage object-family in tenancy

Note! Replace part <oci region identifier> in statement with your region identifier. 

Once the policy is created, you can see its details.

Next create object storage bucket and set lifecycle policy rules for the bucket.

Navigate to “Storage” → “Buckets”, select compartment you created earlier and click “Create Bucket”.

Enter bucket name, check “Enable Object Versioning” and click “Create”.

Once the bucket is created, it will appear in the list.

Click the bucket name to view its detail.

Note down namespace as you will need it later.

From left side menu select “Lifecycle Policy Rules” and click “Create Rule”.

Enter name, select “Previous Versions of Objects”, set “Lifecycle Action” to “Move Infrequent Access”, set “Number of Days” and click “Create”.

Once the lifecycle policy rule is created, it will appear in the list.

Click “Create Rule” to create another rule.

Enter name, select “Previous Versions of Objects”, set “Lifecycle Action” to “Delete”, set “Number of Days” and click “Create”.

Once the lifecycle policy rule is created, it will appear in the list.

Next create group, policy and user to access objects storage bucket.

Navigate to “Identity & Security” → “Groups” and click “Create Group”.

Enter name, description and click “Create”.

Once the group is created, you can see its details.

Navigate to “Identity & Security” → “Policies” and select compartment you created earlier.

Click “Create Policy”.

Enter name, description, change “Show manual editor” to on and enter policy statements.

Allow group <group name> to read buckets in compartment <compartment name> where any {target.bucket.name='<bucket name>'}
Allow group <group name> to manage objects in compartment <compartment name> where any {target.bucket.name='<bucket name>'}

Note! Replace parts <group name>, <compartment name> and <bucket name> in statement with names you have used for those objects earlier.

When the policy is created you see its details.

Navigate to “Identity & Security” → “Users” and click “Create User”.

Select “IAM  User”, enter name and description and then click “Create”.

Once the user is created, you can see its details.

Click “Add User to Group”

Select group you create earlier and click “Add”.

Once a user is added to a group, the group name will appear in the "Groups" list.

Click “Edit User Capabilities”.

Limit user capabilities only to “Auth Token” and click “Save Changes”.

Next, we need to create an authentication token so that the database can move the exports to object storage bucket.

Navigate to user “Auth Tokens” and click “Generate Token”.

Give token a description and click “Generate Token”.

Copy the token and place it somewhere safe as you can not view it later and then click “Close”.

Once the token is generated, it will appear to "Auth Tokens" list.

Next login to your autonomous database e.g. using Database Actions as admin user.

Create new database user, grant needed privileges and enable database actions.

create user <username> identified by "<password>";

-- Grant privileges
grant connect, resource, dwrole, apex_administrator_role, datapump_cloud_exp, datapump_cloud_imp to <username>;
grant execute on dbms_cloud to <username>;

alter user <username> default role all;

-- Add quota for user
alter user <username> quota unlimited on data;

-- Enable database actions
begin
  ords.enable_schema(
    p_enabled              	=> true
    ,p_schema               => '<username>'
    ,p_url_mapping_type     => 'BASE_PATH'
  	,p_url_mapping_pattern	=> '<username>'
  );
end;
/

Note! Replace parts <username> and <password> with values you like to use.

Create database package to to new database user schema containing needed procedures to create exports . Package has procedure that exports all APEX workspaces, workspace files, applications and application parsing schemas and move those to object storage bucket. Package contains also procedure to import schema from object storage bucket.

You can review package code from Github Gist before creating it using below commands.

alter session set current_schema = <username>;

declare
	l_pkg_sql clob;
begin

-- Fetch package code from GitHub Gist.
  l_pkg_sql :=
		apex_web_service.make_rest_request(
    	p_url => 'https://gist.githubusercontent.com/jariolaine/60bfc2c08c0aa01658c78ea5cc918b46/raw/backup_api.sql'
      ,p_http_method => 'GET'
    )
	;

-- Install package.
	dbms_cloud_repo.install_sql(
  	content => l_pkg_sql
  );

end;
/

Note! Replace part <username> with database user you created earlier.

Login to your database using database user you created earlier. You can view user packages to verify earlier created package exists.

Create credential to access object storage.

begin

	dbms_cloud.create_credential(
		credential_name	=> 'OBJECT_STORAGE_CRED'
		,username       => '<iam user>'
		,password       => '<auth token>'
	);

end;
/

Note! Replace parts <iam user> and <auth token> with IAM user and token you created earlier.

Now you can test to create exports by running the procedure.

begin

	backup_api.export_apex_workspaces(
  	p_credential_name	=> 'OBJECT_STORAGE_CRED'
    ,p_region         => '<oci region identifier>'
    ,p_namespace      => '<object storage namespace>'
    ,p_bucket         => '<bucke name>'
	);

end;
/

Note! Replace parts <oci region identifier>, <object storage namespace> and <bucket name>  with your region identifier, namespace and bucket name.

View your object storage bucket objects. APEX exports have prefix APEX/<workspace name> and schema exports datapump.

If you have run database procedure multiple times you can see objects have versions.

We can also create job and schedule exports. Login to database using user you created earlier and create job.

declare
	l_job_name varchar2(256);
begin

-- Set job name
	l_job_name := 'APEX_EXPORT_JOB';

-- Create scheduler job
	dbms_scheduler.create_job(
  	job_name              => l_job_name
    ,job_type             => 'STORED_PROCEDURE'
    ,job_action           => 'backup_api.export_apex_workspaces'
    ,number_of_arguments	=> 4
    ,start_date           => to_timestamp_tz( to_char( sysdate + 1, 'DD.MM.YYYY' ) || ' 01:00:00 +02:00' ,'DD.MM.YYYY HH24:MI:SS TZR' )
    ,repeat_interval      => 'FREQ=DAILY;'
    ,enabled              => false
    ,auto_drop            => false
    ,comments             => 'Daily APEX workspace export job'
	);

-- Set job arguments
	dbms_scheduler.set_job_argument_value(
		job_name            => l_job_name
		,argument_position  => 1
		,argument_value     => 'OBJECT_STORAGE_CRED'
	);

	dbms_scheduler.set_job_argument_value(
		job_name            => l_job_name
		,argument_position  => 2
		,argument_value     => '<oci region identifier>'
	);

	dbms_scheduler.set_job_argument_value(
		job_name            => l_job_name
		,argument_position  => 3
		,argument_value     => '<object storage namespace>'
	);

	dbms_scheduler.set_job_argument_value(
		job_name            => l_job_name
		,argument_position  => 4
		,argument_value     => '<bucket name>'
	);

-- Enable job
	dbms_scheduler.enable( l_job_name );

end;
/

Note! Replace parts <oci region identifier>, <object storage namespace> and <bucket name> with your region identifier, namespace and bucket name.

Now we have set daily exports. Later if you see object storage bucket objects, you can see lifecycle policy rules move and delete object versions after days you have defined. Please note that latest version of the objects are not moved or deleted.

If you wish import schema from object storage bucket you can run procedure:

begin

	backup_api.import_schema(
		p_credential_name	=> 'OBJECT_STORAGE_CRED'
		,p_region         => '<oci region identifier>'
		,p_namespace      => '<object storage namespace>'
		,p_bucket         => '<bucket name>'
		,p_schema         => '<schema name>'
		,p_new_schema     => '<new schema name>'
	);

end;
/

Note! Replace parts <oci region identifier>, <object storage namespace>, <bucket name>, <schema name> and <new schema name> with your region identifier, namespace, bucket name, schema name and new schema name.

If you omit parameter p_new_schema schema will not be remapped to new name.

The interactive grid has a feature that collapse and expands the control break. This feature is missing from interactive reports, but it's relatively easy to add the same feature with dynamic action and JavaScript.

First create interactive report and then add dynamic action

• Event: After Refresh
• Selection Type: Region
• Region: {select your interactive report region}
• Action: Execute JavaScript Code
• Fire on Initialization: On
• Code:

let lButton         = apex.util.htmlBuilder()
// Get messages for button title. Reusing IG messages
  , lCollapseTitle  = apex.lang.getMessage( "APEX.GV.BREAK_COLLAPSE" )
  , lExpandTitle    = apex.lang.getMessage( "APEX.GV.BREAK_EXPAND" )
// Button icon classes for collapse and expand
  , lBtnIcons       = [ "fa-chevron-down", "fa-chevron-right" ]
// IR control break row jQuery selector
  , lCtrBreak       = "th.a-IRR-header--group"
;
// Prepare button HTML
lButton.markup( "<button" )
  .attr( "type", "button" )
  .attr( "aria-expanded", "true" )
  .attr( "title", lCollapseTitle )
  .attr( "aria-label", lCollapseTitle )
  .attr( "class", "t-Button t-Button--noLabel t-Button--icon t-Button--small t-Button--gapRight" )
  .markup( "><span" )
  .attr( "aria-hidden", "true" )
  .attr( "class", "t-Icon fa " + lBtnIcons[0] )
  .markup( "></span></button>" )
;
// Set click event to button
let button$ = $( lButton.toString() ).click( function(){
  let this$     = $( this )
    , lExpanded = this$.attr( "aria-expanded" ) === "true" ? "false" : "true"
    , lNewTitle = lExpanded === "true" ? lCollapseTitle : lExpandTitle
  ;
// Change button attributes and icon
  this$.attr({
    "title": lNewTitle
  , "aria-label": lNewTitle
  , "aria-expanded": lExpanded
  }).children().toggleClass( lBtnIcons ).end()
  // Hide/show IR rows from row clicked to the next control break
    .closest( "tr" ).nextUntil( ":has(" + lCtrBreak + ")" ).toggle()
  ;
});
// Attach button to IR control break rows
$( this.triggeringElement ).find( lCtrBreak ).prepend( button$ )
// Uncomment below line to initiallyt collapse control breaks.
// Remember also change button initial attributes.
//  .closest( "tr" ).nextUntil( ":has(" + lCtrBreak + ")" ).toggle()
;

Run the page and add a control break from the interactive report action menu.

See working example

First navigate to application shared components and under Other Components click Shortcuts.

Create new Shortcut from scratch. Give name for Scortcut e.g. IG_TOOLTIP_JSON. Change Type to Function Body returning VARCHAR2. Place code to Shortcut and press Create.

declare
  l_json varchar2(32700);
begin
  select json_arrayagg(
    json_object(
      'staticId' value static_id || '_HDR',
      'columnId' value 'C' || column_id || '_HDR',
      'helpText' value help_text
    )
  ) as d
  into l_json
  from apex_appl_page_ig_columns
  where application_id = :APP_ID
    and page_id = :APP_PAGE_ID
    and help_text is not null
  ;
  return l_json;
end;

Then edit your Interactive Grid region and set Static ID for region.

Add JavaScript to page Function and Global Variable Declaration.

(function($){

  $(function(){

    /* 
      MY_IG_REGION is IG region Static ID.
      Change variable value to match IG region static ID
    */
    var regionStaticId = "MY_IG_REGION";

    setIgHeaderHelp(regionStaticId).on("interactivegridviewchange interactivegridreportsettingschange", function(event, ui) {
      setIgHeaderHelp(this.id);
    });

  });

  function setIgHeaderHelp(region){

    var region$ = $($x(region));

    /* IG_TOOLTIP_JSON is Shortcut name */
    $.each("IG_TOOLTIP_JSON", function(i, tooltipData){
      region$.find([$x(tooltipData.columnId), $x(tooltipData.staticId)]).parent("th").attr({"title" : tooltipData.helpText});
    });

    return region$;

  }

})(apex.jQuery);

Remember change variable regionStaticId value to match your IG region Static ID.

For last edit IG columns and add needed text to Help Text field.

See working example

Oracle REST Data Service (ORDS) has feature to scan uploaded files for viruses. You can install e.g. C-ICAP and ClamAV for that purpose. Here are steps how to do that on Ubuntu 18.04 server assuming you have already working ORDS installation on same or different server.

First install needed packages and dependencies.

sudo apt install libc-icap-mod-virus-scan libclamunrar9

After packages are installed, edit file /etc/default/c-icap to allow C-ICAP start

sudo sed -i 's/START=no/START=yes/g' /etc/default/c-icap

Edit file /etc/c-icap/c-icap.conf and add below lines to end of file

Include virus_scan.conf
Include clamav_mod.conf
virus_scan.DefaultEngine clamav
virus_scan.ScanFileTypes TEXT DATA EXECUTABLE ARCHIVE GRAPHICS STREAM DOCUMENT
ServiceAlias AVSCAN virus_scan?allow204=on&sizelimit=off&mode=simple

Restart C-ICAP server

sudo systemctl restart c-icap

Next edit ORDS configuration file default.xml and add below lines to it before closing properties tag

<entry key="icap.port">1344</entry>
<entry key="icap.server">127.0.0.1</entry>

Change key icap.server value to point server where you did install C-ICAP if ORDS is running on different server.

After you have modify ORDS configuration, restart ORDS standalone or web server where ORDS is deployed.

With your own risk, you can try virus scanner with test files from www.eicar.org. Please read instructions, before downloading test files.

Previously I did write post about APEX and shuttle filter. I received comments that filtering does not work when shuttle have parent cascading item. Issue was that JavaScript code stores shuttle values to variable for filtering only on page load.

I did receive also proposal to add button for clearing filter item. This is also included to new JavaScript code along with some style changes for APEX 19.2.

Here is modified code for page JavaScript Function and Global Variable Declaration:

(function($) {
  $.fn.htmldbShuttlefilter = function(options) {

    options = $.extend({}, {
      "filterPlaceholder": "Filter",
      "buttonTitle": "Clear filter",
      "buttonClass": [
        ,"a-Button"
        ,"a-Button--noLabel"
        ,"a-Button--withIcon"
        ,"a-Button--small"
        ,"a-Button--noUI"
        ,"a-Button--shuttle"
        ,"margin-top-none"
      ],
      "buttonIcon": "fa-times"
    }, options);

    function getShuttleValues(elem$) {
      return elem$.children("option").map(function() {
        return {
          text: $(this).text(),
          value: $(this).val()
        };
      });
    }

    return this.each(function(i) {

      var $self = $(this),

        shuttleResetBtnId = $self.attr("id") + "_RESET",
        $select = $self.find("select"),

        // get shuttle values
        shuttleValues = getShuttleValues($select),

        // filter reset button
        $resetBtn = $("<button/>", {
          "type": "button",
          "title": options.buttonTitle,
          "aria-label": options.buttonTitle,
          "class": options.buttonClass.join(" "),
          "css": {
            "padding": "4px"
          }
        }).append(
          $("<span/>", {
            "aria-hidden": "true",
            "class": "a-Icon fa " + options.buttonIcon,
          })
        ).click(function() {
          // clear filter text field
          $filter.val("").keyup();
        }),

        // filter text field
        $filter = $("<input/>", {
          "type": "text",
          "value": "",
          "autocomplete": "off",
          "placeholder": options.filterPlaceholder,
          "class": "text_field apex-item-text",
          "css": {
            "width": "100%"
          }
        }).keyup(function() {

          // filter shuttle when typing to text field
          var filterval = new RegExp("^" + $(this).val() + ".*", "i"),
            selectedValues = $select.eq(1).children("option").map(function() {
              return $(this).val();
            });

          // empty shuttle available values
          $select.eq(0).empty();
          // add values that match filter criteria
          $.each(shuttleValues, function(idx, obj) {
            if (
              obj.text.match(filterval) &&
              $.inArray(obj.value, selectedValues) < 0
            ) {
              $select.eq(0).append(new Option(obj.text, obj.value));
            }
          });
        });

      // add needed elements to page
      $self.prepend(
        $("<div/>", {
          "class": "t-Form-itemWrapper"
        })
        .append($filter).append(
          $("<span/>", {
            "class": "t-Form-itemText t-Form-itemText--post"
          }).append($resetBtn)
        )

      ).on("apexafterrefresh", function() {
        // initiliaze filter when shuttle is refreshed by parent item
        $filter.val("");
        shuttleValues = getShuttleValues($select);
      });

      // clear also filter from shuttle reset button
      $("#" + shuttleResetBtnId).click(function() {
        $filter.val("");
      });
    });
  }
})(apex.jQuery);

If you like add filter to all shuttles in page, then add to page JavaScript Execute when Page Loads:

$(".apex-item-group--shuttle").htmldbShuttlefilter();

Depending on your need, change jQuery selector.

See working example where Dept shuttle is parent for Emp.

You can configure automatically start and stop Oracle XE 18c database on operating system startup and shutdown. See details from installation guide. I did install XE 18c on CentOs 7 and executed steps mentioned in installation guide. When viewing database alert.log after system reboot, noticed that database wasn't actually stopped properly. Processes were just killed. I didn't investigate more why that happens on my system. For workaround I did revert steps mentioned in installation guide and created service file for systemd.

First stop XE database and revert automatically start and stop:

systemctl stop oracle-xe-18c
systemctl disable oracle-xe-18c

Create service file:

cat >> /usr/lib/systemd/system/ora-xe-18c.service << EOF
[Unit]
Description=Oracle 18c XE databases service
After=syslog.target network.target

[Service]
Type=forking
Restart=no
KillMode=none
TimeoutStopSec=10min
RemainAfterExit=yes
User=oracle
Group=oinstall
ExecStart=/opt/oracle/product/18c/dbhomeXE/bin/dbstart /opt/oracle/product/18c/dbhomeXE &
ExecStop=/opt/oracle/product/18c/dbhomeXE/bin/dbshut /opt/oracle/product/18c/dbhomeXE

[Install]
WantedBy=multi-user.target
EOF

Backup and modify /etc/oratab:

cp /etc/oratab /etc/oratab.backup_`date +%Y%m%d`
sed -i 's/XE:\/opt\/oracle\/product\/18c\/dbhomeXE:N/XE:\/opt\/oracle\/product\/18c\/dbhomeXE:Y/g' /etc/oratab

Enable new service and start XE database again:

systemctl daemon-reload
systemctl enable ora-xe-18c
systemctl start ora-xe-18c

The APEX installation includes static files that are located on the web server. These files may changed normally only when you upgrade or apply patch to APEX. Because files are changing rarely, they are good subject stored to cache. If you use Apache HTTPD to serve static files, you can configure mod_file_cache for ones that are used most in your applications.

You might have also other static content e.g. images, JavaScript and CSS files that are stored to APEX workspace or application static files. Also these files aren't usually changed often and you can store files to cache and reduce calls to database. This can be done using HTTPD modules mod_cache and mod_cache_disk.

I provide here only basic information that you are aware about these HTTPD cache features and how those may used with APEX. Assumption is that you have knowledge how configure HTTPD. You need test and see how these works on your system.

First check are needed modules loaded to HTTPD. In Linux machine you can use command httpd -M to list all modules that are loaded.
You should look cache_module, cache_disk_module and file_cache_module.

Create configuration file called e.g. apex_file_cache.conf to specify the APEX static files you like cache. Here is example configuration file content for APEX 5.1.4 when applications use Universal Theme and styles Vita:

# APEX 5.1.4 mod_file_cache configuration for Universal Theme style Vita
<IfModule file_cache_module>
  # CSS
  CacheFile /apex/images/app_ui/css/Core.min.css
  CacheFile /apex/images/app_ui/css/Theme-Standard.min.css
  CacheFile /apex/images/libraries/jquery-ui/1.10.4/themes/base/jquery-ui.min.css
  CacheFile /apex/images/libraries/font-apex/1.0/css/font-apex.min.css
  CacheFile /apex/images/themes/theme_42/1.1/css/Core.min.css
  CacheFile /apex/images/themes/theme_42/1.1/css/Vita.min.css
  # JavaScript
  CacheFile /apex/images/libraries/apex/minified/desktop.min.js
  CacheFile /apex/images/libraries/hammer/2.0.4/hammer-2.0.4.min.js
  CacheFile /apex/images/libraries/apex/minified/widget.apexTabs.min.js
  CacheFile /apex/images/libraries/apex/minified/widget.stickyWidget.min.js
  CacheFile /apex/images/libraries/apex/minified/widget.stickyTableHeader.min.js
  CacheFile /apex/images/themes/theme_42/1.1/js/modernizr-custom.min.js
  CacheFile /apex/images/themes/theme_42/1.1/js/theme42.min.js
</IfModule>

In example I use CacheFile directive but you should test does your platform support it or do you get better result with MMapFile directive. Check also path where the files are located in server. Include configuration file to your httpd.conf file, run test for configuration and restart HTTPD.

NOTE! when you upgrade or patch APEX, you need check are same files still relevant for cache and do changes accordingly to the configuration file. Also you need restart HTTPD to avoid end up serving requests that are completely bogus as mod_file_cache documentation says.
You shouldn't try cache all APEX +12 000 static files, that installation contains, with mod_file_cache. Most probably your applications isn't using those all even in special cases. You need carefully select only most used files.

To configure cache for APEX workspace and application static files create configuration file called e.g. apex_cache_disk.conf. Here is example configuration for workspaces ws1, ws2, ws3 and ws4:

# APEX 5.1.4 mod_cache configuration for static workspace and application files
<IfModule cache_disk_module>
  CacheRoot      /var/cache/httpd/proxy
  CacheEnable    disk /apex/ws1/r/
  CacheEnable    disk /apex/ws2/r/
  CacheEnable    disk /apex/ws3/r/
  CacheEnable    disk /apex/ws4/r/
  CacheLock      on
</IfModule>

You need check what are URL's in your system relating to APEX workspace and application static files and adjust configuration accordingly. Include configuration file to your httpd.conf file, run test for configuration and restart HTTPD.

Optionally you can also add CacheIgnoreCacheControl directive that clients can't force refresh cache in HTTPD. Then it is recommended where you refer static file add query string to end. That way developers can force HTTPD fetch new file when files are changed. You can use e.g. APP_VERSION substitution string like:

#APP_IMAGES#style#MIN#.css?v=#APP_VERSION#

If you change file in workspace or application static files, change also version attribute in application definitions so HTTPD knows reload file.
After enabling mod_cache, you should also see and setup htcachecleanup.

Depending if you aren't using RESTful services from APEX workspaces, after configuring mod_cache for workspace and application files, you might like check and change ORDS configuration for APEX_REST_PUBLIC_USER and APEX_LISTENER users pool. See if you can lower those pools jdbc.MinLimit so there aren't connections waiting for nothing while HTTPD serves workspace and application static files from cache.

In APEX there is build in date formats SINCE and SINCE_SHORT that I use often in report date columns. Unfortunately you can't use SINCE format in application Globalization Attributes, so you need separately set it to columns. But, sometimes you need to see the actual date value in column.

Here is simple example how you can switch between application global date format and SINCE.

First create application item G_DATE_DISPLAY_FORMAT.

Create two entries to Navigation Bar list as follows.
First list entry:

• List Entry Label: Show Since
• Target page: &APP_PAGE_ID.
• Request: SET_DATE_FORMAT_SINCE_ON
• Condition: Value of User Preference in Expression 1 != Expression 2
  • Expression 1: U_DATE_DISPLAY_FORMAT
  • Expression 2: SINCE

Second list entry is almost same. Just change label, request and condition

• List Entry Label: Show Date
• Target page: &APP_PAGE_ID.
• Request: SET_DATE_FORMAT_SINCE_OFF
• Condition: Value of User Preference in Expression 1 = Expression 2
  • Expression 1: U_DATE_DISPLAY_FORMAT
  • Expression 2: SINCE

Create On Load: Before Header application process.
PL/SQL Code:

declare
  l_since varchar2(40);
begin

  l_since := 
    case when :REQUEST = 'SET_DATE_FORMAT_SINCE_ON'
    then 'SINCE'
    end
  ;
  :G_DATE_DISPLAY_FORMAT  := l_since;

  /* save user selection to preference */
  apex_util.set_preference(
     p_preference => 'U_DATE_DISPLAY_FORMAT'
    ,p_value      => l_since
    ,p_user       => :APP_USER
  );

end;

Set process conditionally by request containing SET_DATE_FORMAT_SINCE_ON and SET_DATE_FORMAT_SINCE_OFF

Application process stores information also to preference. If you like you can set application item value for new sessions in Post-Authentication Procedure.

Place code to authentication schema source PL/SQL Code and Enter to Post-Authentication Procedure Name field set_date_display_format

procedure set_date_display_format
as
begin
  :G_DATE_DISPLAY_FORMAT := apex_util.get_preference(
     p_preference => 'U_DATE_DISPLAY_FORMAT'
    ,p_user => :APP_USER
  );
end;

Then edit report columns and set format mask to application item substitution string &G_DATE_DISPLAY_FORMAT.

Here you can see example where right top there is link to switch date format mask. When you click the link in navigation bar, you can see report Hired on column format changes.

I'm finalist for Oracle Database Developer Choice Awards in Oracle Application Express (APEX) category.
I'm very impressed and surprised for this honor. I want thank all who have filled nomination form and voted. Special thanks to all who have also leave comments and supported me by blog posts and spreading word other ways.
If you haven't vote yet, now it's time. Voting ends at 15th of October. Please remember you can vote multiple persons in all categories. I hope Denes Kubicek's blog post encourage everybody to vote.

If your web server use self signed certificate for https you most probably get "peer not authenticated" error when you try administrate Oracle REST Data Service (ORDS) using Oracle SQL Developer.

To resolve this issue, you need import server certificate to Java cacerts keystore.

You can download server certificate e.g. using browser. In this example I use Firefox.

First navigate to your server URL and click lock icon next to URL. From popup click More Information.

From opening window click View Certificate

Click Details tab and then Export button

Change the ‘Save as type’ to ‘X.509 Certificate with chain (PEM)’ and save the certificates to a file.

Open command prompt and import certificate to Java cacert keystore. Please note that you need import certificate to Java installation/version witch SQL Developer uses.

Here is example of command how import certificate in Windows

C:\sqldeveloper\jdk\jre\bin\keytool.exe -import -noprompt -trustcacerts ^
-alias vbox-apex.localdomain ^
-file C:\Temp\vbox-apex.localdomain.crt ^
-keystore C:\sqldeveloper\jdk\jre\lib\security\cacerts ^
-storepass changeit

Now administrating Oracle REST Data Service using Oracle SQL Developer over https works.

You can download application from SourceForge. If you have comments or enhancement ideas please submit those to project page Tickets or Discussion.

Here is how create interactive report with the functionality to show a detail row per each row on APEX 4.2.

Below you can see interactive report query I did use for this example:

SELECT p.product_id
,p.product_name
,p.category
,p.product_avail
,p.list_price
,(
  SELECT sum(quantity)
  FROM demo_order_items
  WHERE product_id = p.product_id
  ) AS units
,(
  SELECT sum(quantity * p.list_price)
  FROM demo_order_items
  WHERE product_id = p.product_id
  ) AS sales
,(
  SELECT count(o.customer_id)
  FROM demo_orders o
   ,demo_order_items t
  WHERE o.order_id = t.order_id
   AND t.product_id = p.product_id
  GROUP BY p.product_id
  ) AS customers
,(
  SELECT max(o.order_timestamp) od
  FROM demo_orders o
   ,demo_order_items i
  WHERE o.order_id = i.order_id
   AND i.product_id = p.product_id
  ) AS last_date_sold
,(
  SELECT APEX_LANG.LANG('Details')
  FROM DUAL
  ) AS details
FROM demo_product_info p

Edit DETAILS column attributes and make column as link

• Link Text : #DETAILS#
• Link Attributes : class="product-details" data-product="#PRODUCT_ID#"
• Target : URL
• URL : #

Add to page JavaScript File URLs

#IMAGE_PREFIX#libraries/jquery-ui/1.8.22/ui/minified/jquery.ui.button.min.js

and to Function and Global Variable Declaration

var gDetailCache = new Object();
(function($){
 $.fn.htmldbDetailRow=function(options){
  options=$.extend({},{
   "trIdPrefix":"D",
   "btnShowClass":"ui-icon-plusthick",
   "btnHideClass":"ui-icon-minusthick",
   "btnAjaxClass":"ui-icon-refresh"
  },options);
  this.each(function(){
   var $Self  = $(this).removeAttr("href").button({icons:{primary:options.btnShowClass},text:false}),
       $Row   = $Self.closest("tr"),
       $Ico   = $Self.children("span.ui-button-icon-primary"),
       lC     = $Row.children("td").length,
       lId    = $Self.data(options.btnData),
       lTrId  = options.trIdPrefix+lId,
       lClass = options.btnShowClass + " " + options.btnHideClass
   ;
   $Self.click(function(){
    $Tr=$($x(lTrId));
    if($Tr.length===0){
     $Self.button("option",{icons:{primary:options.btnAjaxClass},"disabled":true});
     apex.server.process(options.onDemanProcess,
      {x01:lId},{dataType:"text",success:function(d){
       var $Tr=$(
        '<tr id="' + lTrId + '">' +
        '<td class="' + options.tdClass + '" colspan="' + lC + '">'
        + d +
        '</td>' +
        '</tr>'
       ),lA=new Object();
       lA[lTrId]={d:$Tr,s:true};
       $.extend(gDetailCache,lA);
       $Row.after($Tr);
       $Ico=$Self.button("option",{icons:{primary:options.btnHideClass},"disabled":false})
       .children("span.ui-button-icon-primary");
      }
     });
    }else{
     $Tr.toggle(0,function(){
      $Ico.toggleClass(lClass);
      gDetailCache[lTrId].s=!gDetailCache[lTrId].s
     })
    }
   });
   if(lTrId in gDetailCache){
    gDetailCache[lTrId].d.children().attr({"colspan":lC});
    $Row.after(gDetailCache[lTrId].d);
    if(gDetailCache[lTrId].s){
     $Ico.toggleClass(lClass)
    }else{
     gDetailCache[lTrId].d.hide()
    }
   }
  })
  return this
 }
})(apex.jQuery);

Add to page CSS Inline

.prodinfo{
 padding:6px!important;
 font-size:12pt!important;
 color:#660000!important;
 font-weight:bold!important;
 text-align:center!important;
}

Create on demand process GET_PRODUCT_INFO

DECLARE
  l_info VARCHAR2(32000);
BEGIN
  SELECT product_description
  INTO l_info
  FROM demo_product_info
  WHERE product_id = apex_application.g_x01; 
  HTP.PRN(l_info);
EXCEPTION
  WHEN NO_DATA_FOUND THEN
    HTP.PRN('No additional information');
  WHEN OTHERS THEN
    HTP.PRN(sqlerrm);
END;

Create dynamic action

• Name: IR detail row
• Event: After Refresh
• Selection Type: Region
• Region: {select IR region}
• Condition: -No Condition-
• Action: Execute JavaScript code
• Fire On Page Load: True

• Code:

  $(this.triggeringElement)
  .find('a.product-details')
  .htmldbDetailRow({
   onDemanProcess:"GET_PRODUCT_INFO", // on demand process name
   tdClass:"prodinfo",                // details class
   btnData:"product"                  // button data name
  });
  

• Selection Type: None

Now when you run page you have button on each row to expand/collapse row details.

Please note that when you e.g. paginate to next page and back, example remember rows that were expanded =).
See working example.

(function($){
$.fn.htmldbShuttlefilter=function(options){
  options=$.extend({},{"label":"Filter"},options);
  return this.each(function(i){
   var $self      = $(this)
   ,filterId      = $self.attr("id") + "_FILTER"
   ,$select       = $self.find("select")
   ,shuttleValues = $select.children("option").map(function(){
    return {text:$(this).text(),value:$(this).val(),option:this}
   })
   ,$filter = $("<input/>",{"type":"text","value":"","size":"255","autocomplete":"off","id":filterId})
   .keyup(function(){
    var filterval   = new RegExp("^"+$(this).val()+".*","i")
    ,selectedValues = $select.eq(1).children("option").map(function(){
     return $(this).val();
    });
    $select.eq(0).empty();
    $.each(shuttleValues,function(idx,obj){
     if(obj["text"].match(filterval) && $.inArray(obj["value"],selectedValues)<0){
      $select.eq(0).append(obj["option"]);
     }
    });
   })
   .width($self.width());
   $("<div/>",{"css":{"padding-bottom":"5px"}})
   .insertBefore($self)
   .append(
    $("<label/>",{"for":filterId})
    .append($("<span/>",{"css":{"font-weight":"bold"}}).text(options.label))
   )
   .append("<br/>").append($filter);
   $self.find("img[alt='Reset']").click(function(){$filter.val("")});
  });
}
})(jQuery);

Then add to page JavaScript Execute when Page Loads

$("#Px_SHUTTLE_ITEM_NAME").htmldbShuttlefilter({});

Replace Px_SHUTTLE_ITEM_NAME with your real shuttle item name.

See working example.

While back I did write blog post Yet another way to create "editable interactive report". This post is part 2, where I explain how you can add select lists and text area to report. In example I have use APEX_COLLECTION, but you can modify code to work with real table.

First create Before Regions PL/SQL process that creates apex_collection:

APEX_COLLECTION.CREATE_COLLECTION_FROM_QUERYB2 (
      p_collection_name => 'EMP',
      p_query => '
        SELECT e1.empno
          , e1.sal
          , COALESCE(e1.comm, 0) AS comm
          , e1.mgr
          , e1.deptno
          , e1.hiredate
          , NULL
          , NULL
          , NULL
          , NULL
          , e1.ename
          , e1.job
       FROM emp e1
      '
    );
    

Then go to Shared Components > Lists of Values and create new LOV:

• From Scratch
• name: MANAGER
• type: Dynamic
• Query:

select ename d, empno r
    from   emp
    order by 1

Create another new LOV:

• From Scratch
• name: DEPARTMENT
• type: Dynamic
• Query:

select dname d, deptno r
    from   dept
    order by 1

Go back to edit page and create interactive report from query:

SELECT seq_id
      ,n001    AS empno
      ,c001    AS ename
      ,c002    AS job
      ,n004    AS mgr
      ,d001    AS hiredate
      ,n002    AS sal
      ,n003    AS comm
      ,n005    AS dname
      ,clob001 AS enotes
      ,n004    AS mgrno
      ,n005    AS deptno
    FROM apex_collections
    WHERE collection_name = 'EMP'

Change ENOTES column Display as to standard report column, MGRNO and DEPTNO columns to hidden.

Edit ENOTES column attributes and add to column formatting:

<textarea class="ir-edit-input" id="CLOB-#SEQ_ID#-1" cols="30" rows="3">#ENOTES#</textarea>

You can control text are width and height using attributes cols and rows.

Edit MGR column attributes and change Display Type to Display as Text (based on LOV, escape special characters).
Set Named List of Values to MANAGER

Set column formatting

<select class="ir-edit-input" data-lov="MANAGER" data-display-null="- Select -" data-last-value="#MGRNO#" id="N-#SEQ_ID#-4"></select>

Attribute data-lov defines shared components LOV name used for column select list.
Include attribute data-display-null if LOV should have null value. This attribute value is used as null display value.

From report query you can see that apex_collection columns n004 and n005 are defined two times with different alias. We did set columns with alias MGRNO and DETPNO as hidden column. Attribute data-last-value value should be set to that hidden column substitution string because we like have real column value to this attribute. If we use column substitution string value from column where Display Type was set to Display as Text (based on LOV, escape special characters), then attribute gets LOV display value. And select list do not work correctly in that case.

Edit DNAME column attributes and change Display Type to Display as Text (based on LOV, escape special characters).
Set Named List of Values to DEPARTMENT

Set column formatting

<select class="ir-edit-input" data-lov="DEPARTMENT" data-last-value="#DEPTNO#" id="N-#SEQ_ID#-5"></select>

Setup for other columns see previous blog post.

Create After Footer PL/SQL process:

DECLARE
      cur  SYS_REFCURSOR;
      lov_d VARCHAR2(4000);
      lov_r VARCHAR2(4000);
      l_cnt PLS_INTEGER;
    BEGIN
      htp.prn('<script type="text/javascript">');
      FOR c1 IN (
        SELECT list_of_values_query
         ,list_of_values_name
        FROM apex_application_lovs
        WHERE application_id = :APP_ID
        AND list_of_values_name IN('MANAGER', 'DEPARTMENT')
      ) LOOP
        l_cnt := 0;
        OPEN cur FOR c1.list_of_values_query;
        LOOP
        FETCH cur INTO lov_d, lov_r;
        EXIT WHEN cur%NOTFOUND;
          l_cnt := cur%ROWCOUNT;
          IF l_cnt = 1 THEN
            htp.prn('var ' || c1.list_of_values_name || ' = [{');
          ELSE
            htp.prn(',{');
          END IF;
          htp.prn('"D":"' || lov_d || '","R":"' || lov_r || '"}');
        END LOOP;
        CLOSE cur;
        IF l_cnt = 0 THEN
          htp.p('var ' || c1.list_of_values_name || ' = [];');
        ELSE
          htp.p('];');
        END IF;
      END LOOP;
      htp.prn('</script>');
    END;

This process will print LOV values as JSON objects.

We need JavaScript function that creates select list options from JSON objects.
Add to page JavaScript Function and Global Variable Declaration:

(function($){
     $.fn.htmldbCreateSelect = function(){
      this.filter("select").empty().each(function(i){
       lSelf = $(this);
       lov = eval(lSelf.data("lov"));
       if(lSelf.data("display-null")){
        lSelf.append($("<option/>",{"value":"","text":lSelf.data("display-null")}));
       }
       $.each(lov,function(i,d){
        lSelf.append($("<option/>",{"value":d["R"],"text":d["D"]}));
       });
       lSelf.val(lSelf.data("last-value"));
      });
      return this;
     }
    })(apex.jQuery);

Next create dynamic action

• Name: Edit IR
• Event: After Refresh
• Selection Type: Region
• Region: {select IR region}
• Condition: -No Condition-
• Action: Execute JavaScript code
• Fire On Page Load: True
• Selection Type: None
• Code:

$(this.triggeringElement)
    .find("td .ir-edit-input")
    .change({region:this.triggeringElement},function(e){
     var $lThis=$(this), $lRegion=$(e.data.region);
     apex.server.process("SAVE_DATA",{
      x01:this.id,
      f01:$s_Split(this.value, 4000)
     },{
      dataType:"html",
      beforeSend:function(){
       $lThis.prop("disabled", true).parent("td").addClass("ui-autocomplete-loading");
      },
      success:function(pData){
       if(pData!=="OK"){
        alert(pData);
        $lThis.val($lThis.data("last-value")).prop("disabled", false).parent("td").removeClass("ui-autocomplete-loading");
        return false;
       }
       /* Refresh IR after value is saved */
       $lRegion.trigger("apexrefresh");
      }
     });
    })
    .htmldbCreateSelect()
    .filter("[id^=D]")
    .datepicker({
     dateFormat:"dd.mm.yy",
     constrainInput:true,
     changeMonth:true,
     changeYear:true,
     showButtonPanel:true,
     showOn:"both",
     buttonImageOnly:true,
     buttonImage:"#IMAGE_PREFIX#asfdcldr.gif",
     showAnim:"slideDown"
    });
    

Then create On Demand process called SAVE_DATA

DECLARE
      l_val      VARCHAR2(32700);
      l_len      PLS_INTEGER := 0;
      l_data     CLOB;
      l_date_val DATE;
      l_num_val  NUMBER;
      l_arr      APEX_APPLICATION_GLOBAL.VC_ARR2;
    BEGIN
      l_len := APEX_APPLICATION.G_f01.COUNT;
     
      IF l_len > 0 THEN
        l_val := APEX_APPLICATION.G_f01(1);
      END IF;
      l_arr := APEX_UTIL.STRING_TO_TABLE(APEX_APPLICATION.G_X01, '-');
      IF l_arr(1) = 'C' THEN
        APEX_COLLECTION.UPDATE_MEMBER_ATTRIBUTE (
          p_collection_name => 'EMP',
          p_seq             => l_arr(2),
          p_attr_number     => l_arr(3),
          p_attr_value      => l_val
        );
      ELSIF l_arr(1) = 'N' THEN
        BEGIN
          l_num_val := TO_NUMBER(l_val);
        EXCEPTION WHEN VALUE_ERROR
        THEN
          HTP.PRN(q'[Couldn't save value. Please check that value is valid number.]');
          RETURN;
        END;
        APEX_COLLECTION.UPDATE_MEMBER_ATTRIBUTE (
          p_collection_name => 'EMP',
          p_seq             => l_arr(2),
          p_attr_number     => l_arr(3),
          p_number_value    => l_num_val
        );
      ELSIF l_arr(1) = 'D' THEN
        BEGIN
          l_date_val := TO_DATE(l_val, 'DD.MM.YYYY');
        EXCEPTION WHEN OTHERS
        THEN
          HTP.PRN(q'[Couldn't save value. Please check that value is valid date.]');
          RETURN;
        END;
        APEX_COLLECTION.UPDATE_MEMBER_ATTRIBUTE (
          p_collection_name => 'EMP',
          p_seq             => l_arr(2),
          p_attr_number     => l_arr(3),
          p_date_value      => l_date_val
        );
      ELSIF l_arr(1) = 'CLOB' THEN
       
        IF l_len = 0
        OR COALESCE(LENGTH(APEX_APPLICATION.G_f01(1)), 0) = 0
        THEN
          APEX_COLLECTION.UPDATE_MEMBER_ATTRIBUTE (
            p_collection_name => 'EMP',
            p_seq             => l_arr(2),
            p_clob_number     => 1,
            p_clob_value      => NULL
          );
        ELSE
         
          dbms_lob.createtemporary(
            lob_loc => l_data,
            cache   => TRUE,
            dur     => dbms_lob.session
          );
          dbms_lob.open(l_data, dbms_lob.lob_readwrite);
       
          FOR i IN 1 .. l_len
          LOOP
            dbms_lob.writeappend(
              lob_loc => l_data,
              amount  => LENGTH(APEX_APPLICATION.G_f01(i)),
              buffer  => APEX_APPLICATION.G_f01(i)
            );
          END LOOP;
          dbms_lob.close(l_data);
          APEX_COLLECTION.UPDATE_MEMBER_ATTRIBUTE (
            p_collection_name => 'EMP',
            p_seq             => l_arr(2),
            p_clob_number     => 1,
            p_clob_value      => l_data
          );
        END IF;
      END IF;
     
      HTP.PRN('OK');
    END;

And for last add to page CSS inline:

.ui-autocomplete-loading {
     background: url("#IMAGE_PREFIX#libraries/jquery-ui/1.8/themes/base/images/ui-anim_basic_16x16.gif") no-repeat scroll 98% 10% #EFEFEF !important;
    }
    .apexir_WORKSHEET_DATA td {
     padding-right: 22px !important;
     white-space: nowrap;
     vertical-align: top;
    }
    .apexir_WORKSHEET_DATA .ir-edit-input {
     color: inherit;
     text-align: inherit;
    }

Now when you run page, you should have "editable IR" where is select list for manager and department, and text area for notes.

See working example.

Sample is also available for download.