How to implement a table with modal row detail?

Radek Sulc

June 16, 2016 at 5:23 am #2187

Dear Gurus,

what is the best approach to implement a table with modal row detail without repeating the modal section in each row which I noticed in some Youtube video? I’d like to have a table with button “Detail” in each row. When the button is clicked a modal Section with row detail appears, the row data can be edited. Seems to be simple. But not sure how to identify properly on which row the button was clicked. Sorry if I am missing something very obvious.

Thanks, Radek

jmac

June 16, 2016 at 6:03 am #2188

The button can access the index of the row it is in using <btn-view>.ui.getIndex().  Once you have this you can retrieve the record content and set a Modal section to the necessary values.  Note that in this case the Modal Section is OUTSIDE the table.

 

Radek Sulc

June 17, 2016 at 2:24 am #2197

Cool, it works. So I am a step forward. This is my statement which takes data of table record on which I clicked the button. And it assigns the row data to a temporary object on which the modal fields are bound.

{EditRowButton} – onClick():

${../cimsRecordTmpData}.setData( ${../CimsRecordsTable}.getData().items[me.ui.getIndex()] ); ${../CimsRecordDetailModal}.setVisible(true)

It works fine. To be able to feed the modal temp data object I am using “Data” CV called “cimsRecordTmpData”. Could I do it somehow without this guy? Can I reference the temp object somehow directly? Completely different approach is welcome as well eventually.

Thanks, Radek

 

Radek Sulc

June 21, 2016 at 6:16 am #2225

New issue: I have found out that me.ui.getIndex() does not reset after I reload content of the table…

Brian French

June 22, 2016 at 7:49 pm #2226

We’re checking with the engineering team to determine if this is a bug.

jmac

June 23, 2016 at 6:58 am #2228

Radek:

Can you be a bit more specific about the issue you are seeing?  Are you using a Table or a Service Data Table.  What exactly do you mean when you say “reload” the table.

The original solution I gave you will work as long as you are not paging or loading the table asynchronously.  There is a better way you can use to get the data associated with the row whose button you pushed that will work in all circumstances:
<yourTableView>.getRowForView(<yourButtonView).getData();

 

Radek Sulc

June 27, 2016 at 5:45 am #2235

It is appearing definitely in Table and very probably in Service Data Table (I used it at the beginning but I switched to Table as it supports “Seamless Coach View” column type option). By “Reload” I mean simply changing content of bound list entity.

At the end this way works  for us – we call a service, clear the table and assign service output to the bound entity. Explicit clear of children is needed – see below. Without this the me.ui.getIndex() does not reset.

/**
* Clears all the data in Spark table.
*
* @param {type} table – Spark Table component.
*/
clearTable: function (table) {
table.clear();
if (table.ui._ngcView._bpmextViewNode) {
// This object should also be cleared, so the .ui.getIndex method works on cell components.
table.ui._ngcView._bpmextViewNode._children = {};
}
},

 

AND: <yourTableView>.getRowForView(<yourButtonView).getData();
works fine. Thanks

SPARK Support

June 27, 2016 at 7:47 am #2237

Radek:

The issue on clearing the table is a bug and we will open a defect.  The attached word document shows the use of the various methods to display the index of the row containing the button.  It should illustrate how things are working for anyone who needs to see.

