App Structure Folders for Page Non-Structural Items

Now that I’ve had a couple of weeks time to “cut my teeth” in Wappler, I am seeing things come together quickly and the need for organization in the App Structure pane is becoming more apparent. In my first 5 days of learning, I was able to put together a stock dashboard that pulls in most active stocks, stocks with the most volume, top gaining stocks and biggest losers. I can also filter these lists with the click of a button (or using a REAL TIME search bar that also pulls in current news and company information). If it weren’t for Wappler, there’s no way I would have been able to do this. By the way, I know in the context of what Wappler is capable of, this is pretty basic stuff, which underscores even more the need to keep things organized.

Here is a look at the App Structure before even getting into the real structure of the page. I’d love to put all my variables in a folder, and all of my API Data Sources in a folder.

If we had the ability to group these “non-structural” items (e.g. most of the stuff in the Data and State Management sections) into folders just as we can with Server Connect actions, that would be awesome and would go along way in making things more manageable.

:sunglasses:

You can click and drag them into any order you wish.

Edit: I just reread your post. That would indeed be a good feature.

Hi @brad

I am not talking about re-ordering them, I already do that. I am talking about putting them into folders that can be collapsed and expanded. :slight_smile:

1 Like

Yeah, I misread your initial post. Great idea.

1 Like

Actually you don’t need to put all the app connect components at the top. You can embed them within the html structure wherever you want and need them. So this way you can also organize.

Btw feel free to post your project in the #showcase category, i’m sure everybody will love to see it and learn from it.

2 Likes

Thanks for the tip @George. Personally, I would love to have this stuff neatly nested in folders at the top of the App Structure pane. It makes more sense to me that way. It doesn’t strike me as quite as logical to have these kinds of things within the HTML structure. Just a thought!

i understand what you mean. Like grouping them automatically inherited / nested to „variable“ or „API Data Source“, with same icons… but as @George mentions it can be dragged into another. But i see both points and I refer to Photoshop or in general all Adobe Products, where these Groupings/Collapsible Groupings are very helpful.

image

Very much like Groups in Photoshop. However, I am not proposing that anything is automatically grouped. I like having the freedom to structure my projects in a fashion that is logical to me. So maybe I would like to create a variables folder? Or a datasources folder? Or maybe a folder for the components responsible for a specific function in my app?

Well just add “section”s then those are semantic html elements with no other rendering so you can use them as grouping.

Also if you give them IDs those will display nicely as names.

5 Likes

using section is a good idea! so maybe no need to invent the wheel

That’s actually a brilliant idea!

1 Like

Beautiful! Thank you @George , that is just what I was looking for.

4 Likes

Yeah it works like a charm! Wish I had known this little trick long time ago! Thanks @George!

2 Likes

that looks a lot better than before… expect the section icon which doesnt really reflect its „content“… :smile: which is logic of course.

Although the solution looks great on the surface, I have a problem with this approach, especially after reading https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section which states:

  • Do not use the <section> element as a generic container; this is what <div> is for, especially when the sectioning is only for styling purposes. A rule of thumb is that a section should logically appear in the outline of a document.

We all tend to forget the importance of proper document outlining to SEO and Assistive Technology. For more information on this, have a look at https://www.controlsquare.com/strategy/why-its-important-to-have-a-structured-document-outline/

As an example, the following is the document outline for wappler.io:

From this we can see what search engine bots and other screen readers see.

I am not sure of an alternative, maybe we should add a heading to the section that is readable by screen readers only, something like <h4 class="sr-only">Program Variables</h4>

Interested what others have to say.

Edit: Maybe we should be using a ‘div’ instead.