Mobile list widget displays data records in a list view. It allows selection from a list of specified items.


  • UI Type:

Extends: BaseWidget

Properties

Name Desciption
Details HTMLSet the HTML that should be used to render item details.
Details IconSet the icon on the items in this list that is clicked to access details.
Details StyleSet the styling that should be applied to the details HTML.
DisabledThe widget cannot be used.
Empty HTMLSet the HTML that should be used to render in case if list is empty.
filterIs used to filter the records available in the list by defining a function checking certain conditions, if the record fulfills the condition, it gets displayed otherwise it gets filtered.
HiddenHides the widget from the user.
HTMLSet the HTML that should be used to render items in this list.
HTML StyleSet the styling that should be applied to the HTML for this list.
Item TypeSet which type of widget should be used for the items in the list.
sortingIs used to sort the records available in the list by defining a function checking certain condition to sort the data.
Storage ModeTo store the data of the list in cloud or locally in the device of the user.
Tab IndexThe Tab Index is an integer that tells the order of the widget when using the tab-key to move from one widget to another.

Style

Name Desciption
Background-colorChange background color of the widget
Border color (item)The border color for the items in the list
Border radiusThe border radius applied in the corners of the items in the list
Border style (item)The border style whether solid, dotted or dashed for items
Border width (item)The border width for the items in the list
ColorColor of the text inside the widgets. May not apply to all text inside all widgets
Font SizeSet the font size in pixels for text
Font weightText font weight for list items
Icon color (item)Icon color in the list items
List item background colorThe background color for the items in the list
List item spacinggenerate space between each items in the list
List wrap padding (Left Right)Generate space in the left and right area of the list
List wrap padding (top bottom)Generate space in the top and bottom area of the list
Text-alignmentSet left, centered or right. Applies both to icon and text

Events

Name Description Event Attribute
Blur Event when a widget goes out of focus
Click Event that triggers based on touch or click
event The event that triggered the handler
DblClick Event that triggers based on double click
event The event that triggered the handler
Focus Event when indicating/ highlighting widget using the cursor
ItemClick Triggered when an item in a list, table or a calendar is clicked
event Object containing the item (event.item) that was clicked

Function

setStorageMode ( )

getStorageMode ( )

blur ( )

Triggers the blur event.

focus ( )

Triggers the focus event.

get ( name: String ) { Object }

Gets the value of the specified property.

Parameters
Name Type Description
name String The name of the property.
Returns

The property's value.

getId ( ) { ID }

Returns the ID of the widget.

Returns

The ID of the widget

getRecords ( ) { Object }

Gets the records in the list.

Returns

Promise containing all of the Lists items.

getValue ( ) { Object }

Returns the widget's value.

Returns

The widget's value.

hide ( )

Hides the widget.

isEnabled ( ) { Boolean }

Returns true if the widget is enabled.

Returns

True if enabled, otherwise false.

isHidden ( ) { Boolean }

Returns true if the widget is hidden.

Returns

True if hidden, otherwise false.

refresh ( opts: Object )

Refreshes the list.

Parameters
Name Type Description
opts Object Optional object used to configure the refresh.

render ( )

Renders the list.

scrollToBottom ( )

Scrolls the list to the bottom.

set ( name: String , value: Object )

Sets the value of the specified property.

Parameters
Name Type Description
name String The name of the property.
value Object The new value.

setEnabled ( Enabled: Boolean )

Enables/disables the widget.

Parameters
Name Type Description
Enabled Boolean True to enable the widget, false to disable.

setQuery ( queryName: String )

Sets the query used to populate the list with items.

Parameters
Name Type Description
queryName String The name of the query.

setRecords ( records: Array<Record> )

Sets the records in the list.

Parameters
Name Type Description
records Array<Record> The records to display.

setStyle ( Object: Object )

Set the widget-style

Parameters
Name Type Description
Object Object properties

setValue ( value: Object )

Sets the widget's value.

Parameters
Name Type Description
value Object The new value.

show ( )

Shows the widget.