Very Slow Create/Update Loops on Rendered Tables -- Remove a table / UI element from rendering?

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.