Skip to main content

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”>

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}}})


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.


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.


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=“”>"

,

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


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.


Thank you