Dynamic addition for different component types based on user input

[msheikh94]

Hi all, I am fairly new to WeWeb, love it! but I am struggling with this and I don’t know if I am trying to build this in the right place, however what I am trying to do is to build an interface for a students to share their medical cases…the thing is that I want to give them the freedom of adding different components in the order they want,

for example: a heading then an image then text,or an image then a caption then a text or a heading.

here is an example of what I want to achieve

[dorilama]

It’s all about how you structure the data. At minimum is an array of objects whith at least an id and type property.
To render it you bind the array to a container so that it will be repeated for each object in the array. In the container you conditionally render the elements based of the type of the object in the context

[Broberto]

Also you could use kanban to make this draggable, that would be hot!

[msheikh94]

@dorilama @Broberto thank you! and yes I thought about using a kanban! it would be awesome, it’s just that I don’t know how to insert different field types in the array of objects,as an example how would I insert an input text component then an upload an image component in the array

[Broberto]

What I would do, is structure the data as follows, this will get a little advanced, so sorry in advance

defaultItems variable (type array)

Based on the type, I would create one kanban item, with all the items inside, so, there would be all of these in one div

Then I would dynamically hide, based on item.type within your Kanban context, each part, so if item.type = “text” display the text etc…

This could be a way, but I’m not sure if that would work, it works just in my head

In your case, it would be enough to bind different labels and icons, for one kanban item

[msheikh94]

@Broberto looks good! Thanks a lot! I will give it a try and get back to you!

[Broberto]

It definitely is possible, I just did it

[msheikh94]

Tried it without the Kanban now and it worked! you are the absolute best! thank you!

[Broberto]

I’d say, try it with the Kanban, it has a lot of potential! And if possible, let us know how it goes

[Broberto]

You can even stack the stuff, and reorder, so this is cool)

[Broberto]

I also know @jptrinh made something similar, but without drag, might be time to up your game!

[jptrinh]

Awesome stuff!
@Broberto said it all