UI Flow is an element that groups Screens and Blocks. All instances of UI Flow in an app are under the UI Flows in the Interface tab.
When you create a new app, the app already has some default UI Flows in Interface > UI Flows:
- Common. Contains UI and logic the app reuses in Screens and Blocks. For example, menus, info about the signed-in user, the sign in logic.
- Layouts. Contains Blocks that define the layout of the Screens.
- MainFlow. The default UI Flow where you can start adding Screens in your app. This UI Flow is empty in a new app.
Be careful when editing the default content of Common and Layouts UI Flows, as you may affect all Screens in your app.
Add new UI Flow
To add a new UI Flow, do the following in Service Studio:
Go to the Interface tab and right-click on the UI FLows folder.
From the help menu, select Add new UI Flow.
Set the Theme of UI Flow
All Screens you add to a UI Flow use the default Theme of the module. You can change the Theme by editing the Theme property of the UI Flow.
Set the default screen
Default Screen is the index page in Reactive Web Apps, or the home screen in Mobile Apps. There can be only one Default Screen in the module, and it's marked with the house icon.
To set a Screen as default, do the following in Service Studio:
- Navigate to the Screen you want to set as default.
- Right-click on the Screen and in the help menu select Mark as Default Screen.
UI Flow editor
When you double-click on a UI Flow, the UI Flow editor opens. Use the editor to:
- See the relationship between Screens
- Drag elements from the tool box that UI Flow supports
Even though you can draw connectors in UI Flow, these connections are only visual — you must define the interaction between Screens.
To create a Screen or Block, drag the element from the toolbox to the UI Flow editor. The available elements on the toolbox depend on the type of app you're creating.
Drag Entities to the UI Flow editor to start the accelerators (scaffolding). For example, if you drag an Entity to a UI Flow editor, you automatically scaffold two Screens with working logic, one for listing the items, one for editing them.
UI Flows in Traditional Web Apps
UI Flows in Traditional Web Apps have Entry Point which defines the URL within the app. The Entry Point with the property Is Default set to true is the index page of the app.
UI Flows in Traditional Web Apps also have security settings that apply to all Screens in the UI Flow.