[Tip] Multi-line list design tip

by David Workman
Data Mosaic

The other day I found myself in a position I have successfully avoided in all my years of Servoy development: having to create a multi-line list. I have seriously dreaded this moment because I have never been able to figure out how to combine labels and fields gracefully with this type of view. A single line list or table view is easy as the labels are put in the header and your fields in the body part to repeat down the layout. My early attempts at staggering multiple rows of labels in the header to represent the multiple rows of fields in the body part of a list have not been very exciting to say the least. And putting labels next to each field in the list seems so redundant in addition to space consuming.

The answer for me was to figure out a way to show the field label in the field if the field is empty. Once a user adds data, the label goes away as it is no longer needed. This may not work in all situations but for multiline lists where there aren't that many fields it works great. Here's how:

1/ For each field on your list that you want to label, you need a calculation. The calc displays a label if the field is empty and displays nothing if the field has something in it:

if (!note_type) {
    return 'Type'
}
else {
    return null
}

2/ Assign the calc to the text of a label (%%calc_name%%), check the "displaysTags" property of the label and assign a font and color to the label.

3/ Put this label behind the field it describes and set that field to "transparent" so the label shows up through the field.

Rinse and repeat for each field on your multiline list.

Given the correct situation, this is a simple technique that is worth the little extra effort.