Is it possible for a Custom Component to dynamically render other Custom Components within it?

Developer corner
1

Hi All,

I’m building a custom canvas component - the majority of which is established and working well. I wanted to dynamically load other custom components based on user actions. Is this possible?

For example - the user can click a button to add my “CustomComponent-2” (installed to WeWeb via my GitHub repo), or press another button to add “CustomComponent-3”. They can even add multiple instances of the same component.

Is this at all possible to load a custom component as a child of another component on the front end based on user interaction?

2

Ha! Great question @EnigmaXXIII. I don’t think it’s possible at the moment. Maybe if “CustomComponent-2” has a dropzone? :thinking:

Let me check with the tech team and get back to you on this one.

3

You should be able to, @aurelie mentioned this to me once but I never done it. You can have a look at the WeWeb’s button implementation, which has this pattern of 2 icons and a text ww-button/src/wwElement.vue at ee9ed7eaa036bd1e9d6c5559b223f72817add8d1 · weweb-assets/ww-button · GitHub but I’m not sure how this would work with other non WeWeb components, e.g custom ones etc. But in theory you could reference them by the name.

4

Hi,
it is possible to render a child component, but creating a new one is a editor only action, as it required to update your WeWeb database.
If you want this action to be an editor one then yes. If you want it to be dynamic its not possible at the moment.
What we usually do is create a bunch of some and conditionally render one or the other depending on a condition, and passing data to handle several instances

Which usecase seems to be yours?