Hiding Default Toolbar Buttons in Oracle APEX Interactive Grids

Oracle APEX Interactive Grids are highly flexible for managing data, but sometimes you need to customize the toolbar by hiding default buttons like “Edit,” “Save,” or “Add Row.” This can be useful to streamline the interface, improve security, or create a more guided workflow. In this article, we will show you how to achieve this customisation using JavaScript and dynamic actions in Oracle APEX.

Using JavaScript to Hide Toolbar Buttons

You can hide default toolbar buttons in Oracle APEX Interactive Grids by manipulating the action framework with JavaScript. Here is a simple example to hide “Edit,” “Save,” and “Add Row”:

// Hide the Edit button
apex.region("ontoor").call("getActions").hide("edit");

// Hide the Save button
apex.region("ontoor").call("getActions").hide("save");

// Hide the Add Row button
apex.region("ontoor").call("getActions").hide("selection-add-row");

Make sure "ontoor" matches the Static ID of your Interactive Grid. If it’s different, replace it with the correct Static ID.

Implementation Guide: Step-by-Step Instructions

Here’s how to implement the JavaScript code to hide toolbar buttons in Oracle APEX Interactive Grids:

Step 1: Assign a Static ID to the Interactive Grid

To reference your Interactive Grid in JavaScript, it needs a Static ID:

• Open Oracle APEX: Navigate to the page containing your Interactive Grid in the Application Builder.
• Assign a Static ID: In the “Attributes” section, assign a unique Static ID, like “ontoor.”

Step 2: Create a Dynamic Action to Execute JavaScript

To ensure the JavaScript code runs on page load, create a dynamic action:

1. Create a New Dynamic Action:
   • Go to the “Dynamic Actions” section in Oracle APEX and click “+” to create a new dynamic action.
   • Set the Event to “Page Load.”
   • Give the dynamic action a descriptive name, such as “Hide Toolbar Buttons.”
2. Add JavaScript to Hide Toolbar Buttons:
   • Click “+” to add an action.
   • Set the action type to “Execute JavaScript.”
   • Paste the JavaScript code snippets to hide the “Edit,” “Save,” and “Add Row” buttons.

Step 3: Test Your Changes

After creating the dynamic action and adding the JavaScript code, test the Interactive Grid to ensure the buttons are hidden and the grid functions as expected.

Troubleshooting Tips

If you’re having trouble hiding the toolbar buttons, consider these tips:

• Check the Static ID: Make sure the Static ID in your code matches the one assigned to the Interactive Grid.
• Examine for JavaScript Errors: Use the browser’s developer tools to check for JavaScript errors that might indicate syntax or reference issues.
• Ensure Proper Initialization: If the code runs too early, it may not hide the buttons. Consider adding a short delay with setTimeout or listening for specific events to ensure the grid is fully initialized.

setTimeout(function() {
  // Hide the Edit button
  apex.region("ontoor").call("getActions").hide("edit");

  // Hide the Save button
  apex.region("ontoor").call("getActions").hide("save");

  // Hide the Add Row button
  apex.region("ontoor").call("getActions").hide("selection-add-row");
}, 5000); // 5-second delay to ensure the grid has fully loaded

Conclusion

Hiding default toolbar buttons in Oracle APEX Interactive Grids can simplify the user interface, improve security, or guide users through a specific workflow. By following this guide, you can customize the Interactive Grid’s toolbar to meet your needs. If you encounter issues, refer to the troubleshooting tips to resolve common problems.