Introduction:
In certain Oracle APEX applications, we may want to conditionally render links in an Interactive Grid (IG) column. For instance, if a user selects a specific subcategory, the Item Number column should be clickable (a link). Otherwise, it should appear as plain text. This requirement comes up when we want to restrict user navigation based on the selected criteria.
Why we need to do:
By default, column links in APEX Interactive Grid are static and do not change dynamically based on other inputs like dropdowns or page items. This results in a usability gap when business logic demands that a link be shown only under certain conditions.
For example, in our case:
- When the subcategory is ‘RAW MATERIAL’, the Item Number column should link to another page or modal.
- For all other subcategories, the link should be removed and the value displayed as plain text.
If we don’t handle this dynamically, users might click on irrelevant or unauthorized links, leading to confusion or improper navigation.
How do we solve: To solve this issue, we use JavaScript in the Page Load event to check the subcategory value and manipulate the DOM accordingly.
Step-by-step Approach:
- Create a Static ID for the IG Region:
- Go to your Interactive Grid region.
- Under the Advanced section, set a Static ID, e.g., report region.
This ID is used to target the region in JavaScript.
set a Static ID in Interactive grid
2. Create a Static ID for the Column (e.g., Item Number):
- Open the column settings in the IG.
- Set the Static ID (e.g., item_number_col) under the Advanced section.
- This helps uniquely identify the column you want to manipulate.
set a Static ID in Interactive grid column
3. Add the Following JavaScript in the Page Load:
(function(){
var subCat = $v(‘P506_ITEM_CATEGORY’); // Replace with actual page item name
if (subCat !== ‘RAW MATERIAL’) {
$(‘#report_region td[headers=”item_number_col”] a’).each(function() {
var txt = $(this).text();
$(this).replaceWith(txt); // Remove hyperlink, retain plain text
});
}
})();
4. Screenshots for Visual Understanding:
- When Subcategory is “RAW MATERIAL”:
- When Subcategory is anything else:
Conclusion:
This solution provides a simple yet effective way to dynamically control hyperlink visibility in an Oracle APEX Interactive Grid based on user selection. By using JavaScript and leveraging static IDs, we ensure clean UI behavior and prevent user navigation errors. This approach is generic and can be reused for similar dynamic requirements across various APEX pages.
