List Builder FieldsStatic Image Properties


Settings to configure a Static Image field in a List.

Image name

The image to display.

Image class

Optional class names to apply to the image.

Image style

Optional in-line styles to apply to the image.

Bubble help

A popup message shown when the user hovers the mouse over the image.


Optional JavaScript that is executed when the user clicks the image. The JavaScript can reference the following variables:


The zero based row number for the List row the image is in


A pointer to the List object


A pointer to current row data values. To read data from a field in the current row use data.fieldName where 'fieldName' is the case-sensitive name of the field. For example:

var firstName = data.firstName;

Stop event propagation

Defines whether or not the click event for the image should be propagated up to the row events for the List (e.g. onSelect, onClick). If checked, the row events do not fire.

This property does not halt event propagation for the onTap event.

Focus row

By default, clicking the image does not select the image's row. If you check this option, clicking the image also selects the List row.

Two-state image

Defines whether or not the image should change when the user taps or clicks the image.

Swapped image name

This property is shown when Two-state image is checked.

An optional image to show when the image state changes. Leave blank if the swapped image is same as initial image.

Toggle on click

This property is shown when Two-state image is checked.

If checked, toggles the displayed image when clicked.

If Toggle on click is unchecked, then the image is only changed when the <listObject>.twoStateImageSet() method is called. For example:

var listObj = {dialog.object}.getControl('MYLIST');
if (listObj) {
    // Set the state for the "IMG1" field in the list for all rows to "on":

Rotation direction

This property is shown when Two-state image is checked.

Specify the rotation direction of the image when it is in its swapped state.


Rotate image 90 degrees clockwise.


Rotate image 180 degrees clockwise.


Rotate image 90 degrees counterclockwise.


Rotate image 180 degrees counterclockwise.


Do not rotate the image.


Two-state images

A common design pattern when building user interfaces is to add icons that change with animation when the icon is clicked. For example, you might have a 'hamburger' icon that displays a menu. When the icon is clicked, you might want the icon to animate into an different icon (i.e. an 'X' icon) to indicate clicking the icon closes the menu.

In this video, we show how to create animated two-state images in a List.

Download Component


See Also