Preventing forms from redrawing due to tab indices being updated

[namlin]

Hi Isomorphic,

We are using SmartClient Version: v12.1p_2022-01-29/Enterprise Deployment (built 2022-01-29)

We are trying to improve the performance of our SmartGWT application (on the client side). Our main issue lies with performance of our DynamicForms. They often contain up to 200 fields (we cannot change this now). About half of them may be some CanvasItem implementation.

One of the things we notice that slows our application down is that some DynamicForm (lets call it "ContentCanvas_tabSet_ContentForm") gets redrawn when another listgrid with a header or another dynamicform is created (typically above it in the DOM)

We see something like this:

*13:28:46.143:MUP3[E0]:INFO:redraws:ContentCanvas_tabSet_ContentForm:Scheduling redraw (211 children) (isc_TextItem_1708: set tab index)
Canvas._logRedraw(_1=>"isc_TextItem_1708: set tab index", _2=>undef) on [DynamicForm ID:ContentCanvas_tabSet_ContentForm] @ ISC_Core.js:3060:490
Canvas.markForRedraw(_1=>"isc_TextItem_1708: set tab index") on [DynamicForm ID:ContentCanvas_tabSet_ContentForm] @ ISC_Core.js:3053:751
DynamicForm.redrawFormItem(_1=>[StaticTextItem ID:isc_TextItem_1708 name:cntn_cf_lane], _2=>"set tab index") on [DynamicForm ID:ContentCanvas_tabSet_ContentForm] @ ISC_Forms.js:449:1094
FormItem.redraw(_1=>"set tab index") on [StaticTextItem ID:isc_TextItem_1708 name:cntn_cf_lane] @ ISC_Forms.js:1089:62
FormItem._setElementTabIndex(_1=>101280, _2=>true) on [StaticTextItem ID:isc_TextItem_1708 name:cntn_cf_lane] @ ISC_Forms.js:1428:254
DynamicForm.itemAutoTabIndexUpdated(_1=>"isc_TextItem_1708") on [DynamicForm ID:ContentCanvas_tabSet_ContentForm] @ ISC_Forms.js:332:31
FormItem.autoTabIndexUpdated(_1=>"isc_TextItem_1708") on [StaticTextItem ID:isc_TextItem_1708 name:cntn_cf_lane] @ ISC_Forms.js:1471:114
[c]Class.fireCallback(_1=>Obj, _2=>"ID", _3=>Array[1], _4=>undef, _5=>undef) on [Class TabIndexManager] @ ISC_Core.js:327:104
[c]TabIndexManager.calculateTabIndex(_1=>Obj{name:isc_SelectItem_536}, _2=>undef) on [Class TabIndexManager] @ ISC_Core.js:1915:158
[c]TabIndexManager.getTabIndex(_1=>"isc_SelectItem_536") on [Class TabIndexManager] @ ISC_Core.js:1894:46
FormItem.getGlobalTabIndex() on [SelectItem ID:isc_SelectItem_536 name:icon] @ ISC_Forms.js:1423:107
DynamicForm.assignItemsTabPosition() on [DynamicForm ID:isc_DynamicForm_118] @ ISC_Forms.js:333:570
DynamicForm._addItems(_1=>Array[13], _2=>null, _3=>true, _4=>undef) on [DynamicForm ID:isc_DynamicForm_118] @ ISC_Forms.js:304:21
DynamicForm._setItems(_1=>Array[13], _2=>undef) on [DynamicForm ID:isc_DynamicForm_118] @ ISC_Forms.js:288:6
DynamicForm.setItems(_1=>Array[13]) on [DynamicForm ID:isc_DynamicForm_118] @ ISC_Forms.js:285:90

....

*13:28:47.323:TMR1:DEBUG:redraws:clearRedrawQueue: 5 redraws (5 items), 1108ms

This typically happens twice, here causing a 2 sec slowdown in the UI.

We would like to fix this issue, but require advice. From a UX perspective for us it would be fine if there is no logical tab order between different dynamicforms or grids. We would be satisfied with be a logical tab order within a dynamicform.

We have been reading your documentation about tab indices, but cannot figure it out. One thing that almost works is using setGlobalTabIndex on each formitem. Is this the right way to go? We are still experiencing issues with this. For example DateItem and DateTimeItem seem to need to be customised (setGlobalTabIndex didn't seem to work on the DateItem itself)

DateItem dateItem = new DateItem(name, label);
TextItem textItemProperties = new TextItem();
textItemProperties.setGlobalTabIndex(globalTabIndex);
dateItem.setTextFieldProperties(textItemProperties);

We also think, if we are using a StaticTextItem in a form, the tab index is still updated on the StaticTextItem causing a redraw. You can see this in the redraw logging above. We have not found how to avoid this.

Any advice is appreciated. Should we try to use this "super advanced" API? Are there other options for us?

Best regards,

[Isomorphic]

Hi Namlin
First question: Is there any chance we can see this in action in any way? Is it possible to put together a standalone test case with the problematic UI [or an equivalent] that we could run on our end with steps to reproduce the slow double-redraw? Failing that, do you have a public facing deployment you could share with us where we could see the problem within your actual app? If so, feel free to use the support@isomorphic.com email address to privately share details of how to access this.

If we can see this in action we can do some useful debugging, including looking at why the default tab-index management code is requiring these redraws, and also why they take so long.
If that's not an option, let us know and we'll consider how best to proceed. We'll likely need to see some code snippets and get some additional details on the use case / design.

Using explicit global tab indices might be a way to bypass the problems you're seeing but we'd like to understand what's actually going on before going down that path as it may reveal either a design issue in the application or an inefficiency we need to resolve at the framework level.

Thanks
Isomorphic Software

[namlin]

Thanks for your swift response Isomorphic. We'll set up an instance and be in touch via e-mail.