Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

Okay, so you're wanting to display certain groups when you click on elements?

Yeah, correct? Yeah. Exactly.

What do you have set up at the moment for that?

So right now we have this repeating group here with this record. And when I go into the workflow let me try home repeating group.

It's probably nested in the top there.

I think it is this one. So when I click on a property, I have it set to scroll to the top of the page, sets the index to property and then actually pulls in. I created this custom state property Active, which is the current cell's property. And then it automates to show the property information page that I showed you earlier.

Okay.

Now at the moment I'm actually just running into some problems with it. It's just not working. So now when I click on it.

Nothing happens.

Debugging

I think nothing is happening but it might just be loading very slowly. Just refresh it.

I think you might have two workflow actions off your button click. That might be one of the we can check that in a moment. Just something I noticed might be the case from looking at your workflows, but let's see what went happen on the front end.

Yeah, so I'm clicking on it now and everything else is working. Like these menu items, the components that will work. But yeah, the actual click on the thing is not working. Okay.

Can you go back into the editor and if on the design builder you select the right group and then click on Start Edit Workflow. Just let me watch what happens again when you do that. Okay. And you've got some conditional, the ones to the right of it in the front end. Can we see what happens in the preview? If you turn on the debugger for Bubble might just be easiest for you in the editor to click preview and it will load in the debugger on that page.

So just click this.

Yeah, but you probably disabled because it would be why is it not loading in? I saw it loading. Do you have a bug in installed that disables the debugger? Because it might be a bit frustrating with the mobile view because it's always going to sit at the bottom of the screen. So in order for your mobile navigation to work, you might disable it somehow.

Let me see if I come out of the console. If it's no, I don't know.

Can you try hitting the preview button in the editor again. You'll see that the debugger loads in as a query string. There we go. Okay, so if you click on step by step for me, please click on the or is it still trying to load in the page at the moment?

It's just loading.

Okay. While it's loading, can we see what the one error is? It might be that it's just telling you that there's a lot going on. Okay. Now it's just a dark theme. The text plugin is fine, you can probably ignore that.

And then if I click on this yeah.

It might not do anything while this it's still loading something right at the start. Can we refresh it? Just click next. And again.

Just keep going now.

Yeah, click again. There's certainly a lot going on when the page loads in. Is all of that present in the template that you purchased or is it stuff you've added in?

No, I've pretty much only just added design stuff so I don't think there's a whole lot extra happening there.

Okay. Because it just gets stuck at this point. Because what I'm looking for is to see whether there are any recurring workflows like run every 5 seconds, which doesn't seem to be just to try and work out what's making it go so slow. You do have a lot of elements on the page. I mean, that's the nature of building a one page app you get the benefit of the changes between the pages. You can animate them, it's a lot quicker, but it's a lot to load in. To start, can you click on run? Just see if that clears it. Okay. Can we try reloading the page and just seeing if we can get the Bubble loading bar at the top to go across?

Yeah, I'm just going to wait for it to hit then and see if I change anything. Okay.

Yeah. That is quite peculiar because having watched the workplace go through there to do with the splash screen but that's all clear.

I don't want to rule out my...

I think it's something that's probably come along with the template, just really slowing things down.

If you go into the Bubble editor and then settings sorry, logs is what I meant to see. Okay. Real time actually sent over. Okay. It looks like it's loaded, actually.

Bubble debug not working

In my experience, the creep of the loading bar, if it's really slow like this, it can mean that it's detached on what's actually going on. I think maybe Bubbles coded it so that it continues to move even if nothing's happening, if it's moving so slowly. I doubt that it's going to complete itself. Actually. Can we try something if you change in the URL mode to False, I have a feeling that it's struggling to run the debugger because that's like a CPU intensive, server intensive. So I'd say that's because there's a lot going on when the page loads because I think the debug is quite a critical tool, it would really help in this situation. But if it can't load both, I think there's just a lot going on.

Would your advice be to purge or try to purge things from the here that I just will never use, just to try and bring things more streamlined? I've kind of left all these views as they are just because I never knew if I need them or not, if I want to reference them. But I can probably look through these and get rid of a good number of them that I'm probably never going to go for.

Just out of interest, can you click on one of the views that you've not used and we'll just see if it's loading in on with the page. And then if you click on layout in the Inspector panel, the big grey panel on the right hand side. Okay. Now, it isn't loaded on the page, though.

Is it worth you taking a look at the console and seeing something here?

Yeah, I'd say the place to look is the debugger console.

We can't load it in, right?

No.

Yeah, I'm not sure.

I think it's a slim chance. The performance issue is with your browser, although you can really max out the RAM in Chrome quite easily. I think that it is a Bubble. It's their end of things with just the amount of computing power that it's required to just open it on the stack.

