PhixFlow Help
6. Menus and navigation
In this chapter, we'll look at navigating between the two dashboards you've created in your app, as well as creating menus at the top level in PhixFlow, and navigating directly to your app via the URL.
First, we'll creating menu items and buttons to navigate between the two dashboards:
Do this in your app. To recap the steps in the video:
- Drag the dashboard
Contact Types
onto the edit form in theContacts
dashboard - a button will appear - Drag the dashboard
Contact Types
into the header of the grid view in theContacts
dashboard - a menu item will appear
Go into App Mode. Try both buttons - both will open the Contact Types
dashboard.
Now we'll create a top level menu for the application, and look at how to navigate directly to the application using the URL:
Create a top level menu in your app. To recap the steps in the video:
- Open the repository browser under the application
Contacts
- 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 - set the Name of the menu to
Default
- Add a sub-menu - this will appear in the header of the PhixFlow application
- Set the Name of the sub-menu to
Contact Management
- Set the Display Name to
Contact Management
- Press Apply
- Set the Name of the sub-menu to
- Add a menu item to open the
Contact Types
dashboard:- Set the Name to
Contact Types
- Set the Action to
Contact Types
- this is one of the actions that PhixFlow created automatically when you dragged theContact Types
dashboard onto theContacts
dashboard earlier- 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
- Save your changes to the menu item
- Set the Name to
- Before adding a menu item to open the Contacts dashboard, you will need to add an action to open the contact dashboard:
- Open the stream configuration form for
Contacts
- Add a new action
- Set the Name to
Open Contacts
- this is an internal name, it is useful to make this as descriptive as possible, to help keep your configuration well organised - Set the Display Name to
Contacts
- this is the name that will appear in the menu - Open the section Action Completion
- Tick Open Post Dashboard, then press Apply
- 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
- Add a Dashboard Rule:
- Set the Dashboard to
Contacts
- Leave the Expression blank; this means that every time the action is run, we will open this dashboard
- 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
- Save your changes to the dashboard rule
- Set the Dashboard to
- Save your changes to the action
- Open the stream configuration form for
- Open the menu again, and go into the sub-menu
Contact Management
- Add a menu item to open the
Contacts
dashboard:- Set the Name to
Contacts
- Set the Action to
Open Contacts
- Set the Name to
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 Contacts
.
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.
You can grab this URL to share with users of the application, but you can also construct them yourself. The format is:
[base url]?application=[application name]
In this case, something like:
https://hosted.phixflow.com/train/start.html?application=Contacts
(Note that you don't need to put a direction to the Default
top level menu at the end of the URL.)
Everything you have done to create a top-level menu in PhixFlow can also be done in a menu in a view.
To see this, open the configuration for the grid view, and go to the Menu Items section. You will see that you can add menu items and sub-menus, and building these is just the same as building menus for a top level view.
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 contacts dashboard on application start:
- Open the top level menu (
Default
) - Set the Default Action to be
Open Contacts
- Save your changes
Refresh the browser page to restart the application - you will see that the Contacts
dashboard opens straight away.
Next chapter: 7. Validating input, custom insert and update actions
Please let us know if we could improve this page feedback@phixflow.com