Hiding Default Toolbar Buttons in Oracle APEX Interactive Grids

February 29, 2024Posted inAPEX, Interactive Grid, JavaScript

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”:






Copy Code
// 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");

Or 
// Report Attribute - Initialization JavaScript Function
function(o) {
    let toolbar = apex.jQuery.apex.interactiveGrid.copyDefaultToolbar();
    // Remove the edit button from the toolbar
    toolbar.toolbarRemove("edit"); 
      toolbar.toolbarRemove("save");
         toolbar.toolbarRemove("selection-add-row");
    // Update the toolbar data 
    o.toolbarData = toolbar;
    return o;
}







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





The above allows the edit action to still function. It is not possible to hide the edit action (for example apex.region(static_id).call(“getActions”).hide(“edit”); ) because the IG region automatically hides and shows the edit action itself so it will end up showing it again.





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. 




  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.
      • 

    

    3. 






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.
    • 






Copy Code
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.










	Tags: