List Builder FieldsStatic Image Properties

Description

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.

OnClick 

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

rowNumber

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

listObj

A pointer to the List object

data

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":
    listObj.twoStateImageSet("IMG1","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.

Direction
Description
90

Rotate image 90 degrees clockwise.

180

Rotate image 180 degrees clockwise.

-90

Rotate image 90 degrees counterclockwise.

-180

Rotate image 180 degrees counterclockwise.

none

Do not rotate the image.

Videos 

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

03-06-2021

See Also