Hello,
I am seeking help in creating a custom edit form for a Public Web Forms data table.
I have successfully added a clickable ‘Edit Item’ link to the data table as a calculated column following the solution given here: Clickable url link in data table - Forms - Community
For updates after editing, I believe I can reliably find a target row in the table by iterating through the fd.control.value property examining the internal ‘id’ column.
What I am struggling with is getting a reference to the current row data when my ‘Edit Item’ link is clicked.
In the JavaScript handler for the calculated column, “data” gives a reference to the current row data, but it is only available when the value is calculated, not when the link is clicked.
Can you suggest a way of getting the current row data when my ‘Edit Item’ link is clicked, or is there another way I should be approaching this?
Thanks in advance.
Hi @chs-web,
Have you considered using URL parameters to save the item's ID in the link?
return `<a target="_blank" href="${data.Column1}?item=${data.ID}">${data.Column1}</a>`;
You can learn more about using URL parameters here: Populate form with data from different sources with JavaScript (public forms) — Plumsail Web Forms Documentation
Thank you for this suggestion Ilia.
I initially thought this would not work, but I was wrong. Here is the solution I came up with:
return '<a class="avia-button" href="javascript:void(0)" onClick="editDTRow(\'' + data.myItemIdentifier + '\')">Edit</a>';
With this, I can reliably call a function while passing a unique identifier for the row.
For some reason, data.id does not always seem to be reliably available on the click event, so I had to use a different identifier from the data. But it works, so all is good.
Thank you!
I just wanted to follow up on this to share that there is an internal ‘uid’ field in each data table row that can be used reliably as a unique row identifier. We modified our solution posted above to use this instead and it is working well.