Tip: Decide which image to show with a formula

Conveying a calculated result by showing a specific image in your app can help improve its usability. This concise tip explores this simple technique.

Using a formula to present a result, in the form of a number field or a text field, is straight-forward. What if you instead want to convey a result by showing a specific image? Luckily, deciding which image to show using a formula is not only possible, but easy to do.

Imagine an app intended for warehouse staff, who need to retrieve an item, select an appropriate package for it and then make sure that it reaches its intended destination. An app is perfect here — imagine a staff member who enters the characteristics of the item, including its dimensions, into an app and is shown visually what packaging to use.

Here’s an app that uses a simple text drop-down field to determine what image to show:

Every image is part of a separate text box (which can include more information, such as an image caption). The app above associates separate formulas with the Visible properties of the three text boxes.

There is also a text drop-down field, named ImageSelector, which determines which image is shown. It contains three items, which you need to reference from the formulas.

Here’s the first Visible formula, which determines if the first text box should be shown:

ImageSelector = "Mountain"ImageSelector = "Mountain"

Use similar formulas for the other images. The text on the right-hand side of = must match the text of the text drop-down field.

To add a text box, press Add text in the main designer and then add an image to it. To edit a Visible formula, press the button with a gray fx symbol next to Visible in the inspector.

« Our next release has been delayed