Home » OrclApex » Oracle Apex Interactive Grid: Create Custom Add Edit Save and Delete Buttons

Oracle Apex Interactive Grid: Create Custom Add Edit Save and Delete Buttons

By

In this tutorial, you will learn how to create custom Add, Edit, Save, and Delete buttons for an Interactive Grid in Oracle Apex. And all these buttons will execute the JavaScript code to perform Add, Edit, Save, and Delete row functions. But now you may have a question, that why we should create custom buttons when we have the default buttons enabled for an Interactive Grid in Oracle Apex? And you are right, but in software development, you never know what kind of a requirement can come from the client for customization and then you have to create custom buttons to take more control over it. To perform this task, follow these steps:

Steps to Create Custom Add, Edit, Save and, Delete Buttons for an Interactive Grid in Oracle Apex

To demonstrate this example, I am using the following EMPLOYEES table for the interactive grid. You can create it in your schema to test this example:

CREATE TABLE  "EMPLOYEES" 
   (	"EMPLOYEE_ID" NUMBER(6,0), 
	"FIRST_NAME" VARCHAR2(20), 
	"LAST_NAME" VARCHAR2(25), 
	"EMAIL" VARCHAR2(25), 
	"PHONE_NUMBER" VARCHAR2(20), 
	"HIRE_DATE" DATE, 
	"JOB_ID" VARCHAR2(10), 
	"SALARY" NUMBER(8,2), 
	"COMMISSION_PCT" NUMBER(2,2), 
	"MANAGER_ID" NUMBER(6,0), 
	"DEPARTMENT_ID" NUMBER(4,0)
   )
/

1. Create an Interactive Grid in Oracle Apex Page

Create an Interactive grid based on the following query:

select ROWID,
       EMPLOYEE_ID,
       FIRST_NAME,
       LAST_NAME,
       EMAIL,
       PHONE_NUMBER,
       HIRE_DATE,
       JOB_ID,
       SALARY,
       COMMISSION_PCT,
       MANAGER_ID,
       DEPARTMENT_ID
  from EMPLOYEES

Then set the Static ID and Template for the Interactive Grid Region:

  • Advanced > Static ID: ig_emp
  • Appearance > Template: Standard

Then click on the Attributes node and set the following properties:

  • Edit Enabled: Yes (Put on the switch)
  • Toolbar: (Put off the switch)

2. Create an Add button for the Interactive Grid

Do the right-click on the interactive grid region and select the option Create Button and set the following properties:

  • Button Name: Add
  • Label: Add
  • Button Position: Copy

3. Create an Edit button for the Interactive Grid

Do the right-click on the region buttons and select the option Create Button and set the following properties:

  • Button Name: Edit
  • Label: Edit
  • Button Position: Copy

4. Create a Save button for the Interactive Grid

Do the right-click on the region buttons and select the option Create Button and set the following properties:

  • Button Name: Save
  • Label: Save
  • Button Position: Copy

5. Create a Delete button for the Interactive Grid

Do the right-click on the region buttons and select the option Create Button and set the following properties:

  • Button Name: Delete
  • Label: Delete
  • Button Position: Copy

We have created the buttons, now we will create the dynamic actions to execute the JavaScript code for each button function.

6. Create Dynamic Action for Add button (Created in the 2nd step)

Do the right-click on the Add button and select Create Dynamic Action option and set the following properties:

  • Action: Execute JavaScript Code
  • Code: Add the below JavaScript code into it:
apex.region( "ig_emp" ).widget().interactiveGrid( "getActions" ).invoke( "selection-add-row" );

Notice, that we have specified the interactive grid static id "ig_emp" in the above JavaScript code.

7. Create Dynamic Action for Edit Button (Created in the 3rd Step)

Do the right-click on the Edit button and select Create Dynamic Action option and set the following properties:

  • Action: Execute JavaScript Code
  • Code: Add the below JavaScript code into it:
apex.region( "ig_emp" ).widget().interactiveGrid( "getActions" ).set("edit", true);

Now when the user will click on the Edit button, the edit mode will be enabled for the interactive grid.

8. Create Dynamic Action for Save Button (Created in the 4th Step)

Do the right-click on the Save button and select Create Dynamic Action option and set the following properties:

  • Action: Execute JavaScript Code
  • Code: Add the below JavaScript code into it:
apex.region( "ig_emp" ).widget().interactiveGrid( "getActions" ).invoke( "save" );

9. Create Dynamic Action for Delete Button (Created in the 5th Step)

Do the right-click on the Delete button and select Create Dynamic Action option and set the following properties:

  • Action: Execute JavaScript Code
  • Code: Add the below JavaScript code into it:
apex.region( "ig_emp" ).widget().interactiveGrid( "getActions" ).invoke( "selection-delete" );

Now save the changes and run the page, all the buttons should work properly for the interactive grid.

To enhance functionality more, you can hide the Save button initially and only show when the Add, Edit, or Delete button is clicked. To do this, follow these steps:

10. Create Dynamic Action on Page Load to Hide the Save Button

Click on the Dynamic Actions tab, then do the right-click on the Page Load node and select Create Dynamic Action option and set the following properties:

  • Action: Hide
  • Selection Type: Button
  • Button: Save

11. Create One More True Action for Add Button

  • Action: Show
  • Selection Type: Button
  • Button: Save

12. Create One More True Action for Edit Button

  • Action: Show
  • Selection Type: Button
  • Button: Save

13. Create One More True Action for Delete Button

  • Action: Show
  • Selection Type: Button
  • Button: Save

14. Create Dynamic Action for Interactive Grid

Do the right-click on the Interactive Grid and select Create Dynamic Action option and set the following properties:

  • Event: Save [Interactive Grid]
  • Action: Hide
  • Selection Type: Button
  • Button: Save

Save the changes and run the page to test. Now you will find that the Save button is hidden and the Add, Edit, and Delete buttons are visible. And now when you will click on the Add, Edit, or Delete button then the Save button will be visible and after clicking on the Save button the Save button will hide again.

The output of the Interactive Grid with Custom Buttons

Oracle Apex interactive grid custom Add, Edit, Save, and Delete buttons.

Related Tutorials: