# UI-SVG - elementid

**URL:** <https://discourse.nodered.org/t/ui-svg-elementid/24004>\
**Category:** General\
**Created:** [1 April 2020 00:58 UTC](https://discourse.nodered.org/t/ui-svg-elementid/24004 "2020-04-01T00:58:22Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![greenembrace](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/greenembrace/32/42414_2.png) [@greenembrace](https://discourse.nodered.org/u/greenembrace)\
**Post date:** [1 April 2020 00:58 UTC](https://discourse.nodered.org/t/ui-svg-elementid/24004/1 "2020-04-01T00:58:22Z")

</div>

Hi,  
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.

cheers

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [1 April 2020 05:47 UTC](https://discourse.nodered.org/t/ui-svg-elementid/24004/2 "2020-04-01T05:47:12Z")

</div>

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** _):

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/f/cfda6c8f7e05fd851509321d5e1e6e6359e9ea25.png)

But it is a breaking change, as you can see in our wiki [explained](https://github.com/bartbutenaers/node-red-contrib-ui-svg/wiki/Breaking-change-version-2.0.0). Therefore I can only fix it in a major release. And I need to find time to finalize that release first ...  
Bart

---

<div class="post-metadata">

**Author:** ![greenembrace](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/greenembrace/32/42414_2.png) [@greenembrace](https://discourse.nodered.org/u/greenembrace)\
**Post date:** [1 April 2020 05:53 UTC](https://discourse.nodered.org/t/ui-svg-elementid/24004/3 "2020-04-01T05:53:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [2 April 2020 20:30 UTC](https://discourse.nodered.org/t/ui-svg-elementid/24004/4 "2020-04-02T20:30:04Z")

</div>

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:** _

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/c/dcecbda6b665cef909f445fafa723c0fe26b8d90.png)

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 !!!

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [2 April 2020 21:03 UTC](https://discourse.nodered.org/t/ui-svg-elementid/24004/5 "2020-04-02T21:03:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [2 April 2020 21:35 UTC](https://discourse.nodered.org/t/ui-svg-elementid/24004/6 "2020-04-02T21:35:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [3 April 2020 00:42 UTC](https://discourse.nodered.org/t/ui-svg-elementid/24004/7 "2020-04-03T00:42:32Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [3 April 2020 07:18 UTC](https://discourse.nodered.org/t/ui-svg-elementid/24004/8 "2020-04-03T07:18:35Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [5 April 2020 21:30 UTC](https://discourse.nodered.org/t/ui-svg-elementid/24004/9 "2020-04-05T21:30:29Z")

</div>

> [@Steve-Mcl](#):
>
> If you do end up adding the check box

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

- On the readme page a summary:

- On that [wiki](https://github.com/bartbutenaers/node-red-contrib-ui-svg/wiki/Breaking-change-version-2.0.0) link, I have also added a section about the legacy mode:

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

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [5 April 2020 21:32 UTC](https://discourse.nodered.org/t/ui-svg-elementid/24004/10 "2020-04-05T21:32:02Z")

</div>

No worries Bart. 😃 😃

Good stuff.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [5 April 2020 21:59 UTC](https://discourse.nodered.org/t/ui-svg-elementid/24004/11 "2020-04-05T21:59:22Z")

</div>

hopefully it isn't in bright orange !

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [6 April 2020 06:16 UTC](https://discourse.nodered.org/t/ui-svg-elementid/24004/12 "2020-04-06T06:16:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [6 April 2020 07:07 UTC](https://discourse.nodered.org/t/ui-svg-elementid/24004/13 "2020-04-06T07:07:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [6 April 2020 07:11 UTC](https://discourse.nodered.org/t/ui-svg-elementid/24004/14 "2020-04-06T07:11:47Z")

</div>

> [@dceejay](#):
>
> Not sure why you want to draw extra attention to that feature that is deprecated

That makes sense. Have removed the color.

> [@dceejay](#):
>
> I forgot it is your national team colour

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

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [6 April 2020 08:36 UTC](https://discourse.nodered.org/t/ui-svg-elementid/24004/15 "2020-04-06T08:36:59Z")

</div>

I so need a coffee this morning...

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [5 June 2020 08:39 UTC](https://discourse.nodered.org/t/ui-svg-elementid/24004/16 "2020-06-05T08:39:40Z")

</div>

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