Table – update table row

Jan Prochazka

September 21, 2016 at 1:02 am #2691

Dear SPARK UI gurus,

I have been trying to update a single row in table, however I seem to be unable to do so corretly.

My USE CASE follows:

A table contains a list of object “Activity” with some attributes shown in the table. See attachment “Activity table.png”.

I have available actions for each of these activities (View, Assign, Complete).

Upon execution any of these actions a modal is shown with data from the selected Activity and use is able to edit some of the data in the activity. For instance, I want to modify  attributes “assignedToTeam” and “assignedToUser”. See “Assignment Modal.png”.

User then confirms the assignment and I somehow need to edit the row in the table.

I have found this article, however that does not answer my question fully, as it suggests I would have to get all siblings in the row and update them and that to me seems abit impractical.

Is there another way to do it, or am I overlooking something.

Your help is greatly appreciated.

• Jan

 

SPARK Support

September 21, 2016 at 2:22 pm #2725

Hi Jan,

In the article you found, not all data elements need to be in the modal. Much as not all elements of a Business Object need to be in a table. You can add only the fields that you need to modify to the nested Modal. As long as the fields needed are bound to the same data, you should be able to use this technique.

Regards,

Stephen P.

Jan Prochazka

September 22, 2016 at 3:12 am #2734

Hello Stephen,

thank you very much for your answer. I have created a seperate process application to test this.

In my coach view I have following code which handles all the UI logic, I prefer it this way because all the logic is located at one single place and not separetely in the components.

What this essentially does is that after I edit the row in the modal, say I change the name of the activity, the change is not reflected back in the table, however when I re-open the modal I can see that the modified name is in the data, just not propagated in the table.
See attachments “Activity modal.png” and “Activity table.png”

EDIT: code tag here seems to be broken, so I proved my code below.
My code follows: http://pastebin.com/AdGWEYMK

All vars are initialized during load event of the coach view and I know they are available.

I can provide the twx if desired.

Thank you!
– Jan

SPARK Support

September 22, 2016 at 5:10 am #2739

Jan:

If we have the twx that removes all doubt from how you are doing things.  If you can put it someplace we can see it that might help speed things up.

 

Regards

 

JMAC

Jan Prochazka

September 22, 2016 at 5:25 am #2740

Sure, here’s the TWX.

Thank you,
Jan

SPARK Support

September 23, 2016 at 11:39 am #2757

Hi Jan,

Add another Data control to your Coach View. Then, in your Execute button code, save the index to a data control on the activity form:

this.activityListTableExecuteButton = function(me) {
var myIndex = me.ui.getIndex();
selectedIndexData.setData(myIndex);
selectedActivityData.setData(activityListTable.getData().items[myIndex]);
activityModal.show();
}

Then you can use this to set the bound data by index from your update button.

Regards,

Stephen P.

Jan Prochazka

September 29, 2016 at 3:15 am #2802

Hello Stephen,

thank you kindly for you reply, however I don’t think that solves my problem.

My problem is, that when I update the row from the modal, the change is not visible in the table. However when I call method .getData() on the table, I see that the changed value is there, only not shown (propagated) in the table row.

What you suggested is that I store the index of the row I clicked on, but I have the index of the row, by calling me.ui.getIndex();

My question is, how do I propagate change of row back to the table, so the components update.
E.g. I change the name of the acitity in modal and after I confirm the edits the change is visibile in the row of the table.

Regards,
Jan

SPARK Support

September 29, 2016 at 11:34 am #2807

Hi Jan,

What you need to do is save the index from me.ui.getindex().  Then, in your activityModalUpdateButton code use:

activityListTable.getData().items[indexVar] = selectedActivityData.getData();

Unfortunately, since the modal is not embedded in the table, the controls that have been changed in the row need to be updated manually with something like:

var control1 = page.ui.get(“Table/control[indexVar]”);

control1.setData(selectedActivityData.name);

Regards,

Stephen P.

Jan Prochazka

October 3, 2016 at 3:11 am #2810

Hello,

thanks again for your input.
I think we have figured out a rather more convenient way to reflect changes done in modal back to the table row.

Using method put() on business object, we put the updated object to the index with data from modal. This seems to work and the changes are then visible in the table row in any of the fields.

I find it easier to do it this way, rather than setting data on each of the component in the table row.

I’m leaving this for a reference for others, shall anyone encounter similiar scenario.

The final result code is:

activityListTable.getData().put(activityTableListSelectedIndex, selectedActivityData.getData());

Full code of my coach view is provdided here:
http://pastebin.com/XaUfJ1Ry

Regards,
Jan

SPARK Support

October 3, 2016 at 4:23 pm #2812

Hi Jan,

Thank you for the feedback and sharing your solution.

Regards,

Stephen P.

Emil Brolin

February 6, 2017 at 2:55 am #3632

In this article, is it possible to add instructions on how to show the data from the table in the modal? I don’t get the concept of how to get the data from the table into the modal edit it and then get it back. Can you tie the supplied data from the AJAX-service to a BO that you use to pass the data to the modal or dou you use data Controls?
Is it any differences between normal tables and Service Data tables?

SPARK Support

February 16, 2017 at 1:12 pm #3731

Hey Emil,

Thanks for your question. The Modal Section with the nested content inside of it is actually a Coach View. The complex business object that is bound to the coach view will have its data altered within the modal.
For example, if I create an array of a business object with this structure:
exampleObject{
property1: “”,
property2: “”
}

Then, I bind the exampleObject[] to the Table, and the individual exampleObject to the Coach View in the Table. And finally within the Coach View, I bind each property of exampleObject to a Text Box. Because the coach view’s data belongs to an individual item in the bound list, any changes (i.e. edits in the modal) will also change the backing data business object.

Thanks,
Elliot P.

Canan Demir

January 21, 2018 at 11:31 pm #4931

Hi,

I am trying to update a column as I add rows to the table. I want it to look like the attachment ‘Table.png’. I am writing the following code
at the table ‘On row add by user’ event. The table is working properly for the first line.

${Table1/Text1[0]}.setData(${Table1}.getRecordCount()*10);

However, I tried to use dynamic instead of [0] and it did not work.

var count = ${Table1}.getRecordCount();
${Table1/Text1[count]}.setData(${Table1}.getRecordCount()*10);   (Error.png)

Is there another way to do it?

SPARK Support

January 24, 2018 at 9:59 am #4943

Hi Canan,

The On Row Added by User event allows the return of an object to use for the new row.  If Text1 is bound to ComplexType.myString1 for example, then you can return {“myString1”: “xyz”};.

Please see the following article’s on Table and Adding Rows to a Table Dynamically:

https://salientprocess.zendesk.com/hc/en-us/articles/206521927-Table

https://salientprocess.zendesk.com/hc/en-us/articles/205605278

Regards,

Stephen P.