image in collapsible wrapper

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.

1 Like

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

1 Like

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

1 Like