ListBox

Listbox displays structured lists of values which can be selected during the input.

Unlike ComboBox, with Listbox all the possible values are displayed to the form.

User can select several items at a time but cannot add the new ones at runtime.

ListBox with 3 ListBoxItems inserted in a Grid panel as seen in Lycia Form Designer

Form XML code:

Theme element filter XML code:

...

</ElementFilter>

CSS element selector code:

qx-aum-list-box

Associated 4gl syntax:

INPUT ↓

Most commonly used form properties:

Associated theme properties:

Element Border

Margin

Max Size

Min Size

Padding

Prefered Size

Inheritance diagram:

Associated ui methods:

SetEnableMultiSelection →

GetEnableMultiSelection →

SetListBoxValues ↓

GetListBoxValues ↓

SetSelectedItems

GetSelectedItems

AddItem →

Clear ↓

GetItemCount ↓

GetItemName →

GetItemText →

GetTag ↓

GetTextOf →

RemoveItem →

Influence and behavior:

To add a ListBox to your form,

Step 1	Choose a ListBox widget from the widgets palette by left-clicking its icon:
Step 2	Select the place in the form where you want to put a ListBox (in the screenshot below, we choose a cell in a Grid panel):
Step 3	Left-click the selected spot (cell or sector) to place a ListBow there:
	The ListBox is now added to your form, and you can see it in the Structure view.

Here you can find out how to input data to a ListBox using the INPUT statement, e.g.:

INPUT BY NAME f1

You can change the properties of a ListBox in the form designer. However, we recommend applying appearance properties via user themes and css.

To apply a property to a ListBox, set its value in the user theme, directly or using filters.

In the example below, we changed the ListBox's border by applying the Element Border property to the element (without additional filters).

property applied

in the user theme

theme XML code

<PropertyName>ElementBorder</PropertyName>

</PropertyPath>

</PropertyValue>

</SetProperty>

</DoStyleAction>

</StyleSheet>

</ElementFilter>

</StyleSheet>

runtime appearance

At runtime, list boxes can be manipulated with ui methods:

DEFINE listbox_var ui.ListBox

...

LET listbox_var = ui.ListBox.ForName("listbox_id")

Here you can find out how to allow selecting several items at a time with a ListBox at runtime by using the setEnableMultiSelection method:

setListBoxValues clears the ListBox and adds new items to it with the texts specified as parameters.

getListBoxValues returns the texts of all the ListBox items.

CALL listbox_var.setListBoxValues([...])

CALL listbox_var.getListBoxValues()

lycia form designer

4gl code sample

LET dspl = lbx.getListBoxValues()

DISPLAY dspl TO f2

...

CALL dspl = lbx.getListBoxValues(["LyciaDesktop", "LyciaWeb", "LyciaTouch"])

initial values and

runtime behavior

changed values and

runtime behavior

Here you can find out how to add a ListBoxItem to a ListBox at runtime by using the addItem method.

clear removes all the ListBoxItems from a ListBox:

CALL listbox_var.Clear()

getItemCount returns the total number of the ListBox items as an integer number:

CALL listbox_var.getItemCount()

Here you can find out how to get the value of a ListBoxItem at runtime using the getItemName method.

Here you can find out how to get the text of a ListBoxItem identified by its position at runtime using the getItemText method.

getTag returns the ListBox identifier:

CALL listbox_var.getTag()

Here you can find out how to get the text of a ListBoxItem identified by its value at runtime by using the getTextOf method.

Here you can find out how to remove ListBoxItems at runtime by using the RemoveItem method.

Example programs:

CVS server: client.querix.com

CVS repository: /lycia_doc_examples

User: client

Project: user_interface/widgets

Program: listbox