How to get collection widget to left-justify variable-width cells?

[ptc-2242103]

We are currently using Thingworx Foundation 9.3.3.

We have a collection used to display a series of KPIs in a scoreboard.  In previous versions of our application, we had a fixed MashupWidth and MashupHeight and the FlowLayoutGravity set to spaced.  This, very nicely, left justified all the cells in a row.

Old Scoreboard

After implementing an enhancement that allows for additional information in the cells, we needed to remove the fixed cell width and height and, instead, use the CellHeightField and CellWidthField.  Now, with the same layout settings, the cells spread across the width of the browser.  This is much less desirable.

New Scoreboard

Is there any way to get the cells to layout in the old way, while still having the variable width/height?  We are experiencing this on both Chrome and Edge browsers.

I admit that this is a little strange, as none of the documented layouts seem like they would produce the original layout, but we would very much like to have the left-justified cells.

• Edge: Cells will align to the nearest side that contain them, otherwise will maintain even spacing between themselves.
• Spaced: Cells will maintain even spacing between themselves and the widget sides that contain them.
• Center: Cells will center within available width while displaying as many cells in each row as will fit.
• Expand: Cells will expand to fill available width, even beyond the MashupWidth property setting.

Thanks in advance

[GabrielB · Accepted solution]

Hi,

The Collection Widget has a bit of a history. I won't get into it. But if you want a more upgraded one, check the version from the original developer(Bogdan Mihaiciuc) of the widget: https://github.com/ptc-iot-sharing/BMCoreUIWidgets  . Where he has more very useful widgets in there. Like TypeScript Class, Popover Controller, Menu Controller for the collection and so on...

As for your case, there is a setting "LeftAlignFinalRow" which only works when mashup cells have a static size.

I recommend using Bogdan's version of the Collection widget -> Collection View, which has more options AND...

Align Start! And it's easier to work with with the configuration popup, as it offers documentation on each setting.

If you install BMCoreUI you will see an option on the Collection widget in the mashup to upgrade to Collection View from BMCoreUI, so the migration to that is a click.

Hope this helps!

BR,

Gabriel

[ptc-2242103]

Thanks Gabriel.  The fact that "LeftAlignFinalRow" doesn't work with dynamic sizing is a good point.  If you look at my screen snap, each row is actually the final row in the section.

I was aware of the BMCore and have even noticed the BMCollection classes in the source code generated by native Thingworx collections.  I was just hoping it was a quick setting I was missing :).

We'll check out the BMCoreWidgets, it will just take more time before we have that opportunity.

BR,

Rob

[GabrielB]

I recommend using BMCoreUIWidgets in any of your projects. We feel that without them, you can't really make a production ready application and also make it easy to maintain.

Replacing all validators, expressions and Event roters with the TypeScript.class widget bridges the learning gap for a dev that just started with TWX.  Using typescript as the front-end logic and not having to fiddle with all those bindings and restrictions from the other widgets.

BR,

Gabriel