Customization is at the heart of APEX development, and understanding how to customize various components can make your applications more dynamic and user-friendly. In this post, I’ll share some customizations for Interactive Grids that I’ve gathered over the years to enhance usability and readability for end users.
Substitution Strings for Formatting
This section ties directly into Part I of this series. As I mentioned earlier, it’s best to avoid using one-time masks for numbers, dates, etc. Instead, you should centralize all your formats using substitution strings. This approach ensures consistency and makes future updates easier by centralizing the formatting logic in one place.
A good practice is to avoid formatting data directly in your SQL queries. Instead, leverage APEX's format masks to maintain filtering and aggregation functionality for numerical and date columns.
Use this:
Instead of this:
Alternative Labels
This simple trick applies to both Interactive Grids and Reports. Often, when you add HTML to a column header, it may display as raw text in dialogs (like the ones used for filters, column selection, or aggregations) because the HTML is not rendered in these dialogs.
You can easily avoid this by using the "Alternative Label" field for the column.
By doing so, you ensure that your header displays properly while keeping dialogs user-friendly and free of HTML tags. It’s a minor adjustment that enhances user experience.
Custom Column Content
Customizing the content of columns in your Interactive Grid or report allows you to present more detailed or user-friendly information. For example, instead of just displaying "M" or "F" for a simple gender column, you can enhance it with icons and meaningful text.
To achieve this, you need to utilize template directives, JavaScript Interactive Grid customization, and substitution strings.
- Template Directives
Template directives allow you to add logic within your HTML. For example, to handle conditional formatting, you can use theCASEdirective like this:
{case ITEM/}
{when VALUE/}
...
{when VALUE/}
...
{otherwise/}
...
{endcase/}
You can check out more information on template directives by visiting APEX documentation. -
Substitution Strings
Substitution strings let you reference page items or columns inside your HTML. In template directives, you can refer to Interactive Grid columns, Report Columns, or items using their name; in HTML, you can refer to your items or grid columns like this &ITEM. or for Interactive Reports like this#COLUMN#. -
Customizing IG Column Content
You can customize how an Interactive Grid (IG) column displays information by using the Column Initialization JavaScript Function. From here, you can customize your column as much as you want; we will focus on customizing the content with this code:function (options) {
options.defaultGridColumnOptions = {
cellTemplate:
`
[YOUR_HTML_CODE]
`
};
return options;
}
This allows you to insert any HTML wanted in the column cell content.
So finally, we will combine these customizations to change the content of the column from the boring database text “M” or “F” to a nice, formatted text and icon. In the column initialization Javascript function, you will use this code:
function (options) {
options.defaultGridColumnOptions = {
cellTemplate:
`
{case GENDER/}
{when M/}
<span aria-hidden="true" class="fa fa-mars u-alignMiddle"></span>
<span class="u-alignMiddle">Male</span>
{when F/}
<span aria-hidden="true" class="fa fa-venus u-alignMiddle"></span>
<span class="u-alignMiddle">Female</span>
{endcase/}
`
};
return options;
}
This script checks whether the column "GENDER" contains "M" or "F" and adds the corresponding HTML, including icons. You can also use the {otherwise/} directive to add a default option when no value is specified. This approach allows for significant customization in how data is displayed, the sky is the limit.
You can apply similar customizations to reports. In reports, you can directly add HTML to the "HTML Expression" field in the "Column Formatting" section for the report column. Substitution strings and template directives work here as well.
That's it for Part II of the series. I hope these tips help you enhance the visual appeal, coherence, and usability of your reports and Interactive Grids as they did for me. In Part III, we'll explore more advanced customizations, such as generating dynamic HTML from PL/SQL functions, handling escape characters for substitution strings, and creating dynamic reports that can display or hide columns with different names.
SUBMIT YOUR COMMENT