ListGrids on handset devices

[claudiobosticco]

Hello, I wanted to ask if you have any best practices to recommend for ListGrids with many columns when used on a handset.

Specifically, I'm interested in how to handle hiding most of the columns. Should I use ListGridField.visibleWhen, showIf, or hidden? Or can a similar result be achieved with detail=true on the DataSource?

[Isomorphic]

DataSourceField.detail wouldn't help because it's not platform-sensitive - it would hide the field by default on all device types.

The quickest approach is listGridField.hideOnPhone / hideOnTablet.

You might use visibleWhen if you wanted to also consider landscape vs portrait (e.g. show a field if device.isPhone and device.isLandscape).

If you have a lot of fields visible on desktop and just a few on a phone, it may make sense to just have a separate "fields" array rather than setting hideOnPhone dozens of times.

[claudiobosticco]

Thanks for your reply. I forgot about hideOnPhone/hideOnTablet, nice option.
Also your suggestion about a different array of fields makes sense.

I'm also thinking that on an handset device could be appropriate to have a single column, and summarize more than one value in a single cell. Do you have a best practice here? Like using record components, or others?

[Isomorphic]

If you want something like a few normal columns, and then one colspanning value underneath, that's best done with recordComponents - just use an HTMLFlow for the colSpanning value, and make sure to turn on pooling.

Note this has the drawback that, since there's no header for the colspanning value, it's not as easy to sort/filter on it (can still be done via the "Configure Sorting..." menu item though, however, that doesn't matter as much on mobile.

It's also somewhat common to combine a couple of normal fields into a single field to save some screen real estate, e.g., combining full name and email is a common one here. Similar drawbacks - it becomes less easy to sort or filter by just the email address, if that's even needed.