đź—ş Build Better Navigation

Back to basics with a few tricks along the way.

Here are my Top 7 Navigation Methods, Tips and Tricks

15 Likes

Nice clean video, Robert! Didn’t want to watch when I saw it was 25 minutes, but you kept my attention.

Awesome…ya, I try to keep my videos as comprehensive as possible, but I should probably release some shorter content as well. At the very least, I include timestamps in the description.

Nice refresher @Robert_Petitto . Appreciated. Sometimes we forget how flexible Glide can be in terms of navigation. Out of interest, any specific reason why you set the “tracking columns” in the User Profile sheet to be user specific? I don’t think there’s a need for this since the rows are “per user”?

1 Like

Thanks! Really it’s just out of habit when using Google Sheets. If we are using exclusively Glide tables, then it’s not necessary. However, when sourcing an app from Google sheets, I like these types of columns to be user specific. That way this “temporary data” doesn’t live in the Google sheet. Keeps the Google Sheet tidier, provides a faster data calculation and mitigates any data tampering by anyone with access to the Google Sheet.

At the very least, having these type of columns be blue in the data editor is a visual reminder that this is temporary data.

6 Likes

Yes, and much appreciated. Those come in handy the second time through when trying to implement something.

1 Like

Great video :clap:.

1 Like

So I really liked the left/right button acting as a menu because I have two tabs right now and the only difference between them is one has an inline list that lists parts from one section, and tab two has an inline list that lists parts from a second section. But they all come from the same table.

In practice, though, it doesn’t work out for my situation, because if you scroll down in the list, you have to scroll all the way to the top to see the dual buttons again. There’s the floating buttons, but you cannot make a dual button float.

I guess I’ll just leave well enough alone!

Agree. This is where I’d use a bit of CSS to make the top element sticky:

Something like this (assuming the choice component is the first component on the screen):

[id*="screenScrollView"]>div>:nth-of-type(1) {
position: fixed;
width: 100%;
z-index: 100 !important;
//background-color:  rgba(0,0,0,.8) !important;
margin-top: -1%;
padding-bottom: 10px;
backdrop-filter: blur(10px);
}

Note, this doesn’t work well with any of the “Bold” themes because of the way the header resizes when scrolling.

5 Likes

Thank you; in general, I like to avoid CSS, but I will make an exception in this case!

Agreed. I use CSS when it improves user experience.

2 Likes

Yes, and it doesn’t always.

Here, it works great to freeze the top buttons, but my floating button gets pushed off the screen. You can just see the rounded corner of it here:
image

I found this on another post and it worked right… Go figure. Another reason I don’t like using CSS – I don’t know how it works!


div[id*='screenScrollView'] > div > :nth-of-type(1) {
position: -webkit-sticky;
position: sticky;
top: 0;
background: white;
z-index: 3;
}

AAAAnd sheesh. Went to another tab in my browser and when I came back, all the objects on my new tab were gone – and somehow replaced with other objects. No, I really DO NOT like CSS…

image

Looks like you replaced your details style layout with a calendar style layout. If you reselect Details, do the components come back?

1 Like

Thanks Robert, I actually didn’t select anything; I went to another browser tab to check the weather, and then when I came back to my app tab it was like that. I quickly selected, “Discard Changes” so I wouldn’t have to find out what else in my app might have been compromised, so I didn’t investigate further.

It’s weird if it automatically converts to a list-based layout like that. It is a Glide setting, not something that would be related to CSS, I think.

Ya…def not related to CSS

1 Like

The last one is so creative!

As always, thanks for posting (:

1 Like

Hi Robert, I really didn’t mean to distract from this thread. It was only semi-related…

I found a post where @Jason was saying they want CSS examples so they can incorporate things into Glide to “make it less prone to insane breakages”.

Not sure how that fits in with what I experienced. I have re-implemented it and so far so good.
image

Great video - thanks!

Inspired a bit of experimentation….

Eliminating the standard tab menu across the bottom makes for a cleaner experience and allows the tabs to breath with a full screen mode…

2 Likes