Editable table Add Record event

Editable table Add Record event

Hi all

I'd like to perform an action when the user clicks on 'Add Record' in an editable table. Is there any way I can create an action on this event ?  I cannot seem to find this option.



Hi Bilal,

You might be able to do that creating a hidden button (css style with diplay:none) on the page and then adding an expression with escape content set to No and with script like this:

$('.RowWithAddAction a').click(function(){$('#" + HiddenButton.Id + "').click(); });


Tiago Simões
Thanks Tiago

That works, however it no longer adds the row to the editable table.  The table is refreshed.  I added the row manually (listappend) in the action logic, however that does not work either.

I'd like the row to be added the normal way after I have pre-filled the row with the correct data.  Any idea on how to achieve this ? 

Hi Bilal,

I am looking for similar functionality where, when I click on add record, I want the new record to be populatede with data from earlier row. Were you able to achieve the functionality of removing "Add record" link and adding a new link that adds a record to editable table. Appreciate your help if it has been achieved. 


Hi there,

Any solution on this? I am interested in it.

I am also interested in a hide/show possibility of the add record, depending on circumstances in my page.



I would like to see this too

Oldish thread, but here's how I did it based on the great pointers above!

Add two items to the displayed row of your editable table in Service Studio, like this:

ON_INIT in this case is the SCRIPT tag referred to above and I used a link instead of a button. The script for the ON_INIT looks like this:

SyntaxEditor Code Snippet

"<script>$('tr[isnew=true] > td > div > a.NewItem').click(function(){window.clickLastRow=true;});$('tr[isnew=true] > td > div > a.NewItem').click();</script>"

You'll notice it is modified a bit from the one above with the window.clickLastRow condition. This is added to click the new row that is added after we initialize the values and reload the editable table. This is for convenience to the user so the row will appear in the EDIT state. 

This script is looking for the Add New row hyperlink adding a click handler to it that will tell the window it needs to click that last row. As soon as the new uninitialized row appears, that link appears with it and is immediately clicked.

Here is the definition of that a.NewItem link:

If you want the last row to be clicked, add another x.y Expression with Escape Content = No and put the following code in it. Be sure this code is INSIDE the container with the editable table in it so when you Ajax Refresh that table inside the Screen Action (see below) the javascript will be executed immediately to click the last row.

SyntaxEditor Code Snippet

    $('tbody > tr:nth-last-child(2)').click();
    window.clickLastRow = false;

Next, add a Screen Action, in my case I called it "OnDealLeasePeriodTableRowAdd" and in that you can create a new row, initialize the values and then ajax refresh the container with the editable table in it.

Here are the relevant steps of the Screen Action triggered by the link:

You could of course create a new local variable with the row data and then append it, which is the opposite order I did. I chose to modify the the last item in the list after I append it to eliminate the need for another local var, but it's up to you!

In the screen action I simply copy the last row to the List behind the Editable table with a ListAppend action:

This works well, however, IE does not actually click the row. Chrome works well. Firefox might, but I haven't tested that yet. In IE, the user will still need to click the last row if they want to change the initial values. I have tried making this work in IE, however, I cannot get the last row to respond to the click event. Perhaps this is the result of the difference between the bubble and capture decisions made by the browser. The javascript for the Editable Table is loaded dynamically and it's very difficult to debug, and I stopped at "good enough."

Hope this helps someone else! If you can get it to work in IE, please share your solution! :)

Okay, upon further development, you don't need to refresh a container with the editable table in it, rather just refresh the fields within the table that you initialize to something other than the null equivalent. This will keep the new row in edit mode and you don't need to click it with javascript. 

The downside is that you'll have many more AjaxRefreshes, sure wish we could make a reusable screen action with these:

An additional upside is it eliminates the need for the extra script tag that checks for the window.clickLastRow and simplifies the click to be more similar to the button click above:

$('tr[isnew=true] > td > div > a.NewItem').click();

Finally, we have the benefit here of it working in all the browsers. :)