Customize TEXT_ICON

I understand this question has been posted before, but the best solution no longer works(imgplaceholder.com). we need to be able to control some of the settings of the text_icon. the one thats giving me trouble has no less than 6 characters, and no more than 9, and my users tell me its unreadable. the deck view comes in handy for being able to perform actions in less clicks, and text icon is one of the few ways i can squeeze more info into the deck view. i havent been able to find any resources from appsheet telling us how we can customize this feauture. id love to know what can be done for this

Maybe check this out?

This works as well… ipsumimage.appspot.com

thank you both for your responses but this doesnt help me much in the end. i spent a couple hours yesterday trying anything i could logically think of to make modifications to the text_icon() formula, with no changes. i wish i could show you all my failed formulas so you could tell me where im going wrong… but at the end of the day, i dont have enough understanding of this feature to use the resources you provided.

this is an example of a thumbnail formula i put together a week of two ago
IF([IS REPLEN NEEDED?]=FALSE,
https://imgplaceholder.com/100x100/ffffff/5344b8?text="&“N/a”&"&font-size=72”,
https://imgplaceholder.com/100x100/ffffff/5344b8?text=”&[DRIVER NAME]&"&font-size=16")

-this worked FINE last week, and doesnt work this week. i used the variable pieces of these formulas, along with the url that comes from text_icon() formula to try to make something work, to no avail. I’m letting this go for now, but I’m just stating for the record, that it would be nice if we could have the ability to edit tect icon features from the editor, or some AppSheet specific resources to instruct us on how to make text icons with a little more pizzazz than these image

Wrap free-text with ENCODEURL():

IF([IS REPLEN NEEDED?]=FALSE,
“https://imgplaceholder.com/100x100/ffffff/5344b8?text="&ENCODEURL(“N/a”)&"&font-size=72”,
“https://imgplaceholder.com/100x100/ffffff/5344b8?text=”&ENCODEURL([DRIVER NAME])&"&font-size=16")
1 Like

The Problem is that https://imgplaceholder.com/ is using forwarding, before showing the image.
That’s why it’s no longer working with AppSheet.
I also used it a lot and now I have to switch to other services. Because as @Erika_Braxton says - the TEXT_ICON expression is too basic.

Other services I like:

So this would look like:

https://placehold.jp/60/ffffff/5344b8/100x100.png?text=N%2Fa
image

https://dummyimage.com/100x100/ffffff/5344b8.png&text=N/a
image

http://ipsumimage.appspot.com/100?l=N/a&s=60&f=5344b8&b=ffffff
image

Sadly you cannot change the font family like you could with https://imgplaceholder.com.

2 Likes

If you are okay with using SVG’s for your Text_Icon, then you gain a lot of flexibility.

An example:

image

CONCATENATE("data:image/svg+xml;utf8,
<svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 100 100"">
<rect width=""100%"" height=""100%"" rx=""20"" fill=""lightblue""/>
<text
  font-family=""Roboto,Arial,sans-serif""
  fill=""black"" font-size=""24px""
  text-anchor=""middle"" x=""50%"" y=""60%"">",
  [Variable]
,"</text>
</svg>")

Replace [Variable] with the text_icon content, and use this as the app formula for an image columntype.

The benefit of this is you have complete control of the aesthetic of the text_icon, and do not rely upon third party services to render them.

The drawback is SVG’s don’t currently work in certain browsers, namely older versions of internet explorer on PC.

6 Likes

How will New Lines be handled?

Unfortunately SVG’s dont handle text wrapping very well without including Javascript. As we can’t run JS within AppSheet, we have to handle newlines manually.

In the case of a text_icon, I don’t think this is a big problem; you can do it with <tspan> elements:

image

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect width="100%" height="100%" rx="20" fill="lightblue"/>
<g font-family="Roboto,Arial,sans-serif" fill="black" font-size="24px" text-anchor="middle" >
  <text x="50%" y="38%">  One
    <tspan x="50%" dy="1em">Two</tspan>
    <tspan x="50%" dy="1em">Three</tspan>
  </text>
</g>
</svg>

If your text icons only sometimes need multiple lines, then you may need to include branching statements to make them dynamic.

2 Likes

[Variable] should probably be ENCODEURL([Variable]).

1 Like