Your workaround is good, BUT it is using undocumented methods/properties and therefore would not be supported.  If the methods/properties were to change it might no longer work (granted this is not likely, but you should stick to the documented methods/properties.

THANKS

JMAC

Jacob Edelman

September 21, 2016 at 2:00 pm #2720

I am interested in this pattern.  I am trying to create a table with button int he row that will open a modal with additional editable details for that row (address, phone, etc.).  I need the button to capture the row selected and set the data to show in the modal.  The modal is NOT in the table row, it is a separate coach view.

I have two Data CV’s – one stores the selectedRowIndex, the other stores a selectedRow BO to show the data in the modal CV.  I have been able to set the selectedRow BO just fine with the button onChange() event, but I cannot get the selectedRowIndex set.  I have tried both the getSelectedIndex() and getReocrdIndex() methods, but neither works.

Here is my current code for the button onChange() event and some attached images of my configuration:

${../Spark_SelectedContactDataCV}.setData(${../Spark_ContactsTable}.getData().items[me.ui.getIndex()]);${../Spark_SelectedContactIndexDataCV}.setData(${../Spark_ContactsTable}.getSelectedIndex());${../Spark_EditContactModal}.setVisible(true)

SPARK Support

September 21, 2016 at 2:48 pm #2728

Hi Jacob,

Nesting the Modal inside of the Table control is our recommended method to achieve editable data in a table row.

https://salientprocess.zendesk.com/hc/en-us/articles/213236248-Achieve-Better-Performance-Within-a-Table-through-Decoupling-and-Lazy-Loading

The getRecordIndex() method should really be called getRecordAtIndex(), since it returns a data element with the index passed as an argument.

http://support.salientprocess.com/docs/enterprise/Table.html

The getSelectedIndex() works when Selection Mode is set to Single and the user selects a row.

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

Regards,

Stephen P.

Jacob Edelman

September 22, 2016 at 9:31 am #2744

What would be the pattern to click the edit button in the row and show the modal for the selected row?

SPARK Support

September 22, 2016 at 12:54 pm #2746

Jacob,

The code would go into the On Row Selected By User event if the Selection Mode is configured to single select. You could then use the getSelectedIndex() method for whatever purpose you wish.

If you have a Coach View nested in the Table row within a Deferred section containing a modal, the code would be me.ui.getSibling(“Deferred_Section_CV1”).showModal(), or any function you have defined within your coach view.

https://salientprocess.zendesk.com/hc/en-us/articles/213236248-Achieve-Better-Performance-Within-a-Table-through-Decoupling-and-Lazy-Loading

Regards,

Stephen P.

Jacob Edelman

September 23, 2016 at 1:03 pm #2759

I am using the community edition, with no Deferred Section CV.  How would you accomplish this with just the community edition of Spark?

SPARK Support

September 26, 2016 at 3:52 pm #2778

Hi Jacob,

The benefit of using a Deferred Section in the scenario described in the article is to reduce the overhead of loading multiple controls when the page loads. However, while you are testing out the controls using the Community Edition, you can still add a Modal Section to the table row and demonstrate the ease of binding the controls to the current item in the table. While testing this scenario, I would limit the number of test items in your table to avoid seeing a significant reduction in performance.

Regards,

Stephen P.

Radek Sulc

September 26, 2016 at 11:49 pm #2782

Hi Stephen,

thanks for your reply. I have noticed your statement “Nesting the Modal inside of the Table control is our recommended method to achieve editable data in a table row.”.

We typically need pretty complex row detail screens with lot of logic and data. Repeating it for each single row completely even with optimization of deferred section does not seem to be a good pattern from design and performance perspective.

Please what is the best way for following obvious need – How can we update a row data from ONE shared edit modal with one temporary object bound (very probably using Data control) to one temporary object with exactly the same structure as the structure of the table row.

Thank you very much,
Radek

SPARK Support

September 27, 2016 at 3:40 pm #2793

Hi Radek,

You have the right direction.  You would use a Business Object bound to a Data control of the same type as the List Of in the Table.  Then pull the element from the Selected Item in the table.  Then pass it in to a nested Coach View as Configuration option.

Regards,

Stephen P.

Radek Sulc

September 29, 2016 at 3:22 am #2803

Hi Stephen, if the temporary object is directly bound to the row data:
1) we would loose control over the propagation of data from table to modal and back from modal to table – we need e.g. to have “Cancel” easily working, just closing the modal with no effect to the table data even if they were updated in modal, the propagation can contain specific conditions etc.
2) we would need extra handling in the modal(s) for add record and edit record into the table
3) we would have to implement an extra CV – increase of control tree depth, complexity if no re-usability is needed. Just to meke sure as above – we definitely do not want to have a coach view nested in each row even with deferred section optimization.

At the end we just need to find the right way how to propagate the changes from independent temp object to the right row of the table and make the table to refresh the view of this particular row without reloading the whole table of course. Nothing more, nothing less.

Thanks, Radek

SPARK Support

September 29, 2016 at 12:15 pm #2808

Hi Radek,

Take a look at this Forum topic.  I think this covers the same functionality:

http://support.salientprocess.com/forums/topic/table-update-table-row/

Regards,

Stephen P.

Naresh Gubbala

February 3, 2017 at 1:07 pm #3626

Hi , I to have similar query, A button with view option is displayed in all the rows, when clicked on this button, I would like to get the current ‘row index’ and append that to a local variable and pass that variable to another coach as input.

Steps followed.

1. Added a private variable index(Integer)
2. For the event onClick of button : ${../index}.setData(${../Table1}.(me.ui.getIndex()));       // this is getting the current index of the row
3. trying to refer the index in script out side the coach : log.info(“Index Value appended is :”+tw.local.index);
4. Getting the below response
5. [2/3/17 13:02:13:423 PST] 000020c7 LoggerScripta I   Index Value appended is :undefined

Have I missed anything or whether the approach followed is right..

SPARK Support

February 10, 2017 at 3:18 pm #3671

Hi Naresh,

I would need to see where your scripts are. You will be unable to refer to tw.local from JS in the control.

Regards,

Stephen P.

Naresh Gubbala

March 7, 2017 at 10:38 am #3949

Hi Stephen P,

Thanks for that reply.

I have achieved my requirement in a quite different fashion , I have taken a output Text in the same table but made it completely invisible/hidden.

Now when ever I get the current Index, I was just passing the value to the hidden Text and reading the value into a BPM variable.

Note: Make sure the hidden text should be inside the table else the value will not be referenced.

Attached the screen shot where a column is almost hidden after the Fund Request Column, PFA.

SPARK Support

March 7, 2017 at 3:53 pm #3957

Hi Naresh,

Thank you for the feedback.

Regards,

Stephen P.