Image definition
Description
The image definition property allows you to place images in a list. An Expression is added to the definition that describes when the image should be applied to the list.
Adding an image to a List control row.
First define an image somewhere on your desktop. This example uses a 64px wide Brazilian flag to use with the Northwind database.
In the UX Builder open the UX Controls page and go to the Data Controls menu. Click on the [List] option to add a list control to the component.
Highlight the control and then look at the Properties list on the right. Scroll down the list to the List Properties section and click on the [...] button to open the List Builder.
On the Data Source pane in select SQL as the Data Source Type. In the "SQL Data Source" settings that appear, set the Connection string to Microsofts 'Northwind' database (this is included with Alpha Anywhere when shipped). Select the "Customers"" table as the 'Table name' property. Finally click the [...] next to the 'Field list' property select the ContactName and Country fields.
Click on the 'Fields' tab to open the List Builder's Fields pane.
At the bottom of the Fields pane click on the "Add Item" button. Select the 'Dynamic Image' option. Give the image the name 'Flag'.
Highlight the Image (Dynamic Image) in the Fields pane's field list. On the right side of the pane find the 'Dynamic Image Properties' section and click the [...] button next to the Image definition property.
The Conditional Image dialog will open. Set the radio button to the Server-side option. Click the Add condition button.
The Edit Condition dialog will open. Add the following Expression.
'Country' refers to the Country field in the Customers table. This could be any field though. To see what fields are available for use click the Insert Fieldname button.Click the 'Select' button next to "Image Name:".
Click the "Image file in your web project, or a fully qualified image URI" radio button and then click select.
Click "Add image to Project"
In the "Add Image to Project" dialog click the up button under the Source filename entry box.
Select the image file that you defined and click OK.
Click OK until you are back in the List Builder. In the List Builder click on the List Layout tab to open the List Layout pane. In the "Available Fields" list Move the ContactName field, Country field, and the 'Flag' image field into the "Columns in List". Do this by highlighting each field and then clicking the blue > arrow. When finished click OK.
Run the component in Working Preview. You should see the flag match the Country field.
Using an Image Sequence
When you add a server-side or client-side dynamic image to a List control, you can specify an image sequence for the image.
