ListBox Widget

The ListBox widget displays a list of items as a drop-down box and allows you to select a one or more items from the list.

The data model for the ListBox widget is a key value pair. The key is hidden part of the model while value is displayed to the user.

Following are the real-time use cases of ListBox widget:

  • To select your nationality while creating a user account in a travel application.

  • To choose a department of an employee in the employee profile.

  • To select your city name while providing the delivery address in shopping applications.

  • To apply filters. For instance, in social networking applications, users can choose the subjects of their choice such as nature, technology, health. User’s feed can then be customized as per the interests.

  • You can add or modify the UI of an application based on the option that you select from the list of identity services.

Widgets are normally added to your application using Quantum Visualizer, but can also be added from code. For general information on using widgets in Quantum Visualizer, see Designing an Application in the Visualizer User Guide.

For general information on the ListBox widget see the ListBox topic in the Quantum Visualizer User Guide.

The ListBox widget capabilities can be broadly categorized into the following:

Layout

Properties Description
anchorPoint Specifies the anchor point of the widget bounds rectangle using the widget's coordinate space.
 
EventsDescription
doLayout This event is invoked for every widget when the widget position and dimensions are computed.
  

Data Management

MethodsDescription
clone When this method is used on a container widget, then all the widgets inside the container are cloned.
  
PropertiesDescription
masterData Specifies the set of values that must be displayed for the user to make a selection from the available choices.
masterDataMap Specifies the set of values from which you can make selections.You must specify a key and a value in a master data map.
placeholder Specifies the temporary or substitute text (a hint provided as a word or phrase) that must be displayed on the ListBox until the actual selection is made.
popupTitle Specifies the Title text to be displayed for the Listbox.
singleLineText If the length of the text is more than the available space, the selected options text and the popup options text are displayed in a truncated manner, in a single line with ellipses (...). The position of the ellipses is controlled by the textTruncatePosition property.
singleLineTextInPopup controls the position of the ellipses (...), in the popup options text.
textTruncatePosition If the length of the text is more than the space available, the popup options text will be displayed truncated, in a single line with (...) ellipses. The position of the ellipses is controlled by textTruncatePositionInPopup property.
textTruncatePositionInPopup If the length of the text is more than the space available, the popup options text will be displayed truncated, in a single line with (...) ellipses. The position of the ellipses is controlled by textTruncatePositionInPopup property. The default ellipses position is at the end of the line if textTruncatePositionInPopup property is not set.
toolTip Specifies the hint text when the cursor hovers over a widget, without clicking it.
 

User Input Handling

EventsDescription
onScrollWidgetPosition This event callback is invoked by the platform when the widget location position gets changed on scrolling.
onTouchEnd An event callback is invoked by the platform when the user touch is released from the touch surface.
 

Animations

MethodsDescription
animate Applies an animation to the widget.
 
PropertiesDescription
transformContains an animation transformation that can be used to animate the widget.
widgetSwipeMoveUsed to enable and configure the left or right swipe actions for a widget.

 

State Configurations

PropertiesDescription
disabledKeysUsed to disable the list items in the ListBox widget.
multiSelect Specifies if the widget allows multiple values to be selected from the drop down list.
multiSelectRows Specifies the number of visible rows in the ListBox.
selectedKey Represents the key that is shown as selected.
selectedKeys Returns the keys from the data representing the selected keys.
tickedImage Specifies the image to be displayed when you make a selection.
selectedKeyValue Returns the keys from the data representing the selected keys.
selectedKeyValues Returns the array of selected key-value pair from the data representing the selected key and value.
untickedImage Specifies the image to be displayed when a selection is cleared.
 
EventsDescription
onSelection An event callback that is invoked by the platform when an item is selected or deselected.
 

UI Appearance

