Editable tables - What if you don’t need all the features?!

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.

Nice explanation !

Thank you very much Alberto.

Cheers!

hi the editable table is not working  in my theme if i use london theme it's working fine without any issue .
is there any issue with other theme .i am sending on screen shot after applying my own theme on this editable table

Hello,
You don't have to use London theme to create editabletables. However, we are using fontawesome icons to display the row controls (to save, delete or cancel a row edition).

To fix your issue you can either add the font-awesome theme (check how London theme does it) or use css customization to add new editabletable icons.

Hope this helps,
Cheers!
Vasco Pessanha

Will Outsystems provide some properties for this, instead of creating this workaround?

Btw,

you could improve the webblock to include the hide-style, so it works for that specific editable-table?

J. wrote:  
Hi J.,
For now we are not considering changing the way fontawesome is included.
What do you mean with "hide-style" in the editable tables?

Cheers,
Vasco Pessanha

well, the styles to hide the row, and delete icon

J. wrote:  Oh, ok!
Well, we will consider if we should add some default style.
As you may understand, the majority of people use it inside the london theme or inside a theme that also includes fontawesome, so this is not a major issue. Nevertheless, we will take a look into it;)
Thanks,
Vasco Pessanha
 

Adding to the great info provided by José: you may have the need to hide the Delete option for certain rows only (leaving it enabled for others). If so, try the following...

How can we use the Checkbox in Editable table Records

The Scenario is
I am consuming a rest API which sends me the Structute with 2 fields both as Text.
but from them 2 is the "Yes" and "No" option field Which i want to Show  in the Checkbox.

Is this Possible. If yes then How can i do this

Hi Sunny,

The checkbox requires a boolean variable, so you'll have to add a boolean field to the list set as datasource for the Editable Table. You may need to use a temporary list based in a Structure with this extra boolean field as your datasource (in your preparation you would copy the REST resulting list to the temporary one and use this as the datasource).

How can an action triggered by an onChange in a field previous to the EditTable, automatically "click" the "Add Record" behavior...(This way users dont have to know they have to click on the row to alter data)... We currently have javascript with the ID of the :"Add Record" href hardcoded (there was no ID to use jquery to dynamically find the id and issue a click ...
Is there a better way to do this?
Thanks!