Community

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

How-to
OutSystems Widgets
How-to
OutSystems Widgets
New Post
 EditableTable_Custom.oml
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.
Dislike(0)
Like(30)
Dislike(0)
Like(30)
Nice explanation !
Dislike(0)
Like(0)
Dislike(0)
Like(0)
Thank you very much Alberto.

Cheers!
Dislike(0)
Like(0)
Dislike(0)
Like(0)
 mythemeissue.png
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
Dislike(0)
Like(0)
Dislike(0)
Like(0)
 2015-06-19_1114.png
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
Dislike(0)
Like(1)
Dislike(0)
Like(1)
Will Outsystems provide some properties for this, instead of creating this workaround?



Dislike(0)
Like(0)
Dislike(0)
Like(0)
Btw,

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

Dislike(0)
Like(0)
Dislike(0)
Like(0)
J. wrote:
Btw,

you could improve the webblock to include the hide-style, so it works for that specific editable-table?
 
 
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
Dislike(0)
Like(0)
Dislike(0)
Like(0)
well, the styles to hide the row, and delete icon

Dislike(0)
Like(0)
Dislike(0)
Like(0)
J. wrote:
well, the styles to hide the row, and delete icon
 
 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
 
Dislike(0)
Like(0)
Dislike(0)
Like(0)
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...

Add this CSS to your theme:
.SelectedRORow + .RowControlGroup a.DeleteRowAction { display: none !important; }
Adapt and add this script to one unescaped expression (place it in one of the cells). Use a If widget to include it for rows that cannot be deleted).
"<script language='javascript'>
var row = $(""#" + ETable.Id + " input[id=" + UserExtension_Blog.Id + "]"").closest('tr');
row.addClass('SelectedRORow');
</script>"
Finally, don't forget to perform a validation when deleting the row (server-side), as CSS can be changed by the user in runtime.
Dislike(0)
Like(0)
Dislike(0)
Like(0)
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
Dislike(0)
Like(0)
Dislike(0)
Like(0)
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).


Dislike(0)
Like(1)
Dislike(0)
Like(1)
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!
Dislike(0)
Like(0)
Dislike(0)
Like(0)

Hi guys easy question for you because i've not experience with CSS: 

I was trying to change the SaveRowAction icon to green.

On my CSS from that page and based on what you said here I put:

.TableName tr.OnEdit + tr.RowControlGroup . ControlActions a.SaveRowAction
{

    color: green;

}

Not working!


Other issue is when I have some input not valid on the Save Action, using o Input_FocusFirstInvalid, ALL the Decimal and Currency values of that page got crazy! Just when we have for example 100 it will change for 100.0 (one decimal place). Is not a good user experience!


Can you help me?


Thank you for your help!

Dislike(0)
Like(0)
Dislike(0)
Like(0)

I have a question as well:

How can I translate text in the 'Add record' button?

Dislike(0)
Like(0)
Dislike(0)
Like(0)

Lukasz Cybula wrote:

I have a question as well:

How can I translate text in the 'Add record' button?

Hi Lukasz,

It is in the table properties.

Regards,

Dislike(0)
Like(0)
Dislike(0)
Like(0)

Hello,


When trying to disable the Add Record link found this document which led me to here.


I'm using Outsystems 9.1 and didn't find the style .EditableTable tfoot in Lisbon Theme CSS and so I tried adding it to the CSS but the link still showed.

So I changed the style td.RowWithAddAction by puting the line display: none  and with that the footer doesn't show.

This is what I have in my page CSS:

td.RowWithAddAction {
    background: none repeat scroll 0 0 #fff;
    border-bottom: none;
    padding: 0;
    display: none;
}

Dislike(0)
Like(0)
Dislike(0)
Like(0)

How do you abort insertion or deletion from an editable table? For example a user deletes a record but due to some database error it is not deleted and an exception is raised. But still the record is removed in display until it is refreshed. How can I keep this record in display?

Dislike(0)
Like(0)
Dislike(0)
Like(0)

Khalil Dahham wrote:

How do you abort insertion or deletion from an editable table? For example a user deletes a record but due to some database error it is not deleted and an exception is raised. But still the record is removed in display until it is refreshed. How can I keep this record in display?

Hi Khalil,

Usually you follow an optimistic approach where you assume that both insert and delete operations will work (specially if you don't have much collaboration). Then, if something went wrong at ahome database level, just refresh the whole table and give a proper feedback explaining what happened (this should be very common).

Cheers,

Vasco

Dislike(0)
Like(0)
Dislike(0)
Like(0)

Hi there,

An extra question here, if I have two editable tables in a form, and one should have the add records disabled and the other enabled.

The CSS works on the whole form, so adding the disabling css disables it on both editable tables.

What to do?

Regards,

Wilko

Dislike(0)
Like(0)
Dislike(0)
Like(0)

Hi Wilko,

you can place both editable tables in different containers with different class names. Include these class names as part of the CSS.

For instance class1 > td.RowWithAddAction for the first one and class2 > td.RowWithAddAction for the second one. 

You can the adjust both in their own unique way. 

Kind regards,

Remco Dekkinga

Dislike(0)
Like(1)
Dislike(0)
Like(1)

Nice solution Wilko!!!


Dislike(0)
Like(0)
Dislike(0)
Like(0)

Claudio Lichtenthal wrote:

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!

Hello All, did anyone ever come up with an answer the Claudio's question here?  I would really like to impliment it.

Thanks!
Chris 


Dislike(0)
Like(0)
Dislike(0)
Like(0)

hi there,

I am still confuse to prevent tab in the last row by wrapping in if statement:

ContactTable.List.CurrentRowNumber = ContactTable.LineCount-1.

If i put IF widget in the expression widget that contains this script:

<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>

the tab still works, even for the last row.


How to do it?

regards,

IB


Dislike(0)
Like(0)
Dislike(0)
Like(0)

Thank you José, that helped me enormously!

I still had trouble with disabling TAB on the last row.

However, I think its just the If statement, because when I changed it to List.Length - 1 instead of LineCount - 1, it worked.

ie ContactTable.List.CurrentRowNumber = ContactTable.List.Length-1


Dislike(0)
Like(0)
Dislike(0)
Like(0)

I am using an editable table that started with 4 columns (2 text boxes and 2 combo boxes), and the add, cancel, and delete buttons work fine. However, I added a check box to the table and it's value doesn't revert when I click cancel (the other 4 columns still revert as expected). Any ideas on how to fix this? 


Thanks!

Dislike(0)
Like(0)
Dislike(0)
Like(0)

why editable table automatically add a new line once screen refresh?

Hi,

I used editable table to edit a list in session(ie select a session list variable other than aggregate result  as source record list ).It worked well by removing add or delete function but a new empty line will be added to screen and new empty rcord will be added to list once the screen display again. how to prevent editable table from adding a new line?

Dislike(0)
Like(0)
Dislike(0)
Like(0)

Hi, 

I have editable table with columns project DD and worked Hr.

What I want to Disable/Hide Add Records button when condition like total worked hr. is X hr.

How to do that? Any Input!!!!

thanks.... 

Dislike(0)
Like(0)
Dislike(0)
Like(0)

Hi Rohan


This has been an open topic for a long time. It made more sense to open a new theme.


Regards


Dislike(0)
Like(0)
Dislike(0)
Like(0)
Login to reply
Company
Corporate Site
Contacts
Cookie Policy
Support
Technical Support
Community Forums
 OutSystems© All rights reserved. Custom built with (h) and (o)