PropertiesDescription
backgroundColor Specifies the background color of the widget in hex format.
backgroundColorMultiStepGradientSpecifies the multi-step gradient color for the background of the widget.
backgroundColorTwoStepGradientSpecifies the two-step gradient color for the background of the widget.
backgroundImageSets the image for the background of the widget.
borderColorSpecifies the border color of the widget.
borderColorGradientSpecifies the multi-step gradient color for the border of the widget.
borderStyleSpecifies the border style for the widget.
borderWidthSpecifies the width of the border for the widget in pixels.
cornerRadiusSpecifies the radius of the border for the widget.
disabledStateSkinPropertiesSpecifies the skin properties that define the look and feel of the widget, when the widget is disabled or blocked.
focusStateSkinPropertiesSpecifies the skin properties that define the look and feel of the widget, when the widget is in focus.
fontColorSpecifies the font color of the widget.
fontFamilySpecifies the font family for the font of the widget.
fontSizeSpecifies the font size for the widget in percentage (%) units.
fontStyleSpecifies the font style for the widget.
fontWeightSpecifies the weight for the font of the widget.
hoverStateSkinPropertiesSpecifies the skin properties that define the look and feel of the widget, when the cursor hovers on the widget.
pressedStateSkinPropertiesSpecifies the skin properties that define the look and feel of the widget, when the widget is pressed or clicked.
shadowColorSpecifies the color for the shadow of the widget.
shadowOffsetThis property specifies the current coordinates of the shadow region in the widget.
shadowRadiusSpecifies the radius for the blur value of the shadow.
textShadowColorSpecifies the color for the text shadow of the widget.
textShadowOffsetThis property specifies the current coordinates of the text shadow region in the widget.
textShadowRadiusSpecifies the radius for the blur value of the text shadow.
contentAlignment Specifies the alignment of the text for a ListBox with respect to its boundaries.
dropDownImage Specifies the image to be used for the drop-down box indicator (inverted triangle by default).
expandListItemToParentWidthSets the width of the row item to the width of the ListBox widget.
focusSkin Specifies the look and feel of the ListBox when in focus.
hoverSkin Specifies the look and feel of a widget when the cursor hovers on the widget.
hExpandSpecifies if the widget should occupy all the width available to it.
itemDisabledSkinSpecifies the skin applied to the list items in disabled state.
itemHoverSkinSpecifies the skin applied to the list item when the cursor moves on the item.
itemNormalSkinSpecifies the skin applied to the list items in enabled state.
marginDefines the space around a widget.
marginInPixelIndicates if the margin is to be applied in pixels or in percentage.
nativeListFieldSkin Specifies the skin that is applied to each item in the native popup that appears when you click on the ListBox.
padding Defines the space between the content of the widget and the widget boundaries.
paddingInPixel Indicates if the padding is to be applied in pixels or in percentage.
parent Helps you access the parent of the widget.
placeholderSkin Reads the font color set in the skin and ignores the other attributes.
popupTitleBackgroundColor Changes the background color of the ListBox title.
shadowDepth Defines the depth of the shadow effect applied to the ListBox Widget.
shadowType Sets a type of the shadow effect to apply to the ListBox Widget.
showAppMenu Provides you an option to show or hide the app menu when the dialog is open.
titleAlignment Helps you align the title of the ListBox Widget.
titleIconAlignment Helps you align the title icon of the ListBox Widget.
viewConfig Specifies the view configuration for different viewtypes.
viewType Specifies the view type of the ListBox.
wheelBackgroundColor Specifies the background color for the wheel that is displayed when you click the ListBox.
vExpandSpecifies if the widget has to occupy all the vertical space available to it.
widgetAlignment Indicates how a widget is to be anchored with respect to its parent.
 

Enabling RTL

PropertiesDescription
retainContentAlignmentHelps to retain the content alignment of the widget while applying RTL.
retainFlexPositionPropertiesHelps to retain the left, right and padding properties while applying RTL.
retainFlowHorizontalAlignmentEnables you to change the horizontal flow of the widget from left to right.

Miscellaneous

