Table Record Deletion with a Button

Tomáš Navrátil

August 31, 2016 at 8:08 am #2507

Hi, I have a problem with custom delete button placed inside a table column.

In our process application, we have created a simple table bound to a list of records. On each row, there is a custom button that can be used for record deletion (picture 1).

There is an error “TypeError: _this.context is null” appearing in window console after each row is deleted (in BPMExt-Control-Button.js, line 759 – picture 2).

Is this the right way to create a button that deletes record? How can I get rid of the error?

SPARK Support

August 31, 2016 at 3:36 pm #2520

Hello Tomáš,

You may be running into the problem that the index for the UI control no longer matched the index of the bound data once a row is deleted.  Have you tried using the Show Delete Button configuration option?

Regards,

Stephen P.

Tomáš Navrátil

September 1, 2016 at 4:57 am #2524

Stephen, thank you for your response. I am aware about the possibility of showing “internal” delete button, but as long as it works like it does, it has no value for me for these reasons:

1. Its appearance is confusing. I would prefer a delete button that looks and reacts to user actions like any other regular button in the application.
2. It is unreachable with keyboard (when tabbing through the page).
3. It seems that it can’t be placed in any other column than the last one.

After discovering these limitations, I created the custom delete button, like I showed in the first post. I probably forgot to mention, that the button works fine. I am just trying to find out why the error is appearing after each deletion.

It seems to me that after I delete a row, its button somehow still exists and tries to reach its context that was already destroyed. Looks like an implementation bug for me, but I might be wrong.

SPARK Support

September 7, 2016 at 7:45 am #2558

Hello Tomáš,

I was able to replicate your design and reproduce the error that you are seeing.  After reviewing the error in the code that you are coming across, we found that the issue is that you are calling a button event from the record being deleted.  When the removeRecord() method is finished executing, the button no longer exists to be referenced and returned to a normal state.

The Best Practice when deleting rows from a Table is to either use the built-in delete button or to use a single or multi select, then add a custom delete button outside of the table.  This is how our teams design this functionality.  As for the issues with the built-in delete button having no tab stop or wanting to change the icon, you can attempt to alter this with custom CSS if you wish.  The class id for the delete button is “RowDel”.

Regards,

Stephen P.

Saroj Panda

December 28, 2016 at 7:53 am #3362

Hi Tomáš & Stephen,

Bit late reply on this post, but I wonder if we tried with adding return false; after the script

• ${../Table1}.removeRecord(me.ui.getIndex()); return false;

I tried to implement similar solution as this might be the requirement for us too due to the accessibility issues in SPARK table. I got different error though but after adding return false it’s working without any error.

Attached is the error which I got.

 

Regards,

Saroj (using BPM 8.5.7, SPARK 4.4.5 EE)

SPARK Support

December 28, 2016 at 9:44 am #3370

Hi Saroj,

Great catch.  Thank you for the addition.

Regards,

Stephen P.

Lalitha Vempati

August 29, 2019 at 12:29 am #5540

I have a requirement, on the deletion of one row in a table,we should delete the same row in another table(both table has one common field).

We tried to using removeRecord in ‘On deleting row’ event as

${2ndtablecontrolID}.removeRecord(me.ui.getIndex(),true);

but me.ui.getIndex is returning 0 as index even if we delete 2nd or 3rd row.

Can you suggest how to get the deleted row index or any other solution.

 

Thanks,

Lalitha.

SPARK Support

August 29, 2019 at 6:50 am #5545

Hi Lalitha,

me.ui.getIndex() is returning 0 because the event being evaluated belongs to the Table control, not the row.  However, the event does pass in the context variable “item” containing the rows data element.  You are therefore able to call me.getRecordIndex(item).  This will return the index of the element in the list, Not the UI index.

Regards,

Stephen P.