Display a collection in a listbox

Recently, 4D introduced of a new type of variable: collections, as well as a large set of methods to manipulate them. With 4D v17, the possibilities of collections is becoming larger by being able to easily display the content of a collection. How? List boxes of collection type!

The great benefit of using collections is that you can display heterogeneous data in the same column. For example, let’s say you have a collection with a “free” field for the end user. Depending on the context, sometimes the user may enter a number, sometimes a text, sometimes a date. Now you can display everything in a list box column without having to force a cast.

No need to convert your collection to array. No code. Just easy!

Collection list boxes: example

How to configure the list box

First, choose the list box type “Collection”. Then, as a data source, enter a variable or an expression that returns a collection.

You must then define the data source for each column of your list box. It’s simple, just enter an expression for each column in the Property List, as you would for a list box of current selection type.

To do this, you’ll need to use the new This command. It returns an object containing the element which is currently being redrawn. In a list box, this command is evaluated for each row and allows access to all of the attributes of the current collection element.

 

content Formatting using an expression

While a list box of selection type lets you can enter an expression to define the font color, the background color, the font style, the selectable and enabled status, you still need to indicate a project method or an expression for each action. With list boxes of collection type, it’s even easier, you can simply define all of these parameters in a SINGLE project method, the meta info expression.

The meta expression is evaluated for each displayed row and returns an object containing the following attributes:

• fill: enter a CSS color to define the background color
• stroke: enter a CSS color to define the font color

• fontStyle: set value as “italic” to apply the italic style, else set it to “normal”
• fontWeight: set value as “bold” to apply the bold style, else set it to “normal”
• textDecoration: set value as “underline” to apply the underline style, else set it to “normal”
• unselectable: enter a boolean to define whether the row is selectable or not
• disabled: enter a boolean to enable or disable the row.

If the attribute does not exist, 4D uses the default value.

For example, you can bind the meta expression “Decorate” to the list box. The Decorate method contains the following code:

If (This.value>10)
  $0:=New object("fill";"red";"stroke";"white";"fontWeight";"bold") 
Else 
  $0:=New object("fill";"blue")
End if

In this example, if the “value” attribute is greater than 10, the row background will be red with white text in bold. If the “value” attribute is less than 10, the row background will be blue.

Retrieve the selected element(s)

With the “Current item” and “Current item position” properties, you can retrieve the objects of the current element of the collection, as well as their position.

The “Selected items” property lets you retrieve a collection of the selected items from the list box. You could even define this new collection as the data source for another list box. Thus, without a single line of code, you can display the subset of one list box in another.

on the 4D commands side

The 4D commands of the “List box” theme have been updated to support the collection type. A few examples: LISTBOX SORT COLUMN, LISTBOX INSERT COLUMN FORMULA, LISTBOX SET COLUMN FORMULA, etc. For more details, check out the complete list of 4D List box commands.