How to achive multi-line editing (CRUD) with a table-UI on a ejb-model

[Former Member]

Hello community,

i'm working on an prototype. we want to migrate an existing web-application to nw 7.1 with web-dynpro as ui-technology. the old application often uses javascript-/ajax- driven table-grid-controls. this table controls allowed editing the data in it. the conrol "records" every action. for example which rows were deleted, which were updated and which were appended.

when the user has finished editing, he simply clicks a save-button. the table-grid control then sends the changes via ajax-calls to the server.

now i want the achive such behavior in web-dynpro (7.1)

for getting the data to be edited, i wrote an ejb and created an ejb-model in web-dynpro. so viewing the data works fine so far. the view-controller with the table-ui-element is bound to the view-controllers context, which is mapped to the context-controller to which again a model-object is bound, which retrieves the data from the ejb.

inserting, updating and deleting single rows with a detail-view-controller also works, using additional context nodes (again mapped to addtional model-classes for crudp.

but i know want to have all rows and cells to be editable. the user should be able to insert, update and delete in that table without neccessarily using a detail-view-controller.

how would you achive this? holding every creates, update, deletes in single nodes? and when clicking a button to fire the save action to go to that nodes and apply that action? Or would you create an addtional flag-attribute in the node that shows what was done with that row? after pressing save also iterating the nodes, checking for the flag and doing the appropriate actions (but this maybee is performance critical when having a lot of rows)?

any ideas how to achieve multiple crud-operations on a context-node, viewed with a table-ui-element would be welcome.

regards

Matthias

[vmadhuvarshi_ · Accepted solution]

Matthias,

Let's address your questions one by one.

1. You can make the table cells editable by chosing 'InputField' as TableCellEditor.

2. Since you have bound your table to 'View Context' and 'View Context' to 'Component Context', all changes made by you in table will be visible in Component Context after every round-trip to server.

3. To modify the data in 'backend', you need to modify your 'Save' method to check for every changed element and modify the data only if element was changed by user. To see if the element has been changed by user, use [IWDNodeElement.isChangedByClient()|https://help.sap.com/javadocs/NW04S/current/wd/com/sap/tc/webdynpro/progmodel/api/IWDNodeElement.html] method. This method returns true if element was changed by user - this is what you need.

To learn more about WD Table UI element, you may want to see [this link|http://help.sap.com/saphelp_nw70/helpdata/en/eb/220a415a47f06fe10000000a1550b0/frameset.htm].

Hope this helps.

Vishwas.

[Former Member · Accepted solution]

Hello,

thanks for your answer in advance.

your mentioned points 1 and 2 are clear for me.

for point 3, thanks for the hint about the flag isChanged. To check that value is helpful to recognize if an element is changed. do you have an example of how to loop over the elments? that would be great.

unfortunatly i further dont know to reflect deleted and inserted nodes. any ideas here others that i mentioned in my first question?

regards

Matthias

[vmadhuvarshi_ · Accepted solution]

Looping over elements is simple. You do something like this.

for(int n=0; n<wdContext.nodeMyNode().size(); n++)
{ 
      wdContext.nodeMyNode().getMyElementAt(n)
}

For element deletion, it is better to use a separate 'Delete Row' action and button. If you wish to select and delete multiple rows, set 'selectionMode' to 'multi'.

To add new rows to existing table data, I would create a form with values to be inserted and an action to do so.

[This tutorial|/docs/DOC-8061#46] is about tables and the operations like adding and deleting rows and should be helpful to you.

Vishwas.

[vmadhuvarshi_ · Accepted solution]

Matthias,

Is your issue solved? If so, please close the thread as a closed thread serves as a future reference.

Vishwas.

[Former Member]

Hello everybody,

the posts helped going the right way but were not the complete solution.

in the meantime i found a solution for the last steps of my question myself.

for updating the data in a table-ui i have an save-button which triggers an action.

that action loops over the node bound to the table and checks each element if it was changed.

but to modify the data in the backend i also now use a model-class. that class is getting the data of the row (a complete object) as parameter and a flag if the data of the element is to be inserted, updated or to delete from the database. I dont have single insert-, update, delete-model-classes for the background-ejbs and only used one crud-method in order to have less model-classes used by my web-dynpro-Application.

after excetuing that model-class for the background ejb for modifying the database, i simple insert oder delete that modified element to/from the node.

regards

matthias