If you want my opinion, if I was in your shoes, I would take what you like about this template and if what you do is a lot simpler, start from scratch in the new Bubble app and just build... If this template gives you enough of a Bubble education to understand how to get the navigation with floating groups, custom states for transitioning between pages, I'd be tempted to build a less bloated version of it.

Right. And if I go down that road, how simple is it to kind of copy and paste elements and workflows from one app into the new one?

If you go into the Bubble editor, I'll show you the different ways you can do that. So your regular keyboard copy and paste, your browser copy and paste. That works fine with elements. So if you want to copy workflows, then you have to use the Bubble edit menu, having selected an element.

From here.

Yes. I was thinking of a different way. If you go into the design panel and show me a button or something that's clickable.

Yeah. So let's say I wanted to do the home and I wanted to bring across maybe this thing here.

Yeah. So you've got a copy with workflows menu, and then in the new app you can do a paste with workflows, but you might find that doesn't really save you that much time because you have different databases, different custom states. Personally, if I was in your shoes, I would see it as an opportunity to build something from scrap that's just what I need, rather than something that's bloated. But also by building it myself, I know how everything works, so I've got a better hands on being able to develop it and push it further in the future.

Yes.

But I will take the principles of this app, the floating groups and navigation. You seem to have got a good understanding of custom state. That's all going to be really helpful in building your own one page app.

Okay. All right. I think that's good advice. Yeah. I think that you raised a couple of good points there, which is longer term. Whilst it might be slower to build the first version, it's going to, I guess, set me up for a much better understanding of how everything is tying together the future development. So I think that's a wise point.

UI templates & UI kit recommendations

Yeah. And how confident are you with UI design and just kind of making a page look good?

Reasonably confident. It's a little bit easier than it used to be, but I remember I tried to use it a while ago and it was a lot hard to get everything lined up. But this template has a lot of good formatting things like how to get it to be like in the dark mode and stuff like this. So it's good to go back and reference have this template here as a reference to see how they set it up, and then I can just try and copy it across.

Okay. Because again, if I was in your shoes, I would be looking. Say I am someone who knows if something looks good but can't start from a blank canvas themselves. So I will use sites like UI8.net or ThemeForest, and you can buy a template or UI open in Figma and build it up in Bubble. That's my workflow.

Okay. And the name of that.

The really good one, is UI8.net for between $20 and $50. There's some really nice web app and mobile app, UI kits on there that's really good.

When I run into a similar I guess I would not run into the similar issue with having a lot of bloated stuff in there because they just purely elements.

Yeah. Most of them are in Figma, which if you're not familiar with it, it's basically like a Photoshop but for UI design. So you're not importing their file into Bubble, you are using their files or reference. But these are my font sizes, typography, padding, all of that.

Right, okay. And then you just try to take that across into Bubble.

Yes. And again, my personal preference is to build it manually because then I know what's going on.

Right, okay. So there's no importing of those elements in the Bubble from Figma. Sure. It's just copying it step by step.

There is an automated process, but then you are likely to end up with a lot of the bloat. So like, the Figma design may have many more nested groups than you actually require to achieve the same design in Bubble.

Yeah. Okay, that makes no sense.

I've got some videos on those topics so I can send those across to you and if you're curious yeah, that's.

Absolutely perfect because I think I'm definitely going to take your advice, which is to strip a lot of this stuff out by starting again. And if I can get a jumpstart with some good elements that I don't need to have to start from scratch with because I think I have the similar thing as you, which is I know when it looks good and I know when it feels right, but yeah, blank canvas is scary.

I think one final thing to add to that is you're right. A one page app does offer the best experience on mobile because it performs much more closely to an actual app rather than a web app. But yeah, it's even more important for it to be lean because you're having to load in all your screens at one time. So I think you will get further by building it from scratch and just having what you need. Okay.

And I'm guessing from what you're saying, there are things like on the appearance channel, I think a lot of them, they have load up on screen. Load. I'm saying load too many times. Yeah, but like sorry, on the layout. Yeah, it's like most of them are visible on page load. I guess this feature here becomes very important to have nothing loading that isn't essential at the moment.

Not quite. You can approach that in its like cascading nested nature. So as long as the top parent isn't visible on page load, you don't need to uncheck that for all of its children. You could just do it on top level.

So as long as in this very top level, as long as this is not loading on page load, then all its children will be fine.

Yes. You'd be creating far too much work for yourself to check the children, unless you parents load in without the children.

Yeah, that makes sense. And then this will really help to resolve a lot of that bloatedness as well for loading stuff that is not necessary. Yeah, makes sense. Cool.

Well, I think that's our time. Sorry it's not been such a promising session, but I'll send you some pointers in an email just what I would do if I was in your shoes.

Yeah, no, I mean, whilst it wasn't the exact topic that we originally wanted to discuss, I think you've given me some really wise insights into how I should approach it, so I appreciate that. Nonetheless, I think it's just as valuable.

 

Latest videos

lockmenu