I’m running into an issue where doing a create row / update row in Javascript happens almost instantaneously if the table for the model I’m creating/updating rows for hasn’t been rendered in the UI yet; but the moment you render the model’s table, even if you hide the table from display on the page, a createRow / updateRow javascript operation (in a loop) becomes painfully slow because it’s updating the UI for the table with each create/update.
Is there a way to unload from the UI rendering (de-render) a table / UI element so that I can run these sorts of create/update operations, and then re-render the table after it is done?
Alternatively, is there a way I can run these create/update operations without invoking an update to the UI rendering so that it happens more quickly, and only perform that UI rendering update at the end of my loop?
Strange behaviour. The UI rendering should not slow down the loop this significantly. Can you provide the javascript? Or can create a page that uses the snippet based on standard objects and post the XML for the page here?
In javascript this operation if put into a loop iterating over all account balances will happen nearly instantaneously if the “accBalanceModel” has not yet been rendered on the screen, but will be painfully slow (for ~1000 accounts this will take maybe around a minute) if the table has already been rendered on the screen. This is just a create / update row operation. There doesn’t appear to be any way to skip rendering here, and the rendering has to happen with each create / update, slowing things down to a crawl from their former near instant execution.
accBalanceModel.updateRow(accBalanceModel.createRow({doAppend: true}),{ AccountId: key, AccountName: value.AccountName, AccountUnifiedID: value.AccountUnifiedID, Current: value.Current, D30: value.D30, D60: value.D60, D90: value.D90, D180: value.D180, D365: value.D365, Y2: value.Y2, YPlus2: value.YPlus2 });
Hi Mark, yes this is very possible to do — if you have a Ui-Only Model with a field in it called something like “ShowTable”, that’s a “Checkbox” display type, then you can add Display Logic to the table to only render the table if the Ui-Only Model’s “ShowTable” field is set to true. Then, at the beginning of your javascript to create/update rows, or in an Action Sequence, set “ShowTable” to false. At the end of the javascript, set it to true.
e.g.
var UiModel = skuid.$M("PageVars");<br>var UiRow = UiModel.getFirstRow();<br>UiModel.updateRow(UiRow, "ShowTable", false);<br>... your other javascript here ...<br>UiModel.updateRow(UiRow, "ShowTable", true);
Hi Zach,
I’ve already tried this, it unfortunately does not work. Once the table is shown for the first time, even hiding it via display logic will not stop the UI rendering from processing slowing a create/update operation in a javascript loop to a crawl.
Hmm, try putting a Wrapper component around the Table and conditionally rendering the Wrapper. That should cause the Table component within the wrapper to be completely destroyed, so there shouldn’t be any Ui components listening when the Model rows are created/updated.
Also, some other optimizations:
When performing many row updates, it is more efficient to use the bulk version, updateRows(), which takes an object of changes keyed by row id, e.g.
model.updateRows({
row1Id: {
fieldA: “new value”,
fieldB: “new value”,
},
row2Id: {
fieldA: “new value”,
fieldB: “new value”,
},
});
My tables are currently in a conditionally rendered wrapper, unfortunately hiding that wrapper doesn’t stop the slowdown except for prior to the tables initially rendering. Once the tables are rendered for the first time even hiding the wrapper doesn’t work.
Is it possible to do a create and update all in one go for potentially thousand of items? I’m creating new rows and updating them based on items I’ve processed into a map.
