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}}?

This is very important! No, not like that. This is super, mega, incredibly important!

And here’s why:

The fact is that often when developing complex applications, the structure of the application becomes neurotically ponderous. If you don’t structure it, it becomes very difficult to work with it. Now many people use the section elemet for this purpose. But this misuse creates an additional burden that could easily be avoided if it were possible to use the comments that Wappler sees.

This situation is particularly acute when developing SPA, PWA, and mobile apps, Since all the key elements are placed on the same main page.

What need:

  1. Element of the normal comments. It is displayed as a self-contained element in the app structure. Its properties display the content of the comment. In the code, this is a normal string comment.
  2. The element comments-section. In the app structure, you can place any other app elements inside the element and collapse it to hide it when working (just like sections are working now). Its properties display the content of the comment. In code, these are two lowercase comments (beginning and end) that frame a piece of code that goes inside an element in the application structure.

Given the benefit of this in development compared to the ease of implementing this feature it can be given the highest priority