How to use lowercase and dynamic image placement in popups

06-20-2021 01:12 PM
New Contributor

Hi. I'd like to be able to: 

  1) Reference a field name e.g., {speciesname}

  2) Change its value to all lowercase e.g., rana muscosa

  3) Replace any whitespace with dashes e.g., rana-muscosa

  4) Use that value (e.g., rana-muscosa.png) to display an image in the content portion of a popup template embedded in a table cell of my choice. Here's an example, which won't work but describes the desired result.  

      content: '<table><tr><td>{speciesname}</td><td><img src="images/' + "{speciesname}".toLowerCase().replace(/\s+/g, '-') + '.png"></td></tr></table>'

  5) Can someone explain how to go about this? I've spent quite awhile in the docs and YT reviewing PopupTemplate and custom content reference and examples, to no avail. Thanks for any help. 

0 Kudos
3 Replies
Esri Contributor

Hi @JRomeo, have you tried looking into custom popup expressions with Arcade?

0 Kudos
New Contributor

I have, yes, but I can't find any examples that really touch on what I'm looking to do. Thanks though. 

0 Kudos
Occasional Contributor II

@JRomeo Have a look at the text functions for Arcade:


  • lower: makes your text lower case
  • trim: strips white space
  • concatenate: join up bits of text you make

You'll probably need to play around with it a bit. If you have some starting code to post we could help troubleshoot?