# Add component using scripting

**URL:** <https://forum.inductiveautomation.com/t/add-component-using-scripting/61183>\
**Category:** Ignition\
**Tags:** ignition81, scripting, perspective\
**Created:** [June 24, 2022, 6:55pm UTC](https://forum.inductiveautomation.com/t/add-component-using-scripting/61183 "2022-06-24T18:55:22Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Thiago\_Vilela](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/thiago_vilela/32/37352_2.png) [@Thiago\_Vilela](https://forum.inductiveautomation.com/u/Thiago_Vilela)\
**Post date:** [June 24, 2022, 6:55pm UTC](https://forum.inductiveautomation.com/t/add-component-using-scripting/61183/1 "2022-06-24T18:55:22Z")

</div>

Hello everyone,

I need to add a new component like a Label (“X”) every time that user clicks in some area in the picture like the “X” in green below.  
If the click again in the “X” will remove the Label “X”.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/2/c2d964c2936a5b3bdab1b168ad5e641549adf3c6.jpeg)

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [June 24, 2022, 6:56pm UTC](https://forum.inductiveautomation.com/t/add-component-using-scripting/61183/2 "2022-06-24T18:56:12Z")

</div>

Use the ‘View Canvas’ component.  
[https://docs.inductiveautomation.com/display/DOC81/Perspective+-+View+Canvas](https://docs.inductiveautomation.com/display/DOC81/Perspective+-+View+Canvas)

---

<div class="post-metadata">

**Author:** ![Thiago\_Vilela](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/thiago_vilela/32/37352_2.png) [@Thiago\_Vilela](https://forum.inductiveautomation.com/u/Thiago_Vilela)\
**Post date:** [June 24, 2022, 7:01pm UTC](https://forum.inductiveautomation.com/t/add-component-using-scripting/61183/3 "2022-06-24T19:01:33Z")

</div>

Thanks, but I don’t know how can I do that by script?  
How can I create a new label component by script?

I would like to add a new “X” every time the user clicks on some part of the script.

I can collect the X and Y position from the user’s click.  
vX = event.clientX  
vY = event.clientY

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [June 24, 2022, 7:05pm UTC](https://forum.inductiveautomation.com/t/add-component-using-scripting/61183/4 "2022-06-24T19:05:48Z")

</div>

The view canvas has a property `instances` that represents the inner views it contains. Your inner view can detect if it’s clicked and broadcast a message back to the parent, telling it to remove that instance. The view canvas itself can intercept clicks (meaning they weren’t caught by an inner view) and create an instance at the given location.

---

<div class="post-metadata">

**Author:** ![Thiago\_Vilela](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/thiago_vilela/32/37352_2.png) [@Thiago\_Vilela](https://forum.inductiveautomation.com/u/Thiago_Vilela)\
**Post date:** [June 24, 2022, 7:57pm UTC](https://forum.inductiveautomation.com/t/add-component-using-scripting/61183/5 "2022-06-24T19:57:27Z")

</div>

Thanks for the answer, it was very helpful.  
Could you tell me how to add a new instance when the user clicks?

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [June 24, 2022, 10:46pm UTC](https://forum.inductiveautomation.com/t/add-component-using-scripting/61183/6 "2022-06-24T22:46:09Z")

</div>

Not exactly, but it would basically involve creating a Python object with the same structure as the existing elements in the `instances` array, then adding it to that list.