Creating Editable Tables with Support for Adding and Deleting Rows
This sample shows how to create an tabular input form for editing some repeating data. There are checkboxes for deleting rows, and a button for adding a new row at the bottom.
Here is the initial view:
Here's the edit form – any value can be edited in place:
After clicking “Create New Entry” a new editable row is created:
After the data is edited and submitted, the data includes the new row:
The data being edited comes from a “getCustomerList” service operation, and when the form is submitted the “updateCustomerList” operation is called. In this sample the service provider uses a simple XML variable to hold the data, but in a real application it could store all the new or updated data persistently somewhere.
To implement this, the Data Column Modifier builder is used to generate the support for adding and deleting rows. For deleting rows, the input for “Delete Column Style” is set to “Checkboxes”. This will add all the support for removing rows from the XML data when the form is submitted. For adding rows, there are two builders used:
- An Action List called “addRowMethod” first calls the CustomerInfo_Add method which was generated by the Data Column Modifier builder, then it redisplays the input form page.
- A Button labelled “Create New Entry” is used to submit the form and invoke addRowMethod.
Here is a link to the product documentation on creating tables with support for adding and deleting rows: http://www-10.lotus.com/ldd/pfwiki.nsf/xpDocViewer.xsp?lookupName=Web+Experience+Factory+8+Documentation#action=openDocument&res_title=Creating_a_table_that_supports_adding_rows_wef8&content=pdcontent
- samples/editable_table/CustomerInfoService – the service provider model which used a simple XML variable for the data.
- samples/editable_table/EditableTable – the UI model with the tabular edit form.