Anybody experience wtih one page apps

So i want to make a one page app so i can wrap it into a mobile app, because i saw that when you use pages the app can crash etc.

Does anybody have any experience with one page apps? I know that i have use groups to show things and hide things. But i really do not know where to begin an what the logic behind this is. How does it work? And will it also work fine when you visit the app (as a website)via the internet if it is a one page web app?

I’m curious to have feedbacks about native apps built with mutlipe page.

I had my friend @Antoine3 that have experience some trouble using multiple pages on the Codeless wrapper leading to blank page.

What I’ve done for a single page application was to create a ‘Current Page State’ text variable on the root of the page (index, landing, etc…), then have other groups hide/show themselves depending on the value of the current pages state.

It seems to work fine in a web browser, if not faster! By having a single page application, everything gets loaded on first load vs loading a different page everytime.

I have not tried it with a native app yet, but I am planning to…

3 Likes

Hello @vnihoul77,

Does your friend @antoine3 also has experience with one-page apps?

No but I have if you need help

Yes, i want to make a one-page app, but i do not know where to begin. I even do not know how it works with all the groups and Page Statemens etc. Can you please clearify it step by step as i am new to Bubble?

Hey there :wave:

Using states is the key here, like mentioned above. Super quick when using it. No need to show and hide groups. Here is a video on how to use set states, this helps with one page apps. Set States FREE Video Tutorial 🎉

Hope that helps! :blush:

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

  • One-on-One Tutoring
  • eLearning Hub
  • Video Tutorials
  • No-Code Classes
1 Like

Hello @J805,

Thank you a lott man, with you video i managed to make it work. But on your video the page opens when you select an slidebarmenu item. I want to open the state when clicked on certain icons. Is this possible?

image
Like when you click the plus icon you will see a state, when you click the profile button you will see another state. How does that work?

Yes, that will work. For the workflow on each button the only step you need is ‘Set state.’

Change the state to what ever you. want it to be and then on the elements you want to show, add the set state in the conditional.

It’s the same thing with the menu but just triggering it with a button instead.

Let me know if you need an example or not. :blush:

I have created another group that is called Profiel_

but when i do the conditional it does not work, better said i do not know what to choose other than Profiel_:

image

and the last thing is this:

i do not know what to choose for the Value field?

For the set state ‘Pagina’ what was the ‘type’ you chose? I usually use ‘text’ type. Then in the value I can choose what I want it to say, if I want to display the ‘Dashboard’ page I would set the value to ‘Dashboard’.

So in your case, if you already chose ‘text’ you can do this:

Set state value: Profiel

In the conditional on the Profiel_ group say: Index’s Pagina is Profiel (Type out Profiel in text, don’t chose Profiel_ for your option)

Allright, so i just choose a value. I now understand it. you can just choose whatever you want right? Thanks a lot mate you helped me a lot. I hope i can still contact you if i have others questions!

1 Like

Of course. :blush: Post on the forum and I try to help out when I can, in-between sessions of course.

1 Like

Hello @J805,

As you may know i am busy creating a one page app with custom states. It goes quite good and the way i wanted it to be. Now i am facing a problem wich i dont know how to solve. First a had a app with just many pages and then it went well, now i changed it to custom states and now it does not work anymore. So i have a repeating group with images and titles etc. When you click on the image it needs to open a custom state with detailed information like price, title and more. The custom state does show up, but the information about the current selected item is missing. Whe i did this with a new page it all worked fine but not with custom states. Here you have some images of the custom state that opens when clicking on a item of the repeating roup:

image

This is the repeating group:

Hey there @samedgurses46 :wave:

I am booked the next few days with one-on-one sessions but I will try to respond in between if I have a moment. :blush: You are so close! Keep it up.

When you click on the repeating group, remember to send that data along to the group you want to display the data to.

Hello @J805,

Thank you for reacting, i am trying what you are saying, to send the data but now i see this:


I see the error on the left side, and i cannot select the following:

image

I hope you have some time in between your sessions :grinning:
Thank you!

You need to change the groups data type. Right now it’s just a photo. Click this button:

Allright i did that and the error is gone, but now is the question how i can get that data on the group. I set the type of the group to photo but offcourse there are more details like texts and digits, does the type of the group effect this?
and now i only choosed to display the in post_detail for the image, do i need to do this for all the information that i want to display?

Image of the post_detail group

I hope I don’t bother you!

Hey there :wave:

No problem, I will do my best to answer when I can.

Do you have each piece of data attached to the same data type? It’s hard to tell from these screenshots how you have your data set up.

Otherwise, you can create a set state on the page, send the data you need to there and then access it from there as well. Then you can access multiple data types. Does that make sense?

Using set states and groups is basically the same thing as a page, you send data to it like you would a page. It’s hard to tell with just screen shots.

Hope that helps. :blush:

Yeah it is also hard to explain with only screenshot, and as i am new to this , it is also hard for me to explain the problem. i have the link to my app:


the post detail is the group where i want to show all the details of the selected image
maybe it is better, if you have time, to check it like this way.

Do you have/know any video or other tutorial where they explain something like this?