Skip to main content

User Interface - Navigation

Introduction#

Transitions between screens are defined in App Editor / ScreenFlow Editor create_transition

Transitions are triggered by events on the source screen edit_transition

Under the hood#

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

  1. Creates a new Event in the Screen transition_event

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

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

  4. Link the Event to the Transition transition_event_link

Exercise 6 – Navigation#

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

  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