Setting Up Navigation

Last modified: August 20, 2024

Introduction

Once you created some pages, it is important that your users can access them. For this, you need to create a navigation menu. The navigation editor of Studio Pro allows you define the navigation menu for different type of apps and devices for example, for responsive, tablet browser, or native mobile apps. It also allows you to define which page is shown as a default home page depending on the user role.

Setting a Default Home Page

This section will explain how to set the default home page.

Do the following:

  1. Open App > Navigation.

  2. Some navigation profiles are open in a tab by default, for example, the Responsive one. To open other navigation profiles, do the following:

    1. Click Add navigation profile, select the profile type depending on the type of the interface you are working on:

    2. Click OK.

  3. In Home pages > Default home page, click Select.

  4. Select the page you want to use as the default home page.

  5. Click Select.

Now every time a user signs in to the application, the selected page/microflow is shown/triggered.

Setting a Role-Based Home Page

In many cases you would like users with different roles to see different home pages. You can use role-based home pages for this. You do not need to configure home pages for every role, because the default home page works as a fall-back mechanism.

Follow the steps below:

  1. Open the Navigation editor.

  2. Open the profile type depending on the interface type you are working on.

  3. In Home pages > Role-based home pages, click Edit.

  4. In the Role-based home pages dialog box, click New.

  5. Select a user role to create a new setting, for example, select the Administrator role:

  6. Click Select.

  7. After you have selected the user role, click the Select target button.

  8. Select the home page for selected user role, for example, the Account_Overview page:

  9. Click Select.

Now every time a user with the Administrator user signs in to the application, the Account_Overview page is shown. Users with other roles will be redirected to the default home page.

Setting a Fallback Page

The fallback page is a page or microflow that can be used to customize the application’s behavior when trying to access a microflow or page URL that does not exist. When configured, the default pop-up stating “The page you requested was not found. You are redirected to the home page” is replaced by the fallback microflow or the page. Fallback pages are not available for offline profiles.

If a microflow is used as a fallback, it can have only one String parameter named ‘Path’, which will contain the URL that could not be found.

The fallback page will only be used for URLs that start with a URL Prefix.

Setting a Nanoflow as a Home Page

Instead of using a page, you can set a nanoflow as your app’s home page as long as you are using a native profile. The nanoflow you selected will be executed during startup and will show your app’s starting page. This is a normal nanoflow call, which means that you can implement custom logic that determines which page to show, creates objects, calls subnanoflows, uses JavaScript actions, and more.

To make the best nanoflow home pages, keep the following information in mind:

  • The home page nanoflow is executed after the initial synchronization
  • While the nanoflow executes the app splash screen stays visible until the nanoflow reaches the first Show Page activity
  • If a nanoflow contains multiple Show Page activities they will be executed in order and each page will be shown respectively (the last page shown will stay open after the nanoflow finishes)
  • Make sure a Show Page activity is called from the startup nanoflow for each possible execution path, otherwise the app will keep showing the splash screen if the nanoflow finishes without executing a Show Page activity
  • Home page nanoflows should have no parameters
  • An error in the home page nanoflow can lead to an unusable app state — to avoid this, use error handling for activities that can fail, such as microflow calls
  • To improve user experience for long-running nanoflows, show a page as early as possible and then continue executing the rest while showing the progress on that page

You can create menu items for your navigation. Do the following:

  1. Open the Navigation editor.

  2. Open the profile type depending on the interface type you are working on.

  3. In the Menu section, click New item to create a top level menu item.

  4. Enter a Caption for your menu item. In the example below, the menu item is named Customer Overview after a page this menu item will open.

  5. Select a page or microflow as a target:

  6. Click OK to save the menu item.

In the overview of menu items you can see the name of the menu item, the target page/microflow, and the user role are the necessary settings to be configured for the menu item. The user roles are derived from the page and microflow access settings.

You can restructure the menu by dragging and dropping menu items.

Adding Navigation Menu to Pages

Now that you have created a menu structure, it is time to start using it on pages. Do the following:

  1. Open a page.

  2. Click Add widget and select Menu bar:

  3. Select a place on the page to add the widget.

  4. Open the Properties pane.

  5. In General > Menu source, select Project navigation. This is the navigation structure defined in the navigation editor. (You can also add additional menu structures using menu documents.)

  6. In Profile, select the profile type depending on the device type. Responsive is selected by default.

The menu widget is now showing the navigation items created in the navigation editor.

To avoid adding the menu widget on every page in your app, you can use a layout. With layouts you can define a structure for pages in your app. You can define where the menu should be rendered and you can simply reuse that layout for all or several pages. For more information on how to use layouts, see How to Use Layouts and Snippets.

Read More