Grouping Elements & Further Navigation Issues - Native App

Hi Guys,

I am totally new to the Bubble programming and I find it extremely interesting, however due to my lack of experience I’m facing some difficulty and have not been able to identify the exact solutions from the forum. I am currently trying to create a native app.

Issues

  1. I have been able to group the different elements on the page together and named it as Group A. This index page would be the first page a user sees when logging in or is the landing page.

I need to make another page for the user to further explore different parts of the app but since it’s a native app I cannot make it as a new page - “Change page actions should not be used in a native app page”.

How can I work further on the app from the same page itself, how do I hide these and work on the next stage. I have read I need to setup workflows but I am not sure how to put these group of elements aside and start with the next phase.

Sorry if it seems to beginner level but I wish to further use this app and hope you can guide me in detail.

Best Regards
Karan

You can use workflows to practice Showing and Hiding different groups. I have circled where these are located in the workflows. As you can progress you can also use “Custom States” which you can search for in the forum.

Also, I recommend looking at and playing with this Example App by Bubble. Go to the Seeker page and look at how they allow for a one-page experience with looking for trainers…

You can edit and play with it however you want as it is an example

2 Likes

Side note,as you go to hide and show different groups, you can put groups on top of eachother, but make sure they are not within eachother (the red line showing if you are placing something inside a group)

1 Like

Firstly thank you very much for helping me out and for the link to the video, it helped greatly.

I understood how the group works now and I was able to make my second page as a group on top of the other group like you mentioned and work further.

Now when I try to preview the page - the second group I just created shows first.

I tried to set - “When the user logins in - go to page index” but this doesn’t work because change page actions should not be used in native app page. When the user logins to my app I want him to go directly to my index page where my group A is located at.

I tried to set a custom event and use the Show/Hide elements and used the group but unfortunately it stills shows the group 2 and not the first group which will be the start page of the native app.

Am I doing something wrong, I also tried show Group 1 and hid Group 2, still shows only group 2 unfortunately.

Thanks for helping me again.

I made an example showing how to show and hide groups using Custom States, as well as using Show/Hide actions. Custom States are better to use, but take a little longer to learn and get the hang of.

In the example check out the Workflows used, checkout Group 1 and Group 2’s Conditional tab, and noticed that all the groups are made ‘Not visible on page load’
I included a When page is Loaded Show Group 3 to help you with the specific problem you mentioned.

You can also search the forums here for “Show Hide Group”, “Custom State” to learn more. Also some Bubbler’s have created online courses that can help

2 Likes

Hi gf_wolfer,

Thanks a lot for helping me, I was out of station and just checked your post. Thanks a lot for helping me with the project. I think I can say I’m starting to get the hang off it.

Even after I did the workflows and hid the groups, I noticed that when checking the preview the second group would always show. This was kind of frustrating but I realised it’s due to not unchecking - This element is visible upon page load.

Now it’s working, thanks a lot for helping again.

Kind Regards,
Karan

1 Like