Error building SVG

AppSheet AppSheet Q&A
1

Hi guys,

I am trying to build a dynamic SVG with a concatenate, this works:

Screen Shot 2022-09-27 at 9.40.15 PM.png
Screen Shot 2022-09-27 at 9.40.15 PM.png872×319 35.3 KB

But this does not:

CONCATENATE("data&colon;image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 420'><rect x='10' y='10' width='220' height='20' stroke='white' stroke-width='1' fill='none'/></svg>")

Screen Shot 2022-09-27 at 9.43.30 PM.png
Screen Shot 2022-09-27 at 9.43.30 PM.png866×234 67.8 KB

2

Huh?

3

Opps, pasted the same image twice. The columns used to build the svg have app formulas, could that be the culprit?

1 Like
4

Can you paste here the code from the expression that’s not working?

5

Here is the code:

CONCATENATE("data&colon;image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 420'><rect x='",[etiqueta_x],"' y='",[etiqueta_y],"' width='220' height='20' stroke='white' stroke-width='1' fill='none'/></svg>")

And this is the error message:
Expression ‘CONCATENATE(“data:image/svg+xml;utf8,”)’ was unable to be parsed: The given key was not present in the dictionary..

6

Apparently, there is no problem with your syntax.

CONCATENATE(
 "data&colon;image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 420'><rect x='",
 [etiqueta_x],
 "' y='",
 [etiqueta_y],
 "' width='220' height='20' stroke='white' stroke-width='1' fill='none'/></svg>"
)

Try contacting support

7

I suspect the problem is with the double-quoted strings that begin with a single quote. The parser library doesn’t like that combination, as I recall. It may also not like those that end with a dangling single quote. Notice how those single quotes have been removed in the error text.

1 Like
8

Ahh!! You are right! I remember this but when dealing with a Webhook JSON body, that’s why I didn’t make the relation to it.

Try adding a space after the apostrophe:

CONCATENATE(
 "data&colon;image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 420'><rect x=' ",
 [etiqueta_x],
 "' y=' ",
 [etiqueta_y],
 "' width='220' height='20' stroke='white' stroke-width='1' fill='none'/></svg>"
)
3 Likes
9

Hi @SkrOYC that did remove the error message. But the svg will not render because of the space. This is how finally got it to work:

substitute(CONCATENATE("data&colon;image/svg+xml;utf8,
<svg xmlns='http://www.w3.org/2000/svg' viewBox='-226 0 752 180' 
font-family='sans-serif' text-anchor='middle'>
<rect x='@",[etiqueta_x],"@' y='@",[etiqueta_y],"@' 
width= '@",[etiqueta_width],"@' height= '@",[etiqueta_height],"@' 
stroke='black' stroke-width='1' fill='none' />","<rect x='@",
[pregunta_x],"@' y='@",[pregunta_y],"@' width= '@",
[pregunta_width],"@' height= '@",[pregunta_height],"@' 
stroke='black' stroke-width='1' fill='none' />",
" </svg> ")
,"@","")
3 Likes