Newbie Question: How to dynamically change image based on returned value (from API)

Here is the scenario:

I am making a food app that gives me the ecoscore of the food. So, with my app I scan a barcode on some food and the app returns the ecoscore, if it exists.

I have successfully connected a REST API and I have a working barcode scan function. When I press the Scan button, the ecoscore (one of the letters A to E, or ‘not available‘ ) is returned by the API and is displayed on the UI, and it’s all working fine so far.

Here is the problem: I want to show an image of the ecoscore instead of the letter, and a link to such image is not returned by the API, but you can find it on the website of the API provider.

So, I have either a URL or a local SVG image to work with.

The question is: How do I show the correct image of the ecoscore on the UI, so for each scan it can change dynamically based on the returned letter?

Thanks for any help!

Some resources to check before you post:

AppGyver Academy: SAP AppGyver Quick-Start

Troubleshooting FAQ: SAP AppGyver FAQ


Create a variable list with:
ID / score / ImageURL
Then in value of the displayed image, a formula that opens which opens the image corresponding to the score.

1 Like

If I were you, I would keep the image static and place a text(score value) component on top of the image (use the position : absolute). This should also work fine.

1 Like

Thanks, but I do not know the syntax for that formula. Could you elaborate on that?

Thanks, it’s definitely a good workaround, but I would really like to learn how to do it properly :slight_smile:

Something like :
If(EXACTLY_ONE(ListVariable, itemScore==EcoScore),itemImageURL,null)

1 Like

Thank you, that helped!