Navigation

PROFILE

[Intro] In this lesson, we’ll be discussing Navigation in your app.

First we have the Profile page.

In your app, the profile page is one of the most important pages. Let’s get started.

[Editor/Emulator] To access the Profile page, go to the Platfio Editor, then click Navigation, then Profile.

You’ll notice that we have a variety of toggles. We can turn on the ability to select different store locations if we have multiple store locations in our app.

We can toggle on or off the ability to manage the payment cards that we have available in our app if our app supports payments.

We can toggle on or off the ability to view and edit phone numbers.

We can toggle on or off the ability to view and edit our profile image.

We can toggle on or off the ability to manage the shipping addresses we have in our app.

Let’s toggle it on, and as you can see, we have the shipping address showing in the emulator.

We can toggle on or off to show the current version of the app and lastly, the user’s date of birth.

We can also add links to our profile page. This is commonly done to allow users to interact with features that they’ve purchased inside our app. For example, let’s add a link to all the user’s past orders, bookings, subscriptions, and form submissions to the profile page, then press save.

We can now see that these links are present on the user’s profile page.

It’s also required by Apple and Google that we always allow the user to delete their account. We understand that this is not ideal for business purposes. However, it’s a requirement from Apple and Google and as such, you will always see that a delete button is present on the profile page of your app.

HEADER

[Intro] Next, let’s discuss the Header of your app.

[Editor/Emulator] The header is extremely important. It’s one of the primary ways users navigate around and it’s a major contributor to how beautiful the UI of your app looks.

We have an enormous amount of control over what toolbars you want in the header of your app. To set up the header, go to the Platfio Editor, then click Navigation, then Header.

You’ll notice that we can set up multiple toolbars and these toolbars can be placed on top of each other in the header and in the menus.

In this case, we can see that we generally have one toolbar for the app, and one toolbar in the menu.

If we open the menu toolbar and go to settings, we can see that it is shown in the left hand and right-hand side menu by default.

If we open the header toolbar, we can go to settings and we can see that this is shown at the top of the main body of the page, and it’s shown when the page is scrolling by default. For this demo, let’s add another toolbar. Press add, give the toolbar a name (Toolbar 3), and press save.

We’ll now notice in the emulator that we have an additional toolbar. You can press the more options button to reorder the toolbars.

Next, let’s click on the new toolbar we have and begin to customize. One of the most important things is the color of the toolbar.

We can leave it as default, or we can select a specific color from our theme. Then, placing elements in the toolbar is extremely simple. We can click elements and press add.

We can select the type of element, for example, we can add a Left-Hand Side Menu toggle or a Back button. These two elements should always be in one of the tool bars in your app.

We can also have a Right-hand side menu toggle if we support a right-hand side menu in our app.

The Utility button, which should always be present in one of our toolbars as it’s used by a variety of features inside the app, such as notebooks and forms.

The Cart button which allows the users to quickly access their cart at any time.

The Controls button which would only be shown to staff and allows them to quickly access the Manager and Editor.

The Option button that works similarly to the Utility button.

The Brand, the Title of the current page, a custom image, a static text, a static heading, and others. Most of these are self-explanatory but let’s set up a couple of the most common ones.

Let’s add a left-hand side menu toggle and a back button. Now if we’re on a page which is currently present in the Left Hand side menu toggle and if we click on a link and accessing a page that’s not in the left hand side menu, the back button will be displayed instead.

Let’s set up the title and this will give us a dynamic title of the page that we are currently accessing. So, as we can see, we’re currently in the Locations page. If we click on Orders, the title of the page will be displayed. This is a very common feature to add to your toolbar.

It’s also common to include Buttons in your toolbar. Let’s go back to elements and press add. Select Slotted Buttons. Let’s say we want these buttons to be at the end and then let’s add sub-elements. In this case, let’s add a link to the profile page, select an icon, and set the icon position to Only and press save.

As we can see in our emulator, we have this person icon in a button on the right side, and if we click on it, it will lead us to the Profile page.

HOME

[Intro] Next up, is the Home page.

[Editor/Emulator] To set up the home page for your app, go to the Platfio Editor, click on navigation, and then Home. You'll see that we have two default home pages. The default home page for a logged-in user is profile, and the default home page for a non-logged-in user is the sign-in page.

We can customise the logged-in users' default home page by clicking here on the link, and selecting a link from the link selector.

In more advanced use cases. We can set up custom home pages. We can press add, then, select the link, and then we can select whether we want this custom home page to apply to the user if they're not logged in or if they're logged in.

If they're on a version less than a specific version, if they're on a version greater than a specific version, if they're on a version equal to a specific version, if we want this home page only to be applied when they first sign up, or if we want this home page only to be used on Android, iOS, or the web.

These options are mostly self-explanatory. However, let's go into more detail with the logged-in user. In this case, when the user is logged in, we might want to adjust their home page by segment.

For example, we might have a high-value customer segment that we prepare a different home page for than our standard members.

Similarly, we may want to have different home pages based on the store location of the user. And accordingly, we can set the home page based on the store location. And press save.

If we have multiple custom home pages, we can press on more options, and reorder them. And remember that the home pages are always selected in order of priority. So if a user matches multiple home pages in the custom home pages section, the one at the top will be applied to that user.

Testing home pages is self-explanatory, however, a handy tip is that if you press the logo in your app, it will always take you to the home page.

So in this case we can see that neither of the custom home page applies to this user and they've been taken to the standard, default logged-in home page which is the profile.

MENU

[Intro] Finally, let’s discuss how to manage Navigation Menus for your app. There are a few critical ways that users navigate around apps, and two of the most critical ways are the left-hand and right-hand side menus.

[Editor/Emulator] There are a few critical ways that users navigate around apps, and two of the most critical ways are the left-hand and right-hand side menus.

By default, the left-hand and right-hand side menus are enabled, and you can swipe to open them. To add links to these navigation menus, click on the Platfio editor, then click Navigations, Left-Hand Side Menu, press add, select the things we want to add to the left-hand side menu and press save.

As we can see, the links we added are now displayed.

It’s also easy to reorder and edit your left-hand side menu by clicking on the existing link in the menu, and pressing delete or by pressing on More Options and you can delete a link or reorder them. Then click Save.

If you don’t require both menus, you can go to Theme, Theme, and go to Menu, and you can disable the left hand or right-hand side menu. In this case, let’s disable the right-side hand menu since we only need the left one.

As you can see, we can’t swipe to open the right-side hand menu because it has been disabled. In the Theme, we can also go to Menu and change the layout of the menu for a different look.

We can change the background color of the menu and we can change the colors of the icons in the menu.

The RH Menu Editor allows you to add pages of your app to be shown in the RH Menu.

The Tabbar Editor allows you to add pages of your app to be shown in the Tabbar.

The Staff allows you to make pages of your app easily accessible to your staff.

Navigation plays a crucial role in how users experience your app. It keeps users engaged, encourages exploration, and makes your app feel intuitive and satisfying to use.

[Outro] Thank you for watching.