Service Data Table Control with button

Jeremy Kong

May 26, 2016 at 7:06 pm #1947

You have an example in Spark UI Toolkit Demo process app on how to use display data in a table and then use a modal section (called by clicking a button on the far right cell) to view/edit a specific row. One button per row.

You did this using the Table control and binding an list type BO to it. I understand how that works, but I started working with the Service Data Table Control to do this instead. The population of data is a little tricky so it was easier to do in an AJAX service call then elsewhere, and now I have a populated table with the button and modal dialog coming up.

How do I get the data from a populated row which was returned from the Ajax service, and when I click that row’s button, populate the modal section’s fields with that same data, plus more that I brought back, but didn’t display in the table. So I have 2 problems:

1. How do I get the record associated in a row when i click a button on that row
2. Then set the modal that is being brought up with that record’s data. (I think I can figure this part out).

Is this possible?

jmac

May 27, 2016 at 5:15 am #1948

Jeremy:

It’s hard to know exactly what you are doing, could you possibly send a twx, that would cut out a lot of the guess work.

Thanks

Jeremy Kong

May 27, 2016 at 7:34 am #1950

Unfortunately, there are alot of other items in it that make it difficult. You have basically the same thing in the Spark UI Demo Toolkit. The Coach view that my example is based on is “Table Content Modified Within Modal”. The main control on there is a Table control. The address[] is bound to it which provides all the data for it.

What I am doing is the exact same thing except I want to use the Service Data Table instead of the Table control.

The address[] object is what provides the data to the Table control. For the Service Data Table, I wrote an Ajax Service that populates it.

If you bring up the example from the “Spark UI Demo Toolkit”, “Table Modified by Modal” Heritage Human Service and run it, the you will see exactly what I am talking about.

jmac

May 27, 2016 at 12:25 pm #1952

Jeremy:

Unfortunately I could not get to a system where I could run the Service you referred to, but I could have a look, and I put together an Illustration of what I think you are looking to do.

Please let me know if this helps.

Jeremy Kong

June 1, 2016 at 3:44 pm #2007

Here is the code that I’m using. The example you gave me helps a bit. Can I use the cell.row.data.fieldname with a Spark button that I want to use? I could use the CustomCell event, but then how can I use a Spark button to make it look nice?

I tried to use the getIndex() to get a row index, but the behavior I’m getting is very inconsistent. The indexes don’t seem to always be the same, and I get the wrong values sometimes because I’m pulling the wrong record out. How do I use the cell.row.data.fieldname instead? the onClick for the Spark button is being used to drive the code below, calling setCaseDetails(). I’m populating a ModalSection which isn’t shown below, but its elsewhere in a different function.

var view = this;
var CIS = view.context.binding.get(“value”);
setCaseDetails = function(control){
var idx= control.ui.getIndex();
var SDT = view.ui.get(“Service_Data_Table1”);
CIS = SDT. getRecord(idx,true);
view.context.options.testvar.set(“value”, CIS.status + ” ” + idx);
}

jmac

June 2, 2016 at 7:39 am #2009

Jeremy:

As far as the button goes I simply looked at the Button on the TOP of the attached image in debug mode and looked at how the button was defined.

So I added the following line:

element.setAttribute(“class”, “btn btn-success btn-rounded”);

This gives the button the same look.

I am not sure I understand where you are trying to get the index, I assume you are in an on New Cell so cell.row.data.index should give you the row index.  But the button you are creating is NOT going to be a SPARK button i.e. in the view tree etc.  It is only going to be styled like a SPARK button.

Jeremy Kong

June 2, 2016 at 9:51 am #2011

Here is what I’m trying to get to work. I’m not sure the approach is even right. Part of the issue is that I’m not using any of Events on the Service_Data_Table1, I think. Is there a way to pass the row data when I click the button? The onIndex() seemed to work, but as I page through the rendered service data table, the index that is returned doesn’t make sense all the time. I click page 1 row 2 (5 per page) and I get index 1 which is correct. I click page 3 row 2, and I get index 6 which is wrong. It should be 11. I’m just trying to get the data on that individual row so I can pull up a Modal Section that I have defined.

I saw that you used cell, data, table in the OnCustomCell event, but you are not passing anything into the function. There is no documentation on the OnCustomCell Event, so I’m not sure what it typically will send, but I am assuming table, cell. Can I leverage table, cell with the onClick Event for the Spark Details Button that I placed in the cell?

jmac

June 2, 2016 at 10:17 am #2013

Jeremy:

As far as the On Custom Cell goes you should be able to see the parameters passed by hovering over the option name.  I.E. it’s in the Description for the coach view.

Bottom Line: ALL functions that are invoked from an event are always passed a reference to the control itself as the first parameter.  Some events pass additional parameters (On New Cell is one) and those should be documented in the Description (hover text).  Also you can always look at the http://support.salientprocess.com/spark-ui-controls/ to see the doc for any control and also most controls have an article that describes use.

As far as dealing with the selected row, is there a reason you cannot make the table Single Select then use the On Row Selected event.  This event is passed a pointer to the Table and a pointer to the row which was selected.  The row object has the recordIndex and data as properties with data having all the data associated with the selected row.

I hope this helps

 

Jeremy Kong

June 2, 2016 at 2:47 pm #2015

Thanks! BTW. The Service Data Table documentation is not up to date. It doesn’t include all those Events that it supports. After a bit of trying different methods on the SDT control, I stumbled onto this one “getRowForView()”. This and the getData() method gave me what I ultimately needed.

setCaseDetails = function(control) {
var SDT = view.ui.get(“Service_Data_Table1”);
var cRow = SDT.getRowForView(control);
view.ui.get(“mstatus”).setText(cRow.getData().status);
}

There wasn’t a reason for not using the “single select”. It was a matter of how I wanted it to function.