Easy way to add colour to TEXT_ICON background?

[gcor71]

The default behaviour of TEXT_ICON() generates an icon with a grey background.
How might I either set the colour OR mimic the behaviour of TEXT_ICON using and SVG image?

 TEXT_ICON(INITIALS([memberFirstName]))

Linking @Kirk_Masden @Jonathon @Mike_A @Rifad as I've been reading and admiring your expertise in images and dynamic SVG.

[Suvrutt_Gurjar · Accepted solution]

Simply use format rules on the column with TEXT_ICON(). An example above.

Format rule for the above column as follows

You could  of course do more wonderful things with an SVG.

[Suvrutt_Gurjar · Accepted solution]

Simply use format rules on the column with TEXT_ICON(). An example above.

Format rule for the above column as follows

You could  of course do more wonderful things with an SVG.

[gcor71]

Excellent!  I tried exactly that earlier but the preview only showed a tiny dot in the image... I can't have been doing it right!!

Followed your example and !00% success (of course 🙂 ).

Thank you!

[Suvrutt_Gurjar]

You are welcome.

[gcor71]

OK - so maybe a little to excited!

Format Rules work as expected when viewing the TEXT_ICON in a Detail view.  However, using a Card view (list, photo or large layout) it's rendered as a grey circle with a tiny format dot at top right (what I saw before).  

I'd rather not use the Deck view which DOES work, as want the gallery effect you get in Card view.

Any suggestions?  Would an SVG solution avoid the issue?

[Suvrutt_Gurjar · Accepted solution]

I believe the TEXT_ICON was primarily made for deck and detail views. With your intention of using it for card views, yes, it is giving issues. Card views have certain peculiarities and one needs to work with a bit of trial and error in certain aspects.

Anyway, you could use an SVG code something like below to get the TEXT_Icon effect in the card view.

CONCATENATE("data&colon;image/svg+xml;utf8,<svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 80 50"">
<circle cx=""50%"" cy=""50%"" r=""20px"" fill=""rgb(67, 135, 191)""/>
<text font-family=""Verdana"" font-size=""5px"" text-anchor=""left"" fill=""white"" x=""33%"" y=""50%"">",[Name]," </text>

</svg>")

In the card view it looks like below 

. You may need a bit of playing around with the code to get the name properly centered.

[gcor71]

and again... thank you.

[gcor71]

I went with the following - nice result.

CONCATENATE("data&colon;image/svg+xml;utf8,<svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 80 50"">
<circle cx=""50%"" cy=""50%"" r=""20px"" fill=""rgb(67, 135, 191)""/>
<text font-family=""Verdana"" font-size=""21px"" dominant-baseline=""middle"" text-anchor=""middle"" fill=""white"" x=""50%"" y=""50%"">",INITIALS([_ComputedName])," </text>
</svg>")

[Suvrutt_Gurjar]

---

@gcor71 wrote:

I went with the following - nice result.

---

Looks great.  Nice work.👍

For a variety,  you could change rgb( ......) values to different colour shades for different rows. You could use for example one colour shade for odd row numbers and another for even row numbers. Of course,  more imaginative implementations are possible. 

[gcor71]

My thinking too.  I played with it further and created code to assign one of 16 shades to a row, based on the key (a unique number, no text, in my case).

I hardcoded the colour names in SWITCH for clarity.  ChatGPT provided the list of contrasting shades colour names.  I added a grey stroke border to the circle to help make it stand out where the shade is too close to white to be distinct.

Lovely to be able to evolve the solution in this way!

[Note to anyone re-using the code snippet - remember to replace "&colon," with a single colon character.  The community forum renders the colon in this way here, but Appsheet errors if not changed back.]

CONCATENATE("data&colon;image/svg+xml;utf8,<svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 80 80"">
<circle cx=""50%"" cy=""50%"" r=""30px"" stroke-width=""3"" stroke=""rgb(119,119,119)"" fill=""",
SWITCH(
  MOD([memberID] - 1, 16) + 1,
  1,"Lavender",
  2,"MistyRose",
  3,"LightYellow",
  4,"PaleGreen",
  5,"HoneyDew",
  6,"LightCyan",
  7,"AliceBlue",
  8,"LightGoldenRodYellow",
  9,"LemonChiffon",
  10,"PapayaWhip",
  11,"MintCream",
  12,"PaleTurquoise",
  13,"Thistle",
  14,"BlanchedAlmond",
  15,"PeachPuff",
  "OldLace"
  ),
"""/>
<text font-family=""Verdana"" font-size=""32px"" dominant-baseline=""middle"" text-anchor=""middle"" fill=""rgb(119,119,119)"" x=""50%"" y=""53%"">",UPPER(LEFT([memberFirstName],1))," </text>
</svg>")

[Suvrutt_Gurjar]

Wow! Great! 

Keep up good work. 👍