In this document and accompanying video we will discuss how to add dynamic images to a List Control.
In our example we have a simple List Control displaying data from the Northwind customer table, and we would like to place an icon in one of the columns that indicates whether the customer is from the United States or from another country. If it is a customer from the United States we would like to use a green icon, otherwise we would like to use a red icon.
(Note: Northwind is a sample Microsoft Access database that is shipped with Alpha Anywhere. It can be found in the 'MDBFiles' folder in the folder where Alpha Anywhere is installed):
Start by clicking on the Design tab, then List properties:
When the List Builder window opens, click on the Fields tab, then the Add Item button:
Choose Dynamic Image:
We will be asked to name this new image. Let's call it img1:
Now we can define the image. Click Image definition:
First the Conditional Image window will open. Click the Add condition button. That will open the Edit Condition window. Click Insert Fieldname:
Our first condition will be to add a green image if the country is USA, so select Country:
Then type COUNTRY= "USA":
Now we would like to choose the image that will be displayed if the country is USA, so click on the Select button:
The Select Image window will open. We will select from a Built-in Alpha Five image by clicking the button:
When the Insert Image window opens we can search for green image options by typing green in the Filter On box. We then choose our image and click the Insert button:
Click the Add condition button to add our second condition, which is that if the country is not equal to USA (country <> "usa" ) then we would like to use a red image. Click on the Select button to add the image:
Again we will choose from a Built-in Alpha Five image:
And again we type in the Filter On box to search for the image we would like to use. In this case we type red and choose the red image we would like to display:
We have now defined a new virtual column for our list, img1:
When we click on the List Layout tab we see our new column in the Available Fields list. Click on our new column, img1 to add it to our column list:
Then click the double arrow button to move it to the top:
Under Column Properties, let's give our new column a width of flex (.5):
Click on the Working Preview tab to see that the US companies have a green image displayed, while other countries display red. What we have done is to add a dynamic image column to the list. The particular image that we would like to use is controlled at run-time by an expression that gets evaluated on the data in the current row:
