Read-Only Click-Row-To-Edit Tables for an App-Like UX

Showcase Tips and Hacks
1

Sometimes we need to prevent users having full edit access to the tables on a page. This trick lets us build a Read-Only table where the user can click on any row to open the row in an editable dialog and then click Done to close it. The page is locked so only Buttons and Column-Edits are allowed.

We use a single button for each row. The label of that button shows several ‘columns’ formatted to look like a regular table. We use _Code() to get a monospaced font (so we can compute the width of the data) and then use .Left(N) and .RightPad(N) to clip the values to be exactly N chars wide.

We then have to provide a suitable label for this button column, spacing out the words to match the data below.

This provides a UX that is somewhat closer to a proper application rather than a spread-sheet like UX. What we call a Locked-Down UX (and some call it a Dumbed-Down UX).

7 Likes
2

:boom: you did it again, @Xyzor_Max! This is amazing! It’s so obvious how useful this will be for those use cases where unintentional user interaction needs to be avoided. Very well done! Congratulations and thank ls for sharing your insights with the community!

3 Likes