Skip to main content
Version: Next

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

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

transition_action

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

transition_dispatch

  1. 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. Create a transition from ”Home” screen to “New note” screen
    • Click events on button “New note button” must trigger this transition
  3. Create a transition from “New note” screen to “Home” screen
    • “On left button click” event on the header must trigger this transition
  4. Open the app in a new tab and check that clicking on "New note" and "Back" takes you back and forth