Forum Academy Marketplace Showcase Pricing Features

One page app, create navigation back system with duplicate

Need help Mobile
#1

Hello,
Context :
It’s a meetup.com-like app, so user can join groups, and groups can contain users.
It uses only hidden/showed groups with a “states” system. No pages (since it’s recommended on the forum for better performance.

When navigating through the app, each time a page is seen, a state “mode” is toggled, depending on the group, it shows or hides.

For the groups “group page” and “user profile” that both show a group or user datas depending on a new state “data” in addition of the state “mode”.

scéma
scéma1816×760 17.8 KB

What I want to do :
I’m struggling with the “back” button. I want to create a button that sends back to the previous layer.

What I’ve tried :

  1. Using only states, so I would create a state “previous_modes”. Each time you go to a new layer, it adds the current state. To go back, simply run through all the previous states.

Issue : The list ignores duplicate, but if a user want to see group page -> then see a user -> and then see a group again… it does’nt work.

  1. Creating a separate database called “navigation” where new entry is added each time a new layer appears, with fields like the order, the current state, the user associated, the group or user object if it’s a “group page” or a “user profil”.
    Then when you click on the back button, it does a “search for” to delete the last entry, and switch the states.
    Capture
    Capture949×136 9.32 KB

Issue : the performance is crap, if I click too fast to navigate, there is a conflict and the app crashes.

I’m quite desperate to find something, the last resort is to create a separate page for group and user.

Thank you.

#2

Use easylist in bdk utilities plugin and this would be a piece of cake. To see a real time implementation, check out the bdk native app

#3

Do you have any tutorial ?
Does your plug-in cost $16 or there is more ?

#4

Yes check out this thread for more info: [New Plugin] Bdk Utilities
Complete documentation with demo app editor & link is available here

The entire utilities plugin costs $16 only one-time. Easylist is just one of the things in this plugin.
If you want to try, you can buy via $4/mo and then unsubscribe / resubscribe if happy. Bubble will only charge you pro-rata for the number of days used.

#5

You say that the undo is up to 5, so the user can back up to 5 times ? Or I can remove normally an element from the list like a classic list with no limits.

#6

Undo is upto 5 times (not an unlimited one). So if you Go to A -> B -> C -> D -> E
then doing first undo at E will go to D, twice to C, thrice to B etc…
For undo you don’t need to remove any element etc. it will simply revert to its previous value.

If you’re asking about normally adding / removing items from lists you can obviously do that like a classic list with no limits.

#8

I’ve seen your documentation, however I don’t get how can I do a nav system. Should I create a state with an easylist type ? Can you give me a hint ?

PS: I don’t see any workflow action to remove an item from the easylist
PS : I try to set a new list to the easylist, when I’m in the inspector it shows me the new elements in the list, however when I try to get the last item in the next step, bubble considers the previous list elements.

Capture5
Capture51346×303 6.56 KB
Capture6
Capture61641×340 18.4 KB

Thanks :slight_smile:

#9

Easy list is probably the best way, here is how/why ive done it without a plugin

  1. in order to support multitasking my app has multiple sections that must store their state when hidden (including contextual back button use) and resume their navigation state when they come back. For instance if they switch to a new section,the backbutton will go to the last page of THAT section.

  2. in order to provide a native experience, i restore every navigation state, when the app is reloaded. They always resume right where they left off.

  3. I animate everything (versus show/hide), again, to provide a more native experience to smart phone users.
    (using only show/hide actually would make this dramatically easier)

My app has two layers

“Pages” which are groups of “views” that relate to a specific function

“Views” which are sub-pieces of those primary functions.

In my header i have a few states

Numerical Page state so i know which page im on
Numerical View state so i know which view of the above page im on
A visibility toggle for the back button (only shows when needed)

When the back button is clicked, it runs a workflow based on the combination of current page/view to go back to the appropriate place.

There are a limitless number of ways to do this, this has worked very well for my specific needs.

1 Like
#10

It makes sense. I didn’t even think about it…
That’s a great way to do that, Thank you for sharing :slight_smile:

#11

Here’s how I do it:
Forget all states etc. to show / hide groups. Place an easylist element which outputs the list of currently visible codes (each corresponds to a group). On your groups the condition is to show it when the easylist’s list of codes contains its code(s) and hide it otherwise. That’s pretty much it.

  • To navigate from any view to another all you need is to add / set the easylist codes using element action.
  • A back button would simply run the element action ‘revert this easylist’

Personally, I’ve found it to be much faster, simpler and flexible than doing it pure-bubble way using states

1 Like
#12

Thank for your response, that’s what I did :grinning:
Did you see my lasts two PS at the end of my response ? Can you help ?

#13

Oh yeah I have to add that. I recall this was a feature request by someone else too in the forum.

I think what’s happening is that bubble doesn’t wait for the previous action to finish before moving to the next one i.e. its’ treating it as asynchronous. Maybe use the ‘Do when’ easylists’ value is changed condition?

#14

Hi Gaurav,

Can you explain how you set up the list that corresponds to each of the visible groups? I don’t really understand what you mean by “codes.”