The versatile content fields of designer applications can host rich text, anything you can do with HTML tags, and even dynamic images through the use of external URLs. Using dynamic images can substantially enhance the look-and-feel of your applications, and give your users a more interactive experience. Let’s take a look at how you can do this on a simple application with the help of HTML tags.
Our sample workbook consists of one input and one output field. The input field is essentially a dropdown selection for the name of the Presidents of the United States, and the output field contains a VLOOKUP formula that calls the corresponding image URL based on the input selection.
We begin by creating a designer application from this workbook, and then going into the User Interface Designer to start building our page. Here, we’re going to be using a dropdown for the input and a content box for the output field. For the dropdown, we’re going to select the “input” named range, and the “list” for dropdown options (president names).
Now, we need to configure the content box to display the images. To do this, we first select the content field and then click Edit Content.
In the content editor, we need to switch into the code view to insert HTML tags. In this example we’ve used:
<img src="{{Output}}" style="width: 100%">
"Output" between double-curly brackets is the named range that returns the URL of the image.
Click the x or the code button again to leave this view, and remember to press the Submit button to save your changes. We can now preview the application and interact with the input to dynamically change the images displayed.
