Oracle APEX 5.1 – Link to Deletion

In this article, I will cover the process of creating a link type column, which I will be using to delete the current row on click. This can be applied in the Classic Report, Interactive Report and Interactive Grid components.

Basically, there will be three areas on which I will be focusing on:

• Preparing the link type column;
• Calling a custom JavaScript function from a target URL link;
• Calling a custom Dynamic Action from a JavaScript code.

For the demo, I will be using the Interactive Grid component and the DEPT table from the Oracle HR schema.

Part 1: Preparing the link type column

There are two methods of creating an extra column in APEX. The first method is by using the SQL Query field in the Source area.

The second method is creating a virtual column directly, without tempering the SQL Query.

Furthermore, we will need to create another column, which contains the record’s ‘ROWID’. For this, we can use any of the previous two methods. However, I prefer the first one.

Part 2: Calling a custom JavaScript function from a target URL link

Now, we need to modify some of this column’s properties, such as setting the link’s target to URL and including the following path: “javascript:deleteRow(‘&ROWID.’);”. This code is pretty simple to understand. It just calls a JavaScript function by its name ‘deleteRow’ and it passes the ROWID as a parameter. I have also included a print-screen with the changes that I have made in the properties area.

If you require extra information regarding the ROWID, check the following link:

https://docs.oracle.com/cd/B19306_01/server.102/b14200/pseudocolumns008.htm

In the ‘Link Text’ field, I have written an HTML <img> tag, which applies APEX’s default edit pencil icon. If you desire to display a custom icon, just copy it in the icons folder and make the necessary changes in the HTML <img> tag. I will mark the areas that need to be modified.

<img src="#IMAGE_PREFIX#app_ui/img/icons/apex-edit-pencil.png" class="apex-edit-pencil" alt="">

Part 3: Calling a custom Dynamic Action from a JavaScript code

In the previous part, I was calling a JavaScript function, but it wasn’t created yet. No worries! We just need to write it in the Page > Properties > JavaScript area, more exactly in the ‘Function and Global Variable Declaration’ field. The code that I have written is the following one:

function deleteRow(value){
    if (confirm('Would you like to delete this row?')) {
        // Delete it!
        apex.item('P1_DELETE_ID').setValue(value);
        apex.event.trigger('#P1_DELETE_ID', 'Link_Call', '');
    } else {
        // Do nothing!
    }
}

Basically, what my code does is straight forward. It makes a confirm pop-up appear and if the user will click on OK, then the ROWID will be stored in a Hidden item called ‘P1_DELETE_ID’ and a custom Dynamic Action called ‘Link_Call’ will be triggered. My custom event is as follows:

As you can see, the custom event has two true actions. The first one executes some PL/SQL code, which deletes the row directly from the table based on the ROWID, whereas the second action just refreshes the Interactive Grid region to have the updated values.

This is the whole process that I have used and I hope that this information is helpful.

Good luck developing!