Introduction:-
In Oracle APEX (Application Express), adding dynamic tooltips to Interactive Grid (IG) headers enhances user experience by providing context-sensitive information directly within the grid. This approach leverages a lookup table for flexibility and customization, allowing tooltips to be dynamically displayed based on column headers. By offering users contextual hints and descriptions, this feature improves grid usability, making it easier to understand column contents and interact with the application more intuitively.
The following technologies has been used to achieve the same.
- PL/SQL
- Oracle APEX
- JavaScript
Why we need to do:-
Enhancing Oracle APEX Interactive Grids with Dynamic Tooltips Using JavaScript
In Oracle APEX (Application Express), implementing dynamic tooltips in Interactive Grid (IG) headers is essential for enhancing user experience by offering real-time, context-sensitive guidance. This approach helps users better understand the purpose and content of each column without requiring additional documentation or training. By leveraging a lookup table for customization, tooltips can be easily managed and updated, ensuring that the grid remains informative and user-friendly. This feature is particularly beneficial in complex applications where users need quick insights to interact efficiently with the data.
How do we solve:-
- Create a Lookup Table:
Create a table that links tooltip descriptions to the respective column headers or UI elements in your application. This table will act as a repository where each tooltip text is associated with a specific column or element identifier.
CREATE TABLE LOOKUPTABLE
(
LOOKUP_ID NUMBER PRIMARY KEY,
LOOKUP_DESC VARCHAR2(255),
LOOKUP_CODE VARCHAR2(100)
);
- LOOKUP_DESC: The description or tooltip text.
- LOOKUP_CODE: The code that links to column headers in the Interactive Grid
- Create a Lookup Table:
Create a form or manually insert data into the LOOKUPTABLE. Make sure that the values in the LOOKUP_CODE column correspond to the static IDs of the columns in your Interactive Grid (IG). For example, if a column in the IG has a static ID of ENAME, the LOOKUP_CODE for the tooltip should also be ENAME.
— Insert tooltip data into lookup_table
INSERT INTO lookup_table (lookup_id, lookup_desc, lookup_code) VALUES (1, ‘Employee Name’, ‘ENAME’);
INSERT INTO lookup_table (lookup_id, lookup_desc, lookup_code) VALUES (2, ‘Employee Manager’, ‘MGR’);
INSERT INTO lookup_table (lookup_id, lookup_desc, lookup_code) VALUES (3, ‘Hire Date’, ‘HIREDATE’);
— Add more entries as needed
- Create a shortcut in Function returning for Tooltip Data:
Create the below PL/SQL function as a shortcut to fetch tooltip data from the lookup table and return it in JSON format. JavaScript will use this JSON data to apply tooltips.
This function aggregates tooltip information into a JSON array, where each object includes the column identifier and description.
PL/SQL Function Code:
DECLARE
l_data CLOB; — Using CLOB for large JSON data
BEGIN
— Generate JSON array from lookup table
SELECT JSON_ARRAYAGG(
JSON_OBJECT(
‘TooltipID’ VALUE LOOKUP_CODE || ‘_HDR’,
‘TooltipDesc’ VALUE LOOKUP_DESC
)
) INTO l_data
FROM LookupTable
WHERE LOOKUP_CODE IS NOT NULL;
RETURN l_data; — Return JSON array of tooltips
END;
- Implement JavaScript for Dynamic Tooltips:
Integrate JavaScript on the function global variable declaration containing the Interactive Grid to apply tooltips dynamically based on the JSON data returned by the PL/SQL function.
JavaScript Code:
(function($){
$(function(){
var regionStaticId = “my_emp_id”; // Replace with your Interactive Grid’s static ID
setIgHeaderHelp(regionStaticId).on(“interactivegridviewchange interactivegridreportsettingschange”, function(event, ui) {
setIgHeaderHelp(this.id);
});
});
function setIgHeaderHelp(region){
var region$ = $($x(region));
// Fetch tooltip data using the defined shortcut
$.each(“IG_DYNAMIC_TOOLTIP”, function(i, tooltipData){
region$.find([$x(tooltipData.TooltipID)]).parent(“th”).attr(“title”, tooltipData.TooltipDesc);
});
return region$;
}
})(apex.jQuery);
Explanation of the JavaScript Code:
- Initialization: The script runs when the document is ready, ensuring the Interactive Grid is fully loaded.
- Applying Tooltips: The setIgHeaderHelp function updates the column headers with tooltip text based on the JSON data. It targets the correct headers using the IDs and sets their title attributes to display the tooltips.
- Dynamic Updates: The tooltips are re-applied when the grid view or settings change, maintaining up-to-date and relevant information.
- Event Handling: The setIgHeaderHelp function is called initially and then again whenever the Interactive Grid view or report settings change, ensuring tooltips are updated dynamically.
Tooltip Application: The setIgHeaderHelp function fetches the tooltip data and sets it on the column headers. It uses jQuery to find elements based on the static IDs and applies the title attribute with the corresponding tooltip description.
Conclusion :-
Implementing dynamic tooltips for Interactive Grid headers significantly enhances the usability and accessibility of the Oracle APEX application. This approach allows users to access relevant information directly within the grid interface by displaying contextual descriptions when hovering over column headers. It improves the user experience by making columns more intuitive and self-explanatory, reducing the need for external documentation. Additionally, this method provides easy updates and maintenance, as tooltip content can be modified through the database without altering application code. With tooltips stored in a central location, such as the `LOOKUPTABLE`, content management becomes streamlined, ensuring consistency across different areas of the application. Ultimately, dynamic tooltips improve user interaction with data and contribute to a more user-friendly application.
