Skip to main content
Version: Next

Transition with data

Introduction​

Sometimes it is needed to pass an object from a screen to another (e.g. selecting a note in screen 1 and displaying its details in screen 2).

This is made possible by using Transition Data Mapping.

overview

How it works​

prop_both_screens

These properties can then be used to pass values from one screen to another. prop_mapping

To provide a value to a Screen property, the Action “Set UI Property” can be used.

It would be typically used just before a Dispatch Event call. full_steps

Exercise 14 – Display a note​

The goal of this exercise is to display the details of a note on a different screen. To do this, mapping selected note from home screen to the detail screen must be done. exercise_14_result

  1. Go to App “Notes App”.
  2. Open the Screen “View note.
  3. In Spec & Doc tab, create one property of type Note named “Note to display”.
  4. Add a Header named “Header”:
    • X = Center, Y = Top
    • Width = 100%, Height = 90px
    • Title text = function to display the summary of the note (prop “Note to display”). The result should look like: function_summary
    • Left button label = “Back”
  5. Add a Text Area named “Note content”.
    • X = Center, Y = 120px
    • Width = 80%
    • Text = function to display the content of the note (prop “Note to display”). The result should look like: textarea_function
  6. Go to App “Notes App”.
  7. Open Screen “Home”.
  8. In Spec & Doc tab, create one property named “Selected note”, type Note.
  9. In Spec & Doc tab, add an Event named “On note selected”.
  10. Click on “Notes List” and then on “Edit”.
  11. Select the label and add an action which sets property “Selected note” to the note of the current line (current value) and which dispatch the event “On note selected”
  12. Add a transition from screen “Home” to screen “View”:
    • Select event “On note selected”
    • Map properties “Selected note” and “Note to display”
  13. Add a transition from screen “View” to screen “Home”:
    • Create a new event which is triggered by click on header “Left Button Click” event.