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

Question
#1

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!

Bildschirmfoto 2022-06-23 um 15.43.24
Bildschirmfoto 2022-06-23 um 15.43.24826×695 167 KB

Some resources to check before you post:

AppGyver Academy: SAP AppGyver Quick-Start

Troubleshooting FAQ: SAP AppGyver FAQ

#2

Hi,

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
#3

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
#4

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

#5

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

#6

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

1 Like
#7

Thank you, that helped!