Service Data Table performance

Brian Gottschalk

February 9, 2018 at 11:15 am #4981

I am trying to build a table in IBM BPM 8.6 (201712) using the Spark controls to replace the old Dojo gridx controls we had been using.  I am using a Service Data Table.  This table will be used to display user views of their work and each user can choose what data needs to be displayed.  So, I’m calling an ajax service that returns the column list and data.  I add the columns using setColumns, then I add the data using appendElements.  I’m not sure if any of that makes a difference, but it’s slightly different from the normal use case of statically defining columns and just calling refresh to load and display the data.

At any rate, the table I’m testing with has 27 columns and 47 rows.  I have it set to page at 10 rows, and async load 10 rows.  When I load this table in IE, I notice the data comes back and the table with the initial 10 rows displays in a little over a second (most of that time is getting the data from the server).  However, the browser is locked up for another 4 seconds or so – I can’t scroll or click on anything.  After the 4 seconds, it frees up and I can interact again.  I brought up the debugging console and I can see a ton of rendering (building, adding and removing DOM objects) taking place during that 4 seconds.

My question is whether I’m doing something wrong.  I’ve tried changing the page size, the async size, turning off all the footer and paging views, but it didn’t really seem to make any difference.  I really like the new Spark controls and they seem very lightweight compared to the old Dojo gridx we had been using.  It was my hope that we could get a lot better performance that we were getting from the gridx table (which isn’t great).  However, the 1st page of results showing up in 1 second doesn’t really help if the browser is locked and the user can’t do anything for another 4 seconds.

Any help you can offer would be appreciated.  I do have a couple other issues / questions with the Data Service Table, but this is the most pressing at the moment.

 

Thanks,

Brian

Brian Gottschalk

February 9, 2018 at 12:14 pm #4982

Some additional information:

I just tried it with the same 27 columns but 972 rows.  It locked the browser (IE 11) for a full 24 seconds after the page of 10 results displayed.  Looking in the debugger ui responsiveness tab, I see 972 instances of a Timer (Anonymous function) – 1 for each row.  Inside that, there are 10 removeChild and 10 appendChild entries and then a bunch of appendChild entries that seem to be adding paging controls.

Needless to say, I would assume the whole point of paging is to just render the 1 page at a time to improve performance.  It doesn’t seem quite right that it would still lock the browser building 972 rows when it’s only displaying 10.

Any thoughts?

 

Thanks,

Brian

SPARK Support

February 9, 2018 at 1:38 pm #4983

Hi Brian,

The appendElement() method could be causing the Table to redraw the UI, which would definitely put a strain on performance with that may rows.  The Columns and Service Data should be set up in the Service Data Table’s configuration options.

Have you reviewed the How-To article for Service Data Table?

https://salientprocess.zendesk.com/hc/en-us/articles/206650727-Service-Data-Table

Regards,
Stephen P.

Brian Gottschalk

February 12, 2018 at 5:54 am #4987

Stephen,

Thanks for the response.  I have read the How-To article.  However, as I said, in my case, we don’t know the columns at design time.  Each user sets up what data they want to show in their view.  So, we have to get the list of columns from our “views” database table and use the setColumns method to add the columns to the table.  Since the user can click on links on our worklist page to switch between different views they have, we need to use an ajax call to get the list of columns and set them before loading the table.  I was trying to avoid making 2 ajax calls for every table load (one for the columns and then turning around and calling refresh which is one more ajax call to get the data).  We may have several tables and other controls on a page and have found that a large number of ajax calls can cause the page to take a long time to load.

So – having said all that, it was my hope that I could make 1 ajax call to get the column list and data.  I could then use setColumns to set up the columns in the table and appendElements() – the plural – to add all the rows to the table.  I don’t loop through the results and do an appendElement for each row.  I specifically used the plural appendElements hoping that it would load all the data first and then redraw the table like the refresh seems to.  However, I’m not finding that to be the case.  I did try the 2 ajax call method (setColumns and the refresh) and while it’s slower making 2 ajax calls to get all the data needed, it doesn’t seem to lock up the browser rendering all the rows.

Can you tell me why appendElements would build the table differently than the refresh method?  Is there a way to make it behave the same?  Or is there some way to use the same internal method to build the table that the refresh method uses?  I would like to avoid the extra ajax calls if at all possible.  And since the refresh is somehow able to take the data returned and build the table efficiently, I feel like it should be possible using the appendElements.

 

Thanks,

Brian

SPARK Support

February 12, 2018 at 12:04 pm #4988

Hi Brian,

The appendElements() method adds the objects directly to the backing list.  For Service Data Table, the reload is not called until all elements have been added.

Are you rendering the columns as Simple HTML?

Regards,

Stephen P.

Brian Gottschalk

February 12, 2018 at 12:17 pm #4989

Stephen,

Yes – they are all Simple HTML (renderAs=H).

 

Thanks,

Brian