User Interface - Navigation

Introduction

Transitions between screens are defined in App Editor / ScreenFlow Editor

Transitions are triggered by events on the source screen

Under the hood

Adding an event from a transition is actually a shortcut that…

1. Creates a new Event in the Screen

2. Defines a new Action on a UI Component (e.g. Click on Button)

3. Configure the Action of step 2 to “dispatch“ the Event created at step 1

4. Link the Event to the Transition

Exercise 6 – Navigation

The goal of this exercise is to create transitions from/to home screen and "New note" scren.

1. Go to App “Notes App”
2. Open Screen “New note”
3. Go back to app “Notes App”
4. Create a transition from ”Home” screen to “New note” screen
   • Click events on button “New note button” must trigger this transition
5. Create a transition from “New note” screen to “Home” screen
   • “On left button click” event on the header must trigger this transition