Creating a Functional Button in an Oracle APEX Interactive Grid

 

Let’s Create a Button That Doubles the Salary of the Selected Employee

---

Step 1: Create an Interactive Grid

• Create a Blank Page

• Add an Interactive Grid region using your employee table or query

---

Step 2: Set Static IDs

• Assign a Static ID to the Interactive Grid

• Assign a Static ID to the column on which the operation will be performed (for example, the SAL column)

These Static IDs will be used in JavaScript.

---

Step 3: Add JavaScript Code

Paste your JavaScript code into the Initialization JavaScript Function section of the Interactive Grid attributes.

function (options) { var $ = apex.jQuery; 

var toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(), 
   toolbarGroup = toolbarData.toolbarFind("actions3"); 
 
/* Add custom button */ 
toolbarGroup.controls.push({ 
   type: "BUTTON", 
   action: "double-salary", 
   label: "Double Salary", 
   icon: "fa fa-money", 
   iconBeforeLabel: true 
}); 
 
options.toolbarData = toolbarData; 
 
/* Register custom action */ 
options.initActions = function (actions) { 
   actions.add({ 
       name: "double-salary", 
       label: "Double Salary", 
       action: function () { 
 
           /* Get Interactive Grid region (Static ID = Emp) */ 
           var ig$   = apex.region("Emp").widget(); 
           var grid  = ig$.interactiveGrid("getViews", "grid"); 
           var model = grid.model; 
 
           /* Get selected rows */ 
           var selectedRecords = grid.view$.grid("getSelectedRecords"); 
 
           if (selectedRecords.length === 0) { 
               apex.message.alert("Please select at least one row."); 
               return; 
           } 
 
           /* Loop through selected rows and double salary */ 
           selectedRecords.forEach(function (record) { 
               var salary = model.getValue(record, "SAL"); 
 
               if (salary !== null && !isNaN(salary)) { 
                   model.setValue(record, "SAL", salary * 2); 
               } 
           }); 
       } 
   }); 
}; 
 
return options; 
 

} 

---

Step 4: Save and Run

Save the page and run it to test the functionality.

---

Note

Based on your requirements, you can modify the JavaScript function to perform different operations (such as incrementing salary by a percentage, updating multiple rows, or calling a PL/SQL process).