The “Dynamic Image” property allows you to load images dynamically into Media, Sketch and Section fields, usually through a data source column or a formula result.
The dynamic image property allows you to, with the use of formulas, dynamically change the image displayed in a Media, Sketch or Section field.
The property accepts URLs to images stored on the web as well as references to data source cells that contain image URLs.
Dynamically displaying an image from a data source column
In some scenarios, you may want to link a choices field with a Data Source containing image URLs and then, based on the selected item in the choices field, have an image field dynamically update to show the image located at the selected column value.
1. Add a Choices field to your form and assign it a dataname, e.g. “choices”
2. Add a Media (image type), Sketch or Section field to your form.
3. On the choices field, locate the “Answer Choices” property and select a data source containing images stored inside an “Image” column.
4. On the media, sketch or section field that you added previously, set the Bind to Data Source Column property to point at the Image column.
5. Save your form and test it out.
You will notice that every time you select a different option in your Choices field, the image shown in your Media, Sketch or section field will change dynamically to the image stored in the database for that particular item.
Note:
- The device must have an internet connection in order to retrieve the image
- Images downloaded in this manner will be cached on the device for faster subsequent loads.
- While the app is busy downloading the image, a placeholder image will be displayed (more on that below) and once finished it will display the downloaded image within the field.
Dynamically download and display an image from a formula
1. Add a Choices field to your form and assign it a data name of “choices”
2. Add a Media (image type), Sketch or Section field to your form.
3. Find the Dynamic Image property within the properties pane of that field and add a formula that constructs a URL.
e.g. CONCAT(‘http://myexamplesite.com/‘, {{myfield}}, ‘.jpg’)
4. Save your form and test it out.
Placeholder images and what they mean
1. “Loading” placeholder image
This is a placeholder image that is displayed whilst the app is either still busy downloading an image from the web, or, whilst it is busy loading the image from the device into the field.
2. “Not found” placeholder image
This is a placeholder image that is displayed when the app failed to download an image or failed to it from the device into a field.
Below are some potential reasons that an image can fail to load:
- Very slow internet connections causing the download timeout of 30 seconds to kick in
- Incorrect URLs
- Mistakes with the “Dynamic Image” formula causing it to resolve to a value that is not either a URL pointing to an image on the web, or a reference to a data source column containing images