Conditional Background Images

[Jennell_Yorkman]

In this blog post, I will illustrate two ways that an image in an analytics app can be changed dynamically based on selections. In one example, a layout container and the show condition is used to control which image is visible. In a second example, an IF statement is used to determine which image URL to use. In the second example, I will also review how to obtain the URL for an image in the media library of an analytics app.

Let’s begin by looking at the first example. In this example, we have an app on automobiles. When the user selects one of the automobile names, a picture of the car will be visible. If no cars are selected, then an image of all 4 automobiles should be displayed. Below is the image with no selections and all 4 cars visible.

When the Nebula model is selected, the sheet updates and only the Nebula model is visible.

In this example, a layout container has 5 Text & image objects – one image for each automobile model and one image for all cars.

A show condition like this is used to determine if the Text & image object should be visible. Only one image will be visible at any given time.

Now, let’s look at another example of how the background image can be dynamically displayed using an URL. In this example, one Text & image object is needed. In the properties of the object, under Presentation > Styling, a background image can be set. When URL is selected from the drop-down list, the option to enter an expression is available. Note that you want to edit the Background image setting that is in Presentation > Styling, not the Background image section in the properties panel.

The IF statement below checks to see which automobile model is selected to determine which image to show. If there is not a selection on the model, then the image of all the automobiles is displayed. In this example, the URLs for the media library images were used, but you could also link to images in an external source like an Amazon s3 bucket.

To find the URL for images in the media library, you can open the media library or use a sheet in the app that has the image on it. In my Chrome browser, I opened the Developer tools to inspect the image. In Chrome, the Developer tools can be opened by using Ctrl-Shift-I or from the three-dots icon in the upper right corner of the browser window and selecting More tools > Developer tools. Once the Developer tools window is open you can inspect an element by clicking on the Elements tab and then selecting the image in the highlighted box below. This will allow you to select elements on the page.

In the analytics app, click on the image in the library so that it appears in the preview window. When you click on the image in the preview window, you will see that a line in the html is highlighted. If necessary, expand the code to find the URL for the image.

Copy the URL that is listed in the src attribute for the img tag (see below). In the expression, you can use the full URL that includes https:// and the tenant name or just what is displayed in the src tag. Repeat these steps for each image.

I found this insight useful, and I hope you do, too. I would like to thank my colleagues @Charles_Bannon for the blog idea and use of his app to provide examples and @Ouadie for the tip on how to capture the media library URL.

Thanks,

Jennell