The new editable tables released on platform 9, are very helpful in scenarios where we need to update lots of data in a bulk process. They provide us controls to edit, create and also delete data, but do we need all the controls for all the use cases?
Sometimes we may not want to delete data at all or create new records (imagine that you just want to update some of the information that is already stored on your database).

For these cases we need to customize our editable tables. Can it be done?! Let’s find out!

Removing the “Delete” feature

Let’s start with the delete: imagine that you don’t want to delete data from your table, just edit existing database records. How can we customize our tables to achieve this?

Well this is not hard. First, we just need to leave the OnDelete action empty in the editable table properties.


This way, we avoid the delete on the server side, which means no actual delete is done in the database, however we still have the button on our table that will remove the line from the table we have on the screen if we press it.


To hide it from the screen we should change the CSS somewhat. First, we can hide the button using this:.EditableTable tr.OnEdit + tr.RowControlGroup .ControlActions a.DeleteRowAction {

1. display: none;

}
 

This will just hide the delete button, we still need to center the action box using something like:.EditableTable tr.OnEdit + tr.RowControlGroup .ControlActions,

.EditableTable tr.Selected + tr.RowControlGroup .ControlActions {

1. margin-left: -57px;

}
 

At this point we have solved the problem with the delete of the records. The delete button is no longer visible on the screen and, since we don’t have the delete action on the server side, even if someone discovers the delete button on our screen, it will not do anything server-side.

Removing the “Add Record” feature

Now, what about the add new records? In this scenario we still need to have the save action on the server side to save changes to existing records, so removing the On Row Save action altogether won’t do.
First, we need to avoid the creation of new records in the database, by using the update rather than the create or update action. We probably want to do an extra validation on the action to avoid the requests when we are creating new records, something like:


This way, we have our save action configured to avoid the creation of new records in our editable table. But we still have the final row on the table displaying something like “Add Record”.


Once again, we can use some CSS to avoid the display of this row: if you inspect the code generated by the platform you’ll find that the editable table have a element where this row is so the code to hide it is simple:

.EditableTable tfoot {

1. display: none;

}
 

This seems to work…. until we hit the TAB key on the last input of the last row of our editable table.. Remember that this feature was built to simplify the input of huge sets of data, and allow us to insert lots of data by just hitting the TAB key. If we are on the last input of the last row, the platform automatically adds a new row to insert a new record, even if we don’t have the “Add Record” row…


So, how can we solve this problem? After drilling down a bit on this issue the better solution I came up was to override the TAB key action in this scenario, avoiding the default behavior of the Editable Table. First I overrode the TAB key action on the last input of a row. For that, I used this jquery code:
<script>
$(document).ready(function() {
    $('#"+Contact_Email.Id+"').on('keypress keyup keydown', function (event) {
       var keyCode = event.keyCode ? event.keyCode : event.which;
       //  TAB but not SHIFT
       if (keyCode === 9 && !event.shiftKey) {
           event.preventDefault();
           return false;
       }
    });
});
</script>

In this case I’m putting this on the last column of my editable table tied to the Contact_Email input, which is the input I have in that column.
But remember, we don’t want to prevent the TAB on all scenarios, just for the last row, so we need to put the code only on there. For that, I created an if to wrap the script with the condition that gives me the last row: ContactTable.List.CurrentRowNumber = ContactTable.LineCount-1.
The result is something like:


This way, we have code to prevent the unwanted changes on our database as well their representations on the interface.

To simplify this I built a WebBlock that receives the 3 inputs we need to build the screen and evaluate the right row to put it in. You can find the example of the eSpace with all this customizations and the WebBlock to disable the TAB attached to this post.

As discussed here, it’s very easy to do the necessary changes in the code to prevent the operations we don’t want on the server side. Looking at the interface we need to keep in mind that hiding the buttons is not enough, we need to prevent also the TAB in the last input of the table. But once we have the solution for it, it’s just repeating the process.

Hope this helps!

I want to thank Tiago Simões and Vasco Pessanha for their help finding this solution.