Nested repeat regions with different view partials

I’m evaluating if Wappler is suitable for building a simple CMS, which generates a simple landing pages, containing a list of blocks - text, link, image, collapse etc.
I read an amazing guide on Nested Repeat Regions, but it solves only part of the problem. In this example all repetitive items are of the same view type. When creating a landing, all items might be different.

Server connect returns a list of blocks (text block, link, image), and also block options for each block. But this options are different for text block, link block etc.
Also, every block requires different view component - for link it will be button, for text it will be paragraph etc.

Any ideas on how to do it in Wappler?
I thought I may use SSI inside a repeater, but it looks impossible.

I intend to keep landing pages data in a database, with the following tables

  1. blocks (id, type_id),
  2. types(id, type_name), like button, image, text, collapse
  3. options (block_id, option_name, option_value)

An example of server connect return is below:

{"get_page_blocks":[
{"block_id":5001,"name":"Button"},
{"block_id":5003,"name":"Text"},
{"block_id":5004,"name":"Button"}],
"repeat_block_options":[
{"name":"Button","block_id":5001,"block_options":[
{"id":101,"button_type":"link"},
{"id":102,"link":"http://example.com/landing"},
{"id":103,"link_color":"#ffffff"},
{"id":105,"link_bg":"#7795f8"}]},
{"name":"Text","block_id":5003,"block_options":[
{"id":111,"text":"hello World!"},
{"id":112,"text_size":"m"},
{"id":113,"text_color":"#ffffff"},
{"id":115,"text_bg":"#7795f8"}]},
{"name":"Button","block_id":5004, "block_options":[
{"id":101,"button_type":"email"},
{"id":102,"email":"johnsnow@example.com"},
{"id":103,"text_color":"#ffffff"},
{"id":105,"button_bg":"#7795f8"}]}]}

Maybe there is a better way of doing it. I appreciate any advise.

In wappler you can use pretty much any javascript condition/ expression.

I would be very simple to use a condition to change the output based on the data either by doing it conditionally {{name=‘Button’?‘output1’:'ouput2}} or by using multiple regions hidden/ shown conditionally via the data returned.

I would tend to go for the multiple sections, one for button, one for paragraph etc then use their dynamic attributes to hide/ show based on the data response as that would probably be more flexible in your example

Thanks, @Hyperbytes !

This option - {{name=‘Button’?‘output1’:'ouput2}} - I didn’t quite understand how I can use HTML partials as output1, output2 etc. I can put different text, but how to use different templates for link?

As for hiding sections, I . can not predict number of blocks per page. It can be 3, or it can be 10. How exctly I can hide/show blocks?

I attach an example of such landing page, comntaining seberal blocks.

At its most basic form you would use something like this as the content of :the inner html

{{name=‘Button’?‘My output here in pure html’:‘Some different output in html’’}}

Standard javascript conditional statement syntax

HOWEVER

I would probably favour two different inner html paragraphs for each choice then use the Hide/ Show attributes to turn them on/ off dependent on the condition (which i think is your name field)

So you would have something like
image

Applier
d to each paragraph conditionally showing/ hiding them