Invalid options display for inserting inside a data detail element

[mebeingken]

Wappler Version : 5.1.0
Operating System : mac
Server Model:
Database Type:
Hosting Type:

Expected behavior

Only valid options should be displayed when adding elements

Actual behavior

When adding an element with a data detail selected, invalid options are shown. Further, there should be zero options allowed to be placed INSIDE a data detail element.

How to reproduce

Right mouse on data detail (with intention of adding element below or above it.

UI defaults to inserting invalid elements inside the data detail:

[bpj]

I noticed this with the browser component too.

[brad]

@mebeingken

Further, there should be zero options allowed to be placed INSIDE a data detail element.

Why? Curious as I add stuff to the inside of a data detail region all the time. Mainly paragraphs, flex containers and forms.

[mebeingken]

It may in fact work functionally, I haven’t tested placing everything inside.

It just feels as though elements should only be parent to elements with a direct relationship to enforce some order.

For example, a marker should absolutely go inside a google map element, but why would a google map element be child to a data detail?

[sid]

I think this has been allowed since the first version.
The idea being to put elements with bindings from data detail inside the data detail, even though it is neither required, nor makes a difference.

I had assumed initially that putting element inside data detail would allow me to place bindings like col1, col2 etc directly, like in a repeat.
But instead it has to be a fully qualified value like dd1.data.col1 etc.

So I would also prefer if data detail component does not allow nested/child elements at all.

[George]

@mebeingken

For example, a marker should absolutely go inside a google map element, but why would a google map element be child to a data detail?

Yes that is true for elements with direct relation.

However data detail is a very generic div container that you can place everything in.

In general there are two ways of using such generic containers:

1. Unlimited way - when adding data detail for example directly - then you can add almost anything inside it. This is old and not preferred way indeed as you are breaking rules and hierarchies. But we left it for people who feel restricted.

2. Extending existing component like Bootstrap column and giving it “data detail” functionality. This is done when you choose “Convert To” from the property inspector. This is the preferred way as you retain your hierarchy and nesting rules. You can choose then to insert only valid children for the original Bootstrap column but also enrich it with generic data detail functionality.

[Teodor]

Fixed in Wappler 5.1.1