Making "Dashboards with dynamic text overlay on SVG images" even more amazing (flexible).

AppSheet AppSheet Q&A
1

I’m exploring the exciting possibilities outlined by @Suvrutt_Gurjar to implement text overlays on SVG images. I am struggling to make my implementation flexible - and would appreciate any pointers.

I’ve set up my App as outlined and it works like a charm to overlay the [Attribute] text on the SVG.

I want the [Attribute] to pick up the COUNT of rows in a Slice - so I can how the number of rows related to the subject of the SVG (# rows Overdue etc). Despite many attempts I can’t achieve this. If I put the COUNT expression in the [Attribute] formula field, it treats is as text and doesn’t calculate the expression. I’ve tried editing the COUNT into the existing CONCATENATE express (putting the slice name in the [Attribute]) but that either fails to do anything, or behaves as before and treats is all as text.

Any suggestions on how to achieve what I want?

The original code from Suvrutt…

CONCATENATE("data&colon;image/svg+xml;utf8,<svg version=""1.1""
     xmlns=""http://www.w3.org/2000/svg"" xmlns:xlink=""http://www.w3.org/1999/xlink""
     width=""435"" height=""253"">
  
     <image x=""0"" y="" 0 "" width=""435"" height=""253""
      xlink:href=""",[Attribute B64],"""/>
     
    <text font-family=""Verdana"" font-size=""25""  x=""170"" y=""140"" 
               fill=""rgb(46, 139, 87)"">",[Attribute],"</text>
 </svg>")

One of my (many) attempts… (where [Attribute] = “Overdue Training”, the name of a valid slice).

CONCATENATE("data&colon;image/svg+xml;utf8,<svg version=""1.1""
     xmlns=""http://www.w3.org/2000/svg"" xmlns:xlink=""http://www.w3.org/1999/xlink""
     width=""435"" height=""253"">
  
     <image x=""0"" y="" 0 "" width=""435"" height=""253""
      xlink:href=""",[Attribute B64],"""/>
     
    <text font-family=""Verdana"" font-size=""25""  x=""170"" y=""140"" 
               fill=""rgb(46, 139, 87)"">", "COUNT(",[Attribute],"[_ComputedKey]) ","</text>
 </svg>")

…and, the result…

gcor71_0-1696531937029.png
gcor71_0-1696531937029.png858×368 11.1 KB

Thanks in advance for your generosity in sharing your wisdom.

2

You could try the COUNT() function in a text type column as follows. Basically you wrap it with TEXT()

TEXT(COUNT(…))

So your [Attribute] column could have expression in the pattern TEXT(COUNT(…))

Alternatively you can use the COUNT function in code itself as follows

CONCATENATE(“data:image/svg+xml;utf8,<svg version=”“1.1"”
xmlns=““http://www.w3.org/2000/svg”” xmlns:xlink=““http://www.w3.org/1999/xlink””
width=““435"” height=”“253"”>

<image x=““0"” y=”" 0 “” width=““435"” height=”“253"”
xlink:href=“”“,[Attribute B64],”“”/>

<text font-family=““Verdana”” font-size=““25"” x=”“170"” y=““140"”
fill=”“rgb(46, 139, 87)”“>”,COUNT([Related Products]),“
”)

In the example above [Related Products] is a list type column. So COUNT() can be directly applied on that column.

In the tip example also if you see various types of information ( date, digits, text) is shown. All are wrapped with TEXT().

1 Like
3

OK - so slightly in awe that @Suvrutt_Gurjar has replied to me :slightly_smiling_face: but… unless I’m missing something, this isn’t quite working. My table ‘App_Menu’ is defined as shown.

gcor71_0-1696588959800.png
gcor71_0-1696588959800.png1312×912 63 KB

The App Formula in [Attribute] is
TEXT(CONCATENATE(“COUNT(”, [Slice Name], “[_ComputedKey])”))
(i have also tried without the TEXT() wrapper).

The result indicates Appsheet is correctly constructing the App Formula I want - but it’s not being executed as a formula. How can that be addressed?

gcor71_1-1696589079010.png
gcor71_1-1696589079010.png1010×340 22.3 KB

4

Your expression appears to be incorrct in syntax. Slice name seems to be a text column. It seems you are trying to compute a list by combining slice name from a column value but Appsheet syntax does not work that way.

One cannot pull a slice name to be used in an expression from a column by using CONCATENATE().

A COUNT() function will work with the following syntax

COUNT(Slice_Name[column name])

Slice name needs to be directly mentioned in the expression.

1 Like
5

Ah. That’s the issue. Thank you!

1 Like