UI-SVG - elementid

dashboard SVG Node:
Events Property:
Selector field:

I have created a selector to access multiple id's as per Christmas lights example.

my selector field -> [id^=Output-5]
does select correctly all Id's starting with "Output-5....."
the returned msg.elementId however returns the selector field not the 'element ID'.

This may however be what it should do, if so then field should be called 'selector' but it would be more useful to return the ID of the element selected out of the many possibly.

Is there a way to get the actual element id that was selected. I have more than 60 elements that I want to use multiple actions on. I don't want to have to add hundreds entries.


Hi Daniel,
I detected this issue already some time ago.
You can see it is fixed in the "panzoom" branch on Github (which is the branch for our next major release):


But it is a breaking change, as you can see in our wiki explained. Therefore I can only fix it in a major release. And I need to find time to finalize that release first ...

Hi Bart, @BartButenaers
ill have a look, thanks again for your help.
kind regards Daniel

Would like to publish version 2.0.0 of the SVG node as soon as possible, because it contains a number of changes:

  • Pan and zoom support
  • Touch events support
  • Number of fixes

But what still bothers me is the breaking change, since there are almost 2800 downloads of the 1.x.x version. Hate it when I will disrupt a large number of flows. That is the reason why I keep doubting to publish it ...

The breaking change summarized:

  • Currently the output message contains:
    • The CSS selector of an SVG shape in msg.elementId
    • The msg.selector is undefined
  • In the new version the output message will contain:
    • The element id of an SVG shape in msg.elementId
    • The CSS selector of an SVG shape in msg.selector

Could I perhaps add a checkbox:


I could automatically select that checkbox for old existing nodes. For new nodes it would be unselected by default.

Does anybody see a disadvantage in this approach?
@Steve-Mcl: what do you think about this?

Thanks !!!

1 Like

You could add “(legacy)” behind it to discourage new users from clicking it?

1 Like

or "Enable legacy mode - CSS selector in msg.elementId. (deprecated)"
so folk know that it will go away at some point in the future.


Hi Bart, I'm not certain many people will be using this for downstream actions. It's not an obvious and easy thing to describe to those who dont use that feature. If / when people raise it as an issue, we can simply apologise profusely and point them to the documentation.

And while it is a breaking change (never great) is it for the better.

If you do end up adding the check box - I agree it should state legacy / depreciated & perhaps a tooltip explaining how to prepare for its imminent removal.

1 Like

If at all possible its good to leave existing nodes working, then later remove the option to even select that mode (so all new instances use the new mode), and then finally remove the old code.

Hi Steve,
Can't live without that checkbox. Please forgive me :wink:
Have tested it with a couple of old SVG nodes and seems to be working fine ("panzoom" branch). Have also added some extra info:

Now it feels much better to start finalizing the release version ...

1 Like

No worries Bart. :smiley: :smiley:

Good stuff.

1 Like

hopefully it isn't in bright orange !

Hey Dave,
Very brave of you to share your allergy to oranges with us :rofl:
If you have no allergy to tomatoes, perhaps I can make the checkbox label red?

Apologies, I forgot it is your national team colour. :slight_smile:
(Not sure why you want to draw extra attention to that feature that is deprecated)

1 Like

That makes sense. Have removed the color.

I hope you mean red, for our red devils. And not orange from the the Dutch Eleven team :wink:

1 Like

I so need a coffee this morning...


This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.