What is the best way to embed the menu in your app?

[StevenM]

Hello fellow Bubblers / xbubblers

I am now at a stage where I am starting to build administration templates and wanted to see what others had found the best way to go.

In Bubble it is easy enough to crate a reusable menu element and just stick that into the app - create once use everywhere.

With Wappler it is not that simple, but easy enough to create a menu and navigation, but not sure how to use it.

Do I simply create a base admin template with navigation and just use that as a template for all pages and essentially copying the page, each time I want to add a new page or is there some other method, like a php include?

Thoughts?

[ben]

I am not a Bubbler, hence I have no idea how Bubble functions.

In Wappler, there are two ways to achive what you want:

1. use serverside includes
2. create a Single Page App

Of the two, my preference goes out to a SPA where the index file acts as a template.

[StevenM]

Thanks @ben My thinking at the moment is that each section in the admin as a bit of stuff going on, so create a SPA for each section.

Example each of these sections would operate like a SPA.

1. • accounts/ account.php
2. • createstuff/ create.php
3. • someotherstuff/ stuff.php

Is there anything wrong with this?

[Teodor]

Hello,
Here’s explained how to do this with serverside includes. Quite easy to save the menu include and reuse it on the pages:

Server Side Includes (SSI)

It is very common in web development that you reuse a component on different pages, so that when you change something it is being updated everywhere. In Wappler you can create and re-use server side includes (ssi) on different pages across your site. This could be any element from your page - for example your header with the navbar: [image] The first thing you need to do is to select the component: [image] Then click the move to include file button: [image] A confirmation dialog appears. …

[mebeingken]

I think one “gotcha” comes with routing and a single included file containing the links, presumably used in each of your distinct SPA’s. The routes produced assume that this is a single SPA, and thus do not work when moving from one SPA to another.

So, a single SPA works great. Multiple SPA’s with their own menus also works great. But multiple SPAs with a common menu is not something I’ve cracked yet through the editor.

[StevenM]

I think I will go the mini SPA route as it appears to work best, luckily each section has its own menu with some small commonalities.

But I have to say I am really loving using Wappler, BUT and I say this with some qualified experience there are some UI elements that could really do with some rework. I started in the tech industry as a usability and user researcher 10+ years and some of the UI elements and places,ents in the app really do not make any sense and can drive you up the wall, especially if the intention is to attract more no code developers.

The following element is a case in point, and I spent literally hours late at night trying to figure out why my menu was not behaving when I followed the instructions to the letter.

And the culprit was this:

What the heck is this hanging around, I asked myself so I thought I would click it. Clicked around and previewed in different screen views and couldn’t figure it out especially when the following makes perfect sense and it looked like my version of Wappler was broken - i am still convinced it is

So I carried on and it appeared my menu had stopped behaving for the life of me and for many cups of coffee and for hours I could not get it to collapse. I couldn’t just leave it because I had to find out what I had done so I would not do it again

Then I had a thought, “surely not!”, and yes I was right this “Expand” control contravened all the other controls in this section to relate to the app screen preview control all the way across the park at the top of the screen. Arhhhhhhhh

Has the “Expand” control been ordered to self isolate from the rest of its friends or was this a “it seemed like a good idea at the time”?

Let me also add, its ok to provide two methods in a UI process especially when they are related, but choosing one over another can quite often cause more usability issues than it solves!

[Teodor]

Hello, you can activate the expand option for the selected screen size at the top of the Wappler window.
On your screenshot (in the code) i see it is set to expand at xl size.

So select the screen size (Wappler screen top), where you want it to expand and click the checkbox in app structure.

[StevenM]

I also realised that you can pass variable data from a SSI header menu to the page it is included in. That is pretty handy and assume by doing this I am not doing anything that will be problematic.

[TomD]

@mebeingken

But multiple SPAs with a common menu is not something I’ve cracked yet through the editor.

This sounds like a problem I came across when trying out SPA’s a while ago. I referred to this post some time later and @Teodor said the issue had been fixed . I haven’t tried SPAs since then. Is this the same issue?