MethodsDescription
getBadge Enables you to read the badge value (if any) attached to the specified widget.
setBadge Enables you to set the badge value to the given widget at the upper, right corner of the widget.
 
PropertiesDescription
cursorTypeSpecifies the type of the mouse pointer used.
enableHapticFeedback Allows you to enable or disable haptic feedback on the ListBox widget.
inputAccessoryViewType The extra buttons (or controls) allow specific operations needed by your application, such as moving to the next or previous text field, making the keyboard disappear and so on. The area above the keyboard is known as Input Accessory View.
groupCells Specifies if all the rows in the ListBox should be grouped using a rounded corner background and border.
popupIcon Specifies the icon that appears in the title area of the popup (on the top left side of the popup).
 

Configurations Common To All Widgets

MethodsDescription
blurEnables you to make the widget look unfocused.
convertPointFromWidget Allows you to convert the coordinate system from a widget to a point (receiver's coordinate system).
convertPointToWidget Allows you to convert the coordinate system from a point (receiver's coordinate system) to a widget.
removeFromParent Allows you to remove a child widget from a parent widget.
setEnabled Specifies the widget that must be enabled or disabled.
setFocus Specifies the widget on which there must be focus.
setVisibility Use this method to set the visibility of the widget. Default : true
 
PropertiesDescription
accessibilityConfig Enables you to control accessibility behavior and alternative text for the widget.
enableAllows you to make a widget visible but not actionable.
enableCache Enables you to improve the performance of Positional Dimension Animations.
isVisible Controls the visibility of a widget on the form.
 
EventsDescription
postOnclickJS Allows the developer to execute custom javascript function after the onClick callback of the ListBox is invoked.
preOnclickJS Allows the developer to execute custom javascript function before the onClick callback of the ListBox is invoked.

ListBox Widget Basics

NOTE: ListBox does not support multiple selection from Release 3.0 onwards. However, if you have upgraded from a version prior to Release 3.0 and used multiple selection, the backward compatibility will be maintained. If you require multiple selection capability, use either a CheckBox or a Segment with multiple selection enabled.

Creating a ListBox Using a Constructor: kony.ui.ListBox


var listbox1 = new kony.ui.ListBox (basicConf, layoutConf, pspConf);
  • basicConf is an object with basic properties.
  • layoutConf is an object with layout properties.
  • pspConf is an object with platform specific properties.

NOTE: The configuration properties should be passed only in the respective configuration objects otherwise they are ignored.

Example

//Defining properties for a listbox.
var listBasic = {
    id: "listbox",
    isVisible: true,
    masterData: [
        ["key1", "value1"],
        ["key2", "value2"],
        ["key3", "value3"]
    ],
    skin: "listSkin",
    focusSkin: "listFSkin"
};

var listLayout = {
    widgetAlignment: constants.WIDGET_ALIGN_CENTER,
    padding: [0, 0, 0, 0],
    margin: [0, 0, 0, 0],
    containerWeight: 100,
    hExpand: false
};

var listPSP = {
    applySkinsToPopup: true,
    nativeListFieldSkin: "nativeListSkin",
    viewType: constants.LISTBOX_VIEW_TYPE_SPINNER
};
//Creating the ListBox.
var listbx = new kony.ui.ListBox(listBasic, listLayout, listPSP);

//Reading the containerWeight of the listbox		
alert("listbox containerWeight ::" + listbx.containerWeight);

Important Considerations

  • Shows dynamic set of data in a fixed space.
  • The master data of choices should be limited and fetched in a separate service call.
  • On iOS platform, when the viewType is set as LISTBOX_VIEW_TYPE_ONSCREENWHEEL, the skin supports only backgroundcolor and style as one color.
  • On iOS platform, Multistep Gradient is not supported when groupCells property is set to true.
  • On iOS , when the viewType is set as LISTBOX_VIEW_TYPE_LISTVIEW and the ListBox widget is in focus, if the orientation of the device is changed, the list is dismissed.