How to make any table header sticky

The Problem

If you're using Interactive Reports and Grids in your apps you may know that there's a property Fixed To that fixes the report's column headers to the top of the page or region so that the column headers remain visible as the user vertically scrolls the report. But there's no such option for Classic report regions or your custom HTML tables.

The Solution

You can easily do it by using two JS widgets that are build into APEX - Sticky Table Header and Sticky Widget.

How To 

To add it to the Classic report region you have to create After Refresh dynamic action that fires after refresh of your Classic report region:

and define true action that executes the following JavaScript code:

var vRegion$ = $(this.triggeringElement);
vRegion$.setTableHeadersAsFixed();
vRegion$.find('.js-stickyTableHeader').stickyWidget();

Dynamic action should look like this:

Remember to set property Fire on Initialization to Yes.

For the additional options you can check out the file libraries/apex/widget.stickyWidget.js in APEX installation folder or through page source view when you're running your application in debug mode.

For custom HTML tables you can use the same principle and if your custom HTML table is not rendering dynamically fire the JS code above only on page load.

The demo is avaliable here.

Tested on APEX 5.1.1.00.08

Enjoy!

Update on November 14,  2018.
Following example doesn't work in some versions of APEX (like 18.*). To fix it add a reference to the JS Widget in page property JavaScript File URLs or globally (theme or User Interface Attributes):

#IMAGE_PREFIX#libraries/apex/#MIN_DIRECTORY#widget.stickyTableHeader#MIN#.js?v=#APEX_VERSION#

Thanks for the fix goes to Alan Arentsen.

Auto format number items in APEX

One of the questions that I get constantly is how to make a number format masks live - to format number fields as you type or when you leave an item.

In APEX you can define a number format masks in property Format Mask of number fields:

But it's only affected on page load and after page submit for validating format. There's nothing that prevents end user to enter a string or a number in wrong format.

There's a great JS library for that - autoNumeric.js. So let's see how can you implement it in your apps.

1) Download autoNumeric.js from GitHub (this demo works with autoNumeric library version v2.0.13).

2) Unzip the file and upload autoNumeric.min.js (from dist folder) to your workspace (or application) files (Shared Components > Static Workspace/Application Files) or to your server file location.

3) Add reference to the file in your application. I usually do it under the Shared Components > User Interface Attributes > Desktop > JavaScript File URLs

Now you can use it in your APEX apps. To use it for all APEX number type items you can create onLoad dynamic action on the global page (in most apps this is page 0). Number type items have CSS class number_field so you can initialize AutoNumeric on it, for example:

To explicitly override defaults from the global page you can create onLoad dynamic action on the specific page (remember to put greater sequence id from the one on the page 0) and use the update method to change the default properties:

For other methods and properties see autoNumeric.js documentation.

You can see demo here.

Edit (Thanks to Jorge Rimblas): You don't have to hardcode group and decimal separators, you can get them with apex.locale.getGroupSeparator() and apex.locale.getDecimalSeparator().

Enjoy!

Tested on APEX 5.1.1.00.08