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

Status Open
3 10 2,855
10 Comments
Grant_Stead
Participant V

Maybe check this out?

Aleksi
Staff

This works as well… ipsumimage.appspot.com

Erika_Braxton
Participant II

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 2X_9_9c30a5b57050ec90b298565f2fa49c34ce73f977.png

Steve
Participant V

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")
Fabian_Weller
Participant V

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
2X_6_6814748c1c49072327b80aecf9e5a5600945b626.png

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

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

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

Jonathon
Participant V

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

An example:

2X_2_2e7cc2f52a97cd2da2f5ce8b3335bbfbc81c17c2.png

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.

Fabian_Weller
Participant V

How will New Lines be handled?

Jonathon
Participant V

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:

2X_9_9aa580debd9aa0264360b310f5c53120ac828675.png

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

Steve
Participant V

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

Status changed to: Open
Pratyusha
Community Manager
Community Manager