Oracle APEX part 15 - Create Add row, delete using javascript

To create a highly customized interface in Oracle APEX that uses independent "rows" of text and display fields (rather than a standard Interactive Grid), we will use Classic Reports with Apex_Item or a Parent/Child Form approach.

However, the most professional and scalable way to achieve your specific requirements (JS-driven row addition, specific field editing, and row-level deletion) is to use two Interactive Grids and customize their behavior.

Here is the step-by-step guide to building this page.

Step 1: Create the Page Structure

Create a new Blank Page.
Create two Regions:

Region 1: Title: Department Management | Type: Interactive Grid.
Region 2: Title: Employee Management | Type: Interactive Grid.
Master Region (Departments): Set Static ID to DEPT_GRID.
Detail Region (Employees): Set Static ID to EMP_GRID.

Step 2: Configure the Fields (Editability)

To satisfy (only Salary and Surname editable), follow these steps for the Employee Grid:

Select the Employees region and go to Attributes. Ensure Edit > Enabled is On.
In the left tree, select all columns except SALARY and SURNAME.
In the right pane, set Identification > Type to Display Only.
Select SALARY and SURNAME columns and ensure their type is Text Field.

Step 3: Custom "Add Row" Buttons (Requirement #1)

Instead of the default toolbar button, we will create a custom JavaScript button.

Create a Button in the Department region (e.g., ADD_DEPT_BTN).To allow separate "Add" buttons for Department and Employee:
Set Action to Defined by Dynamic Action.
Create a Dynamic Action:
- Event: Click.
- Action: Execute JavaScript Code.
Repeat this for the Employee region using its specific Static ID
1. Create a button ADD_EMP in the Employee region.
2. Dynamic Action: Click -> Execute JavaScript.
3. Code:
  JavaScript example for employee grid, similar way we need to replace the grid static id for department highlighted in yellow is the static id for employee
  //This targets the specific grid via its Static ID
  apex.region("emp_grid").widget().interactiveGrid("getActions").invoke("row-add")

Step 4: Dropdown Edit and Delete with confirmation dialog

APEX Interactive Grids come with a "Row Actions" menu (the "hamburger" icon on each row) that handles editing and deleting by default. To make it a "Dropdown" as requested:

In the Grid Attributes, ensure Appearance > Selection Planner is enabled.
Under Editing, ensure Allowed Operations includes Update and Delete.
There are two ways to create the delete at row level as below-

one way:

Add a column of type Link.
Set the Icon to fa-trash.

Use a Dynamic Action to trigger the row-delete action:

JavaScript
apex.region("emp_grid_static_id").widget().interactiveGrid("getActions").invoke("row-delete");

Two Way: 
Add a new column to your Grid. Set Type to HTML Expression.
HTML Expression:
HTML
<button type="button" class="t-Button t-Button--noLabel t-Button--icon t-Button--danger delete-row-btn" title="Delete">
    <span class="fa fa-trash-o" aria-hidden="true"></span>
</button>
Create a Dynamic Action:
Event: Click.
Selection Type: jQuery Selector.
jQuery Selector: .delete-row-btn
Action: Execute JavaScript Code.
Code:
JavaScript
var view = apex.region("EMP_GRID").widget().interactiveGrid("getCurrentView");
var record = view.getContextRecord(this.triggeringElement);

apex.message.confirm("Are you sure you want to delete this employee?", function(ok) {
    if (ok) {
        view.model.deleteRecords([record]);
    }
});

Step 5: The "Global Save" Button

Since you have two separate grids, a single "Global Save" button is more professional than two separate "Save" buttons.

Create a button in the Page Toolbar (e.g., SAVE_ALL).

Dynamic Action: Click -> Execute JavaScript Code:

JavaScript
// This saves both grids in one click
apex.region("DEPT_GRID").widget().interactiveGrid("getActions").invoke("save");
apex.region("EMP_GRID").widget().interactiveGrid("getActions").invoke("save");

Step 6: Server-Side Processing (The Deletion)

When view.model.deleteRecords is called in JavaScript, the record is marked for deletion. When the "Save" action is invoked, APEX sends a DML request to the server.

Go to the Processing tab (left pane).
Ensure the Interactive Grid - Automatic Row Processing exists for both regions.
The Logic: APEX automatically detects the "Delete" state and executes:
$\text{DELETE FROM EMPLOYEES WHERE EMP\_ID = :EMP\_ID}$
$\text{DELETE FROM EMPLOYEES WHERE EMP\_ID = :EMP\_ID}$

Step 7: Add Server-side Validation

This validation will specifically target the Salary field in the Employee grid to ensure it is not empty and is greater than zero.

In Page Designer, go to the Processing tab (left pane).
Right-click on Validations and select Create Validation.
Set the following properties:
- Name: Salary_Is_Mandatory
- Editable Region: Employee Management (Select your Employee IG)
- Type: Column is NOT NULL
- Column: SALARY
- Error Message: Salary must be entered before saving.
- Display Location: Inline in Field and Notification
To add a "Greater than Zero" check:
- Create another validation.
- Type: Expression
- Language: PL/SQL
- PL/SQL Expression: :SALARY > 0
- Error Message: Salary must be a positive number.
- FINAL Page looks like -

Step 5: Implementation Summary Table

Requirement	Implementation Detail
Separate Rows	Use two distinct Interactive Grid regions.
JS Add Row	Use `interactiveGrid("getActions").invoke("row-add-row")`.
Dropdown Edit	Use the "Row Actions" menu in the column properties.
Delete Button	Included in Row Actions or added as a custom Icon column.
Conditional Edit	Set non-target columns to "Display Only" type.

Critical Settings for Success:

Static IDs: You must go to the Region properties of both grids, scroll down to Advanced, and set a Static ID (e.g., emp_grid and dept_grid). The JavaScript in Step 3 will fail without this.
Primary Keys: Ensure your SQL queries include the Primary Key (ID) columns and that those columns have the Value > Primary Key toggle set to On in Page Designer.

Technical Knowledge

Search This Blog