# Programatically adding element in node-red-contrib-ui-svg

**URL:** <https://discourse.nodered.org/t/programatically-adding-element-in-node-red-contrib-ui-svg/17554>\
**Category:** General\
**Created:** [5 November 2019 16:46 UTC](https://discourse.nodered.org/t/programatically-adding-element-in-node-red-contrib-ui-svg/17554 "2019-11-05T16:46:51Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![mikeyd0407](https://avatars.discourse-cdn.com/v4/letter/m/3bc359/32.png) [@mikeyd0407](https://discourse.nodered.org/u/mikeyd0407)\
**Post date:** [5 November 2019 16:46 UTC](https://discourse.nodered.org/t/programatically-adding-element-in-node-red-contrib-ui-svg/17554/1 "2019-11-05T16:46:51Z")

</div>

Hi All

I want to make an injection node that modifys the inner html/SVG code within my node-red-contrib-ui-svg element to add an extra shape to my SVG drawing when triggered

Can any one provide me with an example code to programatically add a shape (e.g. a rectangle) to the SVG dashboard (within the node-red-contrib-ui-svg) I think it cab be done by using the "set\_attribute" (this will add the attribute if it does not already exist).... but I am not sure on the required coding??

I think this is acheivable, but I can't figure out the method?

Many thanks

Michael

---

<div class="post-metadata">

**Author:** ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)\
**Post date:** [5 November 2019 16:59 UTC](https://discourse.nodered.org/t/programatically-adding-element-in-node-red-contrib-ui-svg/17554/2 "2019-11-05T16:59:33Z")

</div>

Do you need to add new elements arbitrarily?

To turn the question around... why wouldn't it be sufficient to add the shape beforehand and just hide it by default? And then toggle it with a message.

It's just not clear what your use case is. 🤓

---

<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 November 2019 17:19 UTC](https://discourse.nodered.org/t/programatically-adding-element-in-node-red-contrib-ui-svg/17554/3 "2019-11-05T17:19:33Z")

</div>

Hi Michael,  
In our current version of the svg node we have not added the ability to add shapes via input messages. Reason is simple: once we do that, users will want thise shapes to become clickable and so on... Perhaps we will add that in the (near) future, but at the moment Steve and I are rather busy...  
P.S. @Steve-Mcl correct me if incorrect or incomplete!  
Bart

---

<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 November 2019 21:05 UTC](https://discourse.nodered.org/t/programatically-adding-element-in-node-red-contrib-ui-svg/17554/4 "2019-11-05T21:05:28Z")

</div>

What @kuema says is quite logical and relevant as you will be able to address the hidden element by name/class. I do this in the HMI sample to show/hide pages.

If you truly need to add / remove elements dynamically, it is possible but you lose some of the nice features of the node like events as they are generated at initialisation only.

If you search the forum I did post an example using the `update_text` command to add SVG elements into an empty `<g>` on a HMI sample

I also added an alias for update\_text (I can't remember off top of my head - something like innerHtml - check the built in documentation).

---

<div class="post-metadata">

**Author:** ![mikeyd0407](https://avatars.discourse-cdn.com/v4/letter/m/3bc359/32.png) [@mikeyd0407](https://discourse.nodered.org/u/mikeyd0407)\
**Post date:** [6 November 2019 08:56 UTC](https://discourse.nodered.org/t/programatically-adding-element-in-node-red-contrib-ui-svg/17554/5 "2019-11-06T08:56:29Z")

</div>

Hi All

Thanks for the information. I was looking to see if there was a method to dynamically add an element.... but wasn't aware of the limitations. I wanted to try and come up with a method of populating an SVG page from a database or CMS. e.g. the dynamic floor plan is loaded for a certain user and then each of the sensors set on top in their relevant locations for that room.

As you say, I could use a generic floor plan with say a hundred (hidden) sensors/icons, and then just unhide any required ones and change the X,Y position and colour etc....

Can a displayed image/Icon be changed e.g. from a square to a circle (or is this restricted in that the shape has to be loaded before hand)??

Many thanks & great work guy

Cheers

Michael

---

<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:** [6 November 2019 09:16 UTC](https://discourse.nodered.org/t/programatically-adding-element-in-node-red-contrib-ui-svg/17554/6 "2019-11-06T09:16:52Z")

</div>

> [@mikeyd0407](#):
>
> Can a displayed image/Icon be changed e.g. from a square to a circle (or is this restricted in that the shape has to be loaded before hand)??

- if it is an image of a square (or anything else), you can `set_attribute` to set the source dynamically
- if its a font-awesome font you can use `update_text` to change the `fa-book` to `fa-something` (@BartButenaers we really should collect all the examples from the beta and release threads)
- if its an existing element in SVG source you can (as per documentation) `set_attribute` or `update_text` to your hearts content.