11. Menus and Navigation

Create a top level navigation level menu and in window navigation. To recap the steps in the video:

Create in Window Navigation

1. Open the Businesses dashboard
2. Open the Contact Details Tab
3. Drag the ContactManager dashboard onto the header of the grid view Business Contacts - a button will appear

Go into App Mode to test the button – it will open the Contact Manager dashboard.

Create a top level menu in your app

Now we'll create a top level menu for the application, and look at how to navigate directly to the application using the URL:

1. Open the configuration form for the application ContactManager
2. Go to the section Menus, and add a new menu - You can define a number of different top level menus under an application, but in most cases you only need one.
   1. Set the Name of the menu to Default
   2. Click add a new sub menu - this will appear in the header of the PhixFlow application
      • Name: Contacts Manager
      • Display Name:  Manage
   3. Press Apply
3. Add a Menu Items to open the ContactManager dashboard:
   1. Action: ContactManager

Sharing these actions between buttons and menu items is reasonably safe - all they do currently is open a dashboard, it is unlikely that someone will add a lot of extra logic to them later

1. Before adding a menu item to open the Businesses dashboard, you will need to add an action to do so.
2. Open the stream configuration form for Businesses
   1. Add a new action
   2. Name: Open Businesses only - this is an internal name, it is useful to make this as descriptive as possible, to help keep your configuration well organised
   3. Display Name: Businesses - this is the name that will appear in the menu
   4. Action Completion:
      • Tick Open Post Dashboard, then Save
      • Set the Dashboard to Businesses
      • Leave the Expression blank - this means that every time the action is run, we will open this dashboard

Note: you can also set Close Parent Dashboard - this is useful in some workflows, when after moving to a new screen, you want to close the screen that the user started from; in this case, we don't want this, since users will open the list of contact types, edit the list, then close the contact types to return to the contacts
We want this because we will create a simple button that opens a single dashboard every time it is pressed; if we implement a workflow, we might need something more complex here, to open different dashboards depending on the data being handled

1. Open the menu configuration again and add a menu item to open the Businesses dashboard:
   1. Name: Businesses
   2. Action: Open Businesses Only
2. Apply all changes

Switch to your application by going to the PhixFlow icon in the top left hand corner of the application. Clicking the icon will give you a list of available applications - select Contact Manager.
You will see your new menu. Check this works by going each to menu item, and checking that the correct dashboard opens.

Look at the URL in your browser. You will see that PhixFlow has appended the name of the application to the base URL. It will also have added a direction to the Default top level menu.

Application URLs

You can grab this URL to share with users of the application, but you can also construct them yourself. The format is:

In this case, something like:

(Note that you don't need to put a direction to the Default top level menu at the end of the URL.)

Default Actions

Set the default action on the top-level menu. This action will run when the application is started, and we will use the default action to open the Businesses dashboard when the application starts:

1. Open the top level menu
2. Set the Default Action to be Open Businesses Only
3. Save your changes

Refresh the browser page to restart the application - you will see that the Businesses dashboard opens straight away.