Native app layers

Hey,

I am new to Bubble so please bare with me.

I am trying to use the native app function. After lots of hits and misses, I have successfully managed to integrate the first 5 pages of the UI into a hide/show commands in the workflow under the Index tab. However, the app is starting to be more and more complicated, and I can’t see my self successfully integrating the pages and making it to work only by showing/hiding content on the Index screen.

Am I missing something? Is there a better way to structure UX with the native app without using the go to page function?

Thanks in advance.

Use custom states to toggle visibility, otherwise every time you show something you’ll have to hide everything else and it becomes a silly cumbersome process.

1 Like

@1danielbaker Great, thank you. Do you have a link to a guide on how to do this? Is it possible to toggle custom states with swiping left/right?

I have currently 5 group of pictures that I need to show when the user swipe left/right. Group B is under Group A. I set a custom state in the condition tab that when Group A is pressed Group B will appear. I have run it as a native app in the Bubble app on the iPhone, but without success, when I press Group A noting happens. Any ideas?

Do I need that all groups will be on the same index page? Is this the only way to do this? I have many pages and groups that I need to toggle visibility with, and it will be really complicated eventually.

Unfortunately, there isn’t a good (free) tutorial on custom states that I’ve seen in the documents. It is definitely needed.

The good news is there is the Freebie Mobile template that you can use on a sample app to better understand the concepts. Grab the template and take a look at the workflow. You’ll see how the custom state is used to change a value and show and hide things based on that.

3 Likes

@jasonwojo Thank you. How do I set a custom state that will show/hide my groups described above?

As you see in the image, I created a new custom state under images and named it ‘Showing’. However, nothing is happening when Group A is clicked.

The Groups are arranged by order of visibility i.e send to back/send to front. I am not sure if this is affecting the end result.

Create a new app with the Freebie mobile template to see. You need to use conditional formatting. I’m not exactly following what you are trying to do, but this is a sample of how it works.

Custom States

  1. Create a custom state of Current View
  2. The values in Current View could be a word or more easily is if it’s a number.

Workflows

  1. Run a workflow so that if “Home” icon is pushed, Custom State’s value is “1.”

Conditional Formatting

  1. Now create a group called “Home,” and use conditional formatting so that the group is only visible if “current view’s value is 1.”

Using conditions on elements and workflows is a good tutorial for conditional formatting if you haven’t done it yet.

1 Like

@jasonwojo Thank you, it really helps. I will experiment with it. At the moment, I want Group A to appear when the page is loaded.

On the workflow screen I have a setup that when the page is loaded Group A custom state is “current view” and the value is 1.

On the group conditional formatting I used “when group’s A current view is 1” then the element is visible.

I have run it in preview but the element does not appear at the head of the pile. I have several groups, can it be that because Group A is set to the back it won’t appear at the front of the page? or did I do something wrong in the conditional formatting above?

Thanks for the great help.

Are you having the other groups hidden when Group A is shown?

1 Like

@potentialthings Yes I have managed to fix this by hiding the other groups when the page loads. Then, I followed @jasonwojo guide on how to write conditional formatting and workflow and it’s working great.

Thanks again for your help!

2 Likes

This topic was automatically closed after 70 days. New replies are no longer allowed.