Hello all,
I want to use this javascript piece of code in an SVG file on a scada Widget:
((UID_TAG_Number.toUpperCase()).match(/.{2}/g).join(‘:’));
but it does not work.
I am thinking it is the {2} parenthesis, so what is the escape character used in Cumulocity?
Hi Gabriele, in your pasted code the quote characters used around : are wrong and cause invalid token error (it might be just due to pasting issue, but please check). Have you tried (UID_TAG_Number.toUpperCase()).match(new RegExp('.{2}', 'g')).join(':')? Is the expression used inside {{ }} interpolation or as a value for an ng-... attribute?
Hello Pawel,
thank you for your answer.
For some reason, while copying and pasting the code on this forum they changed the quotes, the correct ones are “”, I tested this. The ‘’ do not work I can confirm this.
Also “(UID_TAG_Number.toUpperCase()).match(new RegExp(‘.{2}’, ‘g’)).join(‘:’)” does not work. I ended up doing a very long and complicated if statement to achieve the same thing. So even if I solved my own issue the problem IMO still stands.
Hi Gabriele, it should work fine without new RegExp part:
<svg>
<text x="30" y="30" font-family="sans-serif" font-size="18px" fill="red">
UID_TAG_Number, before: "{{ UID_TAG_Number }}", after "{{ ((UID_TAG_Number.toUpperCase()).match('.{2}', 'g').join(':')) }}"
</text>
</svg>
(
UID_TAG_Number is linked to Notes field)
How exactly should I add it under this <svg:tspan id=“tspan321”> because I can’t get it to work unfortunately.
Thank you for your help.
Hi Gabriele, hard to say, as it works fine for me, both in an attribute and content:
with just:
<svg>
<text x="30" y="30" font-family="sans-serif" font-size="18px" fill="red">
UID_TAG_Number,
before: "<tspan id="tspan{{ UID_TAG_Number }}">{{ UID_TAG_Number }}</tspan>",
after "<tspan id="tspan{{ ((UID_TAG_Number.toUpperCase()).match('.{2}', 'g').join(':')) }}">{{ ((UID_TAG_Number.toUpperCase()).match('.{2}', 'g').join(':')) }}</tspan>"
</text>
</svg>
and lax code sanitization option in the widget to avoid dropping id attribute.
Maybe the issue is you use svg: namespace, that’s the only difference I can see now.
Would it be possible to get a full minimal example SVG file to try to reproduce the issue on my side?
Yes, sure. That formula will have to go under <svg:tspan id=“tspan321”> and go substitute the whole and complicated if statement that is under the mentioned tag.
(https://fs-lt.tttech.com/s/6jK9Y7J28CqKj4E)
Thank you in advance!
Thanks, I see the issue now and my previous suggestions were not correct. However, it’s not the matter of escaping some characters. The problem is that AngularJS expressions do not support regular expressions (see e.g. How can I use that regex in angularJs expression? - Stack Overflow), so - as we can only modify the svg - I thought about passing the expression as string to match, but it doesn’t support g flag. matchAll can take the expression and match it globally, but it returns an iterator. One way of getting values from iterator is to use spread operator, but again it’s not supported in ng1 templates. Another one is Array.from but it’s not directly available, so you’d need a hack:
{{ [].__proto__.constructor.from(UID_TAG_Number.toUpperCase().matchAll('.{2}')).join(':') }}
then the tag number is upper cased and split into groups of 2 separated with colon:
Hello Pawel,
thank you for getting back to me, I tried the formula that you said but the result that you have on your side it is not what I see on my side. Do you have any other ideas?
Hi Gabriele, sorry for delay. Looks like the expression has been sanitized. Have you tried with none option in “Select code sanitization option” in the widget settings?
This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.