Dynamically display different Icon, based on value using JavaScript

App Building
,
1

I would like to display a different icon depending on a value (it would come from a query, but I am using a select list to test).

I can do this with three different icons, and hiding depending on value selected, but thought having one icon dynamically displaying different icons would be a better solution.

I've created this JavaScript, but it doesn't work.

{{ if ({{select1.value =="Present"}}) {
"/icon:bold/shopping-gift"
} else if ({{select1.value =="Fire"}}) {
"/icon:bold/interface-content-fire-alternate"
} else {
"/icon:bold/mail-chat-bubble-oval-question-alternate"
}
}}

Would appreciate any assistance/pointers.

Many thanks,
Jon.

2

Hey @jonj!

Multiline JS can be a little tricky with inline transformers, you might try using something like:

{{ select1.value == "Present" ?  "/icon:bold/shopping-gift" : select1.value  == "Fire" ?  "/icon:bold/interface-content-fire-alternate" :  "/icon:bold/mail-chat-bubble-oval-question-alternate" }}

Otherwise, you could use your existing script in a standalone transformer that you pass to the icon.

Do either of those work?

3

Hey @Kabirdas !

Thank you!! That works perfectly. You code is also far more streamlined, than my poor attempt.

I also learned valuable tips about multiline and the correct syntax. :grinning: Really appreciated.