image in collapsible wrapper

  • 2
  • Question
  • Updated 2 years ago
  • Answered
I would like to create a UI-field that will result in links to different images.  So it is an "If" statement that the 2 results are paths to images.  One being:

 <img src="https://dorothy.com/Images/SalesForce/OFF.png"; alt="Rolled Off" height="16" width="14" border="0">

the other being 

<img src="https://dorothy.com/Images/SalesForce/XX.png"; alt="Rolled Off" height="16" width="14" border="0">
Photo of Bill Fox

Bill Fox

  • 7,954 Points 5k badge 2x thumb

Posted 2 years ago

  • 2
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Hi Bill -

Not sure what you are asking here?  Are you trying to put an image component inside of a collapsible wrapper?  Or trying to use an image in the header of the CW?  

Either way, you should be able to either use conditional merge syntax or a UI field.

If you go the UI field route, have your UI field output the URL based on the IF syntax (e.g. https://dorothy.com/Images/SalesForce/OFF.png"; or "XX.png").

Then, in the src attribute, use merge syntax on the UI Only field making sure to use triple-braces (e.g. {{{FieldThatContainsImageURL}}})
Photo of Bill Fox

Bill Fox

  • 7,954 Points 5k badge 2x thumb
In an "IF" statement how do you put a text path "<img src="https://dorothy.com/Images/SalesForce/XX.png"; alt="Rolled Off" height="16" width="14" border="0">" inside quotes when the text path has qulates.

If (   x,
"<img src="https://dorothy.com/Images/SalesForce/XX.png"; alt="Rolled Off" height="16" width="14" border="0">"
,
"<img src="https://dorothy.com/Images/SalesForce/XX.png"; alt="Rolled Off" height="16" width="14" border="0">" )

The quotes in the quotes cause a problem.
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Hey Bill -

If you want to include a quote in a formula, you need to escape the quote with a backslash (\) character.  For example:

IF(true, "hell"\o", "good\"bye") would produce the result hell"o

With that said, depending on what you are trying to do, I would recommend avoiding putting the entire IMG element in the formula output and instead, just have the formula output the URL to the image (e.g. https://dorothy.com/Images/SalesForce/Off.PNG).  Then, use triple brace mustache syntax to build the URL in the actual component.  For example, given a UI Only FIeld called ImageURL:

If you were using template component, your template would be (ensuring "Allow Html" is enabled):

<img src="{{{ImageURL}}}" alt="Rolled Off" height="16" width="14" border="0"/>

If you were using a Image component, the image URL would be

{{{ImageURL}}}

etc.
(Edited)
Photo of Bill Fox

Bill Fox

  • 7,954 Points 5k badge 2x thumb
OK.
So, if these are the two statements.

"<img src="https://dorothy.com/Images/SalesForce/ON.png"; alt="Rolled Off" height="16" width="14" border="0">"

"<img src="https://dorothy.com/Images/SalesForce/OFF.png"; alt="Rolled Off" height="16" width="14" border="0">"

Does this work?

IF({{Roll_Off_Reason__c}} == "",
"<img src="https://dorothy.com/Images/SalesForce/ON.png"\ alt="\Rolled Off"\ height="16" width="14" border="\0"\>"
,
"<img src="https://dorothy.com/Images/SalesForce/OFF.png"\ alt="\Rolled Off"\ height="16" width="14" border="\0"\>")
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Sorry Bill, I realized I had a typo in my last post.  The escape character would come before the quote character.  In my last post, I for the quote in the hello text, I put it after and it should have been before.

Correcting my last post:

IF(true, "hell\"o", "good\"bye") would produce the result hell"o

In your case, you are missing escape characters in several places.  You would want the following:

IF({{Roll_Off_Reason__c}}=="",
"<img src=\"https://dorothy.com/images/SalesForce/ON.png\"; alt=\"Rolled Off\" height=\"16\" width=\"14\" border=\"0\"/>",
"<img src=\"https://dorothy.com/images/SalesForce/OFF.png\"; alt=\"Rolled Off\" height=\"16\" width=\"14\" border=\"0\"/>")

That said, again, I think you are making this more complicated than you need to however.  I'd suggest using one of the other approaches I mentioned to simplify your solution and to avoid having to escape characters in the first place.
(Edited)
Photo of Bill Fox

Bill Fox

  • 7,954 Points 5k badge 2x thumb
Thank you