"Group" component for grouping non-html elements on page

[Ray]

Hey Team

I am building a complex registration form (system) for a major charity and I am experiencing some annoyances.

1. the app browser keeps collapsing which means I have to keep expanding to find where I was. If I open a section keep it open till I close it don’t auto close - not helping just wasting time.

2. The form contains a lot of moving parts which requires a lot of defined vars (shared data across form elements etc, editable tables etc)

3. Collapsable sections non html
   It would be nice to group non html functions into collapsable sections. for example all vars together. If we can create our own collapsable groups it would be even better.

See what I mean…

Thank you, please.

[bpj]

Certainly item 3 is easy to achieve. Just add a ‘section’ component to your page and put all your variable in there. I’m pretty sure there’s lots of us that use that method to organise our pages. You can even convert them to conditional regions if you want them not to be rendered at all in some circumstances:

[Ray]

Good call. Thank you.

this will work a treat form my low traffic clients.

Only problem is I am adding unnecessary html bloat to my page and when I am doing large volume client work this cost money.

I am asking for a solution that does not add bloat.

I have clients that do millions of visitors to their micro apps. (Redbull, IMG, Disney, Li & Fung, The Sports People. Extra bloat costs extra money which we have to answer too. We usually build in React and Vue. Wappler is faster off the line and we have created auto scaling deployments for it on both Digital Ocean and AWS. So far we have used it on small internal ad campaigns with great success. We want to start using it on larger projects.

In React and Vue we use VS Code and it knows how to fold the appropriate sections and keeps it in memory. We want the same thing for Wappler.

[Teodor]

This has been discussed before also, but we still have not implemented it (yet). Check George’s reply here:

Moving Element in App Structure and DOM Also Move Comment Above

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> <dmx-group id="veg…

Is that similar to what you need here also - grouping different elements (vars etc.) in separate groups?

[bpj]

Understood. But if you’re so concerned about HTML bloat, I wouldn’t rack up so many variables. You could use a local storage/session manager element to store all your variables in one place without a separate tag for each.

[Ray]

Thanks Teodor

Looking forward to seeing this implemented.

[nickneustroev]

Bump

[Alexander_Paladines]

Bump! Please bring it to v6