Oracle APEX offers powerful options to enrich the user experience, and JavaScript plays a key role in extending what is available out of the box. One practical enhancement is adding customised tooltips to Interactive Grid columns, helping users understand data context without cluttering the screen.
In this blog, we explore a JavaScript-based approach to dynamically generate tooltips in an Interactive Grid. The solution demonstrates how tooltips can be driven by column attributes and row-level metadata, allowing messages to change intelligently based on the data being displayed.
By the end of this article, you will understand how to:
Identify target columns within an Interactive Grid
Access row metadata at runtime
Define meaningful, data-driven tooltip content using JavaScript
This approach improves usability while keeping the interface clean and intuitive, especially in data-heavy APEX applications.
The JavaScript Code Explained
The provided JavaScript function modifies the Interactive Grid’s configuration object to introduce dynamic tooltips for specific columns. Below is a breakdown of the key features:
Disabling Initial Selection
config.initialSelection = false;
This ensures that no rows are preselected when the grid is initially loaded.
Preventing Copying of Grid Content
config.defaultGridViewOptions = {
allowCopy: false,
};
By setting allowCopy to false, the function disables the ability to copy grid content directly. This can be particularly useful in scenarios where sensitive information is displayed, such as confidential business data or regulatory compliance contexts, where unauthorized copying could lead to breaches or misuse of information.
Dynamic Tooltip Configuration The tooltip property is customized to display meaningful information based on the row and column context:
tooltip: {
content: function(callback, model, recordMeta, colMeta, columnDef) {
var text = null;
if (recordMeta && $(this).hasClass(“a-GV-rowHeader”)) {
if (recordMeta.updated) {
text = “This record has been changed”;
}
} else {
if (columnDef && recordMeta) {
if (columnDef.property === “EMPNO”) {
text = model.getValue(recordMeta.record, “EMPNO”);
} else if (columnDef.property === “ENAME”) {
text = model.getValue(recordMeta.record, “ENAME”);
}
}
}
return text;
}
}
Key Points:
Row-Level Tooltip: If the user hovers over a row header, the tooltip indicates whether the record has been updated.
Column-Specific Tooltip: For specific columns (EMPNO and ENAME), the tooltip dynamically displays the respective cell value.
Returning the Modified Configuration Finally, the function returns the modified configuration object to ensure the grid applies these settings:return config;
Use Cases for This Customization
Highlighting Changes: The tooltip alerts users when a record has been modified, ensuring they quickly notice updates.
Enhanced Data Context: Column-specific tooltips provide additional details without cluttering the grid layout.
Improved User Experience: By dynamically adjusting tooltips, users can access relevant information seamlessly.
How to Implement This in Oracle APEX
To integrate this configuration into your Oracle APEX application:
Navigate to the Attributes section of your Interactive Grid.
In the Advanced settings, locate the JavaScript Initialization Code section.
Paste the provided function code into the editor.
Important: must use callback in 24.2
function(config) {
config.initialSelection = false;
config.defaultGridViewOptions = {
tooltip: {
content: function(callback, model, recordMeta, colMeta, columnDef) {
let text = null;
if (columnDef && recordMeta) {
if (columnDef.property === “EMPNO”) {
text = model.getValue(recordMeta.record, “EMPNO”);
} else if (columnDef.property === “ENAME”) {
text = model.getValue(recordMeta.record, “ENAME”);
}
}
// Important: must use callback in 24.2
callback(text);
}
}
};
return config;
}
The post Customise Column Tooltips in Oracle APEX Interactive Grids Using JavaScript appeared first on Ontoor blogs.
