Change Image dynamically

[Msaldivar7]

Can i change the shown image depending on a variable?

For example, i have diferent types of fruits, and every kind of fruit has his own barcode, what i want is that when i scanned the barcode and the app detects that the barcode belongs for example to an apple, the image of an apple appears on the screen, and the same for each type of fruit.
(this si just an example, is not my application).

[Kailey]

Hey @Msaldivar7 ,

You can certainly do that! I’d recommend having a master table that holds your images. To go off this fruit example, I’d have something like the following:

ID   | Fruit Name | Image 
123  | Apple      | apple.png

You’re going to want your ID column to represent the barcode that’s going to be scanned. Then you’re going to want to build a trigger that will load the corresponding record (containing the image) based on the value of the scanned barcode.

Let me know if you have any questions on what that trigger would look!

[Msaldivar7]

Thanks for your response @Kailey .

I was thinking on something like that, but, when i add an image widget, it doesn’t show the trigger option, so i can’t set the image regarding the id, i can also made an image url variable, but i can’t find how to use that to show the image on the screen yet.

[Kailey]

I believe you’ll want your trigger (that loads the image) to happen when a barcode is scanned.

Here’s an example:

This will dynamically load the record by the barcode scanned.

Then instead of inserting an Image onto the step (like you did in your previous post), you’ll want to embed the table record.
Click ‘Text’ > ‘Table Record’

Then from there I can assign that to be just the image column of my table record:

Let me know if you have any questions!

[Msaldivar7]

That’s exactly what i need.
Thank you so much @Kailey

[Kailey]

No problem! @Msaldivar7

[armandocapo]

Hi @Kailey, is it possible to assign an expression to an image url variable? I need to dynamically determine the image based on a formula (string manipulation) and will need to then assign that URL value to a variable that would then point to a picture not stored in a Tulip table (stored in a Sharepoint folder).

I’ve tested the Sharepoint URLs by entering one directly in a trigger and it worked perfectly, but now need to figure out how to assign it to the image variable which does not appear as an option for storing an expression. I can only assign a static value (image url) to my image variable.

Thanks!

[Kailey]

Hey @armandocapo !

Could you clarify what the goal is you’re trying to achieve, just at a high level?

I’m slightly confused on if there are images being taken within Tulip, and what you’re trying to achieve w/ Sharepoint.

If you could clarify the following, that’d be great :

• What data you’re trying to send, and where it is coming from (Tulip tables, image capture within an app etc.)
• What’s the dynamic decision making portion for determining the image? (Will there be a static list that you’ll need to reference, or will this be changing. What kind of data is it?)

Thanks!

[armandocapo]

Hi @Kailey !

Thanks for your message. The use case is as follows:

• Using the barcode widget, I am scanning the QR Code on an employee’s ID which contains the name of the resource as part of a longer string. To do this, I am using some string functions that clean up the string and give me the name
• That name needs to be added to a base URL from a SharePoint folder where the employee pictures reside. Thus, I use an expression to add the name to the base URL and also replace the space between name and last name with “%20”. This is the resulting variable that needs to reference and show the respective picture.

Because the folder in the SharePoint contains a couple of hundred pictures, I do not want to create one-by-one in a Tulip table all the entries that contains the names and pictures. This would also require someone having to maintain the Tulip table with any changes in the SharePoint source.

I am already obtaining the name from the QR code and can put together the URL string. I have hard-wired a picture in Tulip with one of those URLs and the picture from SharePoint is shown without problem, but now I need to make that dynamically editable.

Please let me know if you need additional information.

Thanks!
Armando