Moving Element in App Structure and DOM Also Move Comment Above

LIke many of us, I switch between the menu system and source code… that is what I LOVE about Wappler.

Being a tidy soul (which app development forces upon us!), I have various comments in my HTML source code, epecially just above a key structure such as field input:

<!-- *************** Mobile Phone ***************** -->
<div class="container container_field" id="c_contact_mobile_phone">
... and 20 more lines of code

<!-- *************** Address ***************** -->
<div class="container container_field" id="c_contact_address">
... and 20 more lines of code

and I often find myself moving these structures around in the App Structure/DOM interface. It is a great way to re-order things really rapidly…

… except that the comments just above don’t get moved at the same time, so my source code ends up with just a bunch of comments hanging around commenting the wrong thing.

So this is a feature request that when elements are moved in App Structure/DOM windows, they take with them any comment found on the line above.

Hello Anthony,
This will be quit challenging as some people comment their code differently:

<!-- Home Section Start -->
<section id="home">
<!-- Home Section End -->
<div id="somerandomdiv">

So what will happen is when you move the random div, it will move the comment above it.
If you want to use comments and move them - do this in code view.

Let me expand on the request.

An alternative could be.

For App Connect components add a comment field in the properties of it. So people can add the html comment they want. Then you could enforce the format of the comment and pick it up also when rearranging in the app connect structure.

For non app connect elements show the comment item in the DOM panel and allow multiple selection before moving -> CMD/CTRL+left click

1 Like

Maybe it will be even better if we allow comments in the App Structure.
So you can add a comment as “element”

and we can prefix them with something unique so we know those are our comment nodes, like ## :

<!-- ## Starting new section ## -->

All sound fab ideas!

Just as long as the comment moves when the main container it refer to moves…

All in one simple action! :slight_smile:

Actually a just remembered that we planning to have a special “group” component. Which can also work as comment group but also will be able to group your data.

so instead of having:

<dmx-value id="apples"></dmx-value>
<dmx-value id="bananas"></dmx-value>
<dmx-value id="carrots"></dmx-value>
<dmx-value id="beans"></dmx-value>

you can have:

<dmx-group id="fruits" title="List of fruits">
  <dmx-value id="apples"></dmx-value>
  <dmx-value id="bananas"></dmx-value>
<dmx-group id="veggies"  title="List of veggies">
  <dmx-value id="carrots"></dmx-value>
  <dmx-value id="beans"></dmx-value>

this will also make them collapsable but will also change the expressions scope to be grouped as well.
So instead of having many vars as global they will be grouped now:


Yes to that also! :slight_smile:

1 Like

So you could also have {{receipe_items.apples.value}}?