Tutorial for single-page web app?

Hi there, I’m new to Appgyver, coming from a brief experience with Bubble. I’m not a dev, and I’ve been dabbling with no-code tools this year. I searched the forum but didn’t see what I was seeking.

I’ve gone through the Appgyver docs and one thing that I couldn’t get clearly was how to make a single-page app, for example a web dashboard with a menu on the left-hand side. There is the tutorial about tabs using the row container, but there wasn’t much focus on creating the UI and associated logic. I get the concept of containers as divs and flexbox, but struggle with creating the logic for the visibility Boolean of the UI components based on click events, etc.

I got used to the UI concept two ways in Bubble; stacking the components on the Z-axis, and stacking the components on the Y-axis, (which I liked much better). If there are any Appgyver tutorials going through this I’d be happy to be pointed to them.

I will have more questions after I get past this part :slight_smile:

Thanks!

Fellow Bubble user here. Unlike in Bubble, in AppGyver, navigation between pages is instantaneous, because AppGyver makes a native app. So you may not necessarily need a single-page app with groups (which is often needed in Bubble for instantaneous nav). That said, if you do want a single page app in AppGyver, you should be able to change the visibility of containers using page or app variables.

Here’s one way of doing this:

  1. Make an App Variable (container1visible) of type true/false, and bind the visibility of container 1 to that App Variable
    image

  2. Now to hide the container, just change the App Variable to false like this
    image

I tested it and confirmed it works.

This approach is kind of like using custom states in Bubble.

1 Like

Thanks so much Nihal, I got this to work after some messing around :slight_smile:
But I actually used page variables, because I will have a few different pages in the app, with variables specific to them.
I’m now finding lots of fun things in the Composer view, and then with the web versus mobile preview haha. Turning off the navigation header and menu makes things a lot nicer. I’m trying to figure out the formula for auto left / right margins to make the web view look better.

1 Like

One way to make the margins appear on left and right only on web would be to give components (or preferably a Container that includes all other components) max width of e.g. 800px. Then those should be inside another Container that aligns items horizontally middle.