I would like to dynamically add and remove components to my project. I tried using ViewCanvas and it was working great until I realized you can’t use percentages for the height and width and since I can’t get the height and width of the parent witch is not fixed, I can’t just calculate the percentage and hard code it.
Now I would need find another solution. I’m going to try and just use a coordinate container, but I don’t know how to add them in dynamically like I would a ViewCanvas.
In JS, it would look something like this:
let p = document.createElement("p");
document.body.appendChild(p);
How would I do that in perspective?
Sounds like you might be better off looking at creating your own module
https://docs.inductiveautomation.com/display/SE/Introduction
Otherwise, can you put your components into a flex container repeater whose instances are created dynamically?
1 Like
Hi @ToMakPo, depending what you are after specifically you could use the dashboard component to do this (it can then also be edited from the client UI if you wish). Then just wrap all your custom components as ‘Widgets’.
However, the major caveat is that (in my experience) it can be a bit slow to render client side. Also, it could be an over-complicated solution depending on what the end goal is.
If you are aiming to have the widget a specific size relative to the parent, you can just have it span the appropriate number of cols/rows in the dashboard component. It is likely not the ideal solution though, but I thought I’d suggest it just in case it would be helpful. @nminchin’s suggestion is probably your only other route.
how might one go about utilizing a flex container (or flex repeater) to create the instances dynamically
I did mean to say flex repeater, I’ve fixed in my other post.
It depends how you want to create the instances. Where is your data coming from?
Usually you would use a named query binding on the instances property with a script transform to then use the result of the query to create and return the array needed.
i have a work around for this im using myself:
i created a style named 'FixCanvasWidth'
and injected this into backgroundimage (theme.css works too i guess, but since you gotta give the style might aswell do it here)
}.psc-FixCanvasWidth > div { width: 100%; height: 100%; pointer-events: none; }{
Give this style to the canvas.
Then you also need to give every view that you want to display in the canvas a style
pointer-events: auto if that view requirs click events
No worries on the flex type 
right now, my thought was that id use an accordion container (doesnt really matter which) add a parameter on that (or in the UDT) to indicate the number of sensors (unless you think itd be easier to count the number of data type instances in the Tag Tree) and from there use that number to populate the number of components needed. to then in turn be used by some script on startup or accordion selection