Transition with data

Introduction

Sometimes it’s 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 15 – 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_15_result

  1. Go to App “Notes App”
  2. Open the Screen “View note
  3. In Context Editor, create 1 property of type Note named “Note to display”
  4. Add a Header named “Header”
    • X = Center, Y = Top
    • Width = 100%, Height = 90px
    • Title = function to display the summary of the note (prop “Note to display”)
    • 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”)
  6. Go to App “Notes App”
  7. Open Screen “Home”
  8. In Context Editor, create 1 Note property named “Selected note”
  9. In Context Editor, add an Event named “On note selected”
  10. Click on “Notes List” and then on “Edit”
  11. Select the label 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”
  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
← Query DataThemes →