List ObjecttwoStateImageSet Method


listObj.twoStateImageSet(staticImageFieldName, state [, row]);



The name of the static image. If the name is blank (i.e. ''), then the action applies to the system <Row Open/Close Indicator> column.


The image state. Can be set to 'on' or 'off'. A blank value (i.e. '') sets the image state to 'off'.


Logical row number that contains the two-state image to set. If not specified, the action applies to all rows in the List.


Sets the toggled state of a two-value image or the List's <Row Open/Close Indicator> icon.


The twoStateImageSet() method sets the state for a two-state image. A two-state image is a Static Image control that has the Two-state image property enabled.

This method can also be used to set the state for a List with a Detail View that is configured to display a Detail View or other content embedded in the List row.

var listObj = {dialog.object}.getControl('LIST1');

if (listObj) {

    // Set the state of 'IMG1' to on in all List Rows

    // Set the state of 'IMG1' to off in all List Rows

    // Set the state of 'IMG1' to on in row 3 of the List
    listObj.twoStateImageSet('IMG1','on', 2);

    // Set the state of the Row Open/Close Indicator to on for all rows



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