Laying out field labels and values

Laying out field labels and values

  

Sometimes, you just need to put a bunch of data on the screen in the form of labels and values.  What's the "OutSystems way" to handle this?

Context: For readability and compactness, I prefer not to have that data always shown in an editable form.  I'd rather have some read-only data with an edit icon that switches over to the editable form.  I'm not sure of the best way to lay out that read-only data.

In another project, we used a UL element plus CSS flexbox to lay out the data.  From the style guide:

This is semantic HTML and let's us be pretty flexible with our layout.  I don't want to use a Table widget to lay this out in OutSystems - tables for layout aren't good practice.  I also want to avoid a lot of inline CSS that sets the widths on things because that defeats the purpose of stylesheets.

The closest I've come is using the column structures available in Silk UI, which produces markup something like this:

This is OK, but there are still a lot of DIV elements there just for the sake of laying out the data.  They don't mean anything.  Maybe I shouldn't worry about that so much?

What is the right way to lay out data so that the resulting HTML is semantic and doesn't include presentation?

Thanks!

Solution

Hi Scott,

Do you mean, having your data in a "Show Record" and "Editable Record" widget, that are surrounded by an if condition, switching what to display by clicking some button?

Regards,

Solution

Marco Arede wrote:

Hi Scott,

Do you mean, having your data in a "Show Record" and "Editable Record" widget, that are surrounded by an if condition, switching what to display by clicking some button?

Regards,

Sure, that would work.  In the "Show Record" widget, I imagine that you'd point it to an Aggregate or SQL statement that returned a record with its fields and, maybe, field labels.  I'm still learning, so I wasn't actually aware of the Show Record widget - I'll look into it.  Do you have any thoughts on its HTML quality and ability to manipulate with CSS?  Thanks!


Yes, think on defining also your own widgets for the data you want to display. And try to play with CSS changing the default Theme of your target page/widgets.

Regards,

Hi Scott.

The "OutSystems way" of doing this is use what you have available and only change if strictly necessary.

So, if you want to just show things and eventually, upon authorization, edit them, why don't you just use the basic List screen / Detail screen?

You can also use an Editable Table and enable / disable it. 

The more you run away of the standard (that was made to be VERY UI/UX friendly), harder to do, debug and maintain. 

If you didn't, I advise you to do the online training and look at the documentation. It is VERY important as almost everything you will do there is the "standard" way of doing things in OutSystems.
Also, there are lots of "best practices" documents, including on UI / UX from the OutSystems point of view. Just google OutSystems Best Practices.

Cheers.
Eduardo Jauch

Hi Scott,

In line with what Eduardo said, when complexity increases the best way is always to separate in different screens the different concerns (as read and write widgets). 

Regards,

Thanks for the thoughts everyone.  My main question was about displaying a set of data, and the Show Record widget looks like the way to go there.  As for editing, it makes sense to me to go to a different screen or show a pop-up as well.  I've gone through the Basic Web Development course, but that doesn't hit all of the available widgets, so I'm still learning them.  I'm moving on to additional tutorials as well.

My remaining question is about the quality of the HTML produced.  I don't like seeing tables used for layout, and I do prefer semantic HTML.  Using a UL in the first screenshot above means that changing the class from "three-columns" to "four-columns" or "one-column" updates the layout without needing to change the HTML.  It should be accessible for screen readers, and I want to have some flexibility to rearrange things with CSS.  Thanks again for all the thoughts!