Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Insert excerpt
_Banners
_Banners
nameactionflow
nopaneltrue

What is a Lookup?

Image Modified

Lookups are denoted by a dotted double-ended connector transferring data into and out of a 

Insert excerpt
_action_view
_action_view
nopaneltrue
 Action, and are used to lookup and retrieve records in other recordsets. Lookup views require:

  • Incoming Mappings: the attributes being passed into the View Action via the lookup connector
  • Output Attributes: the attributes being used by the View Action to filter the results
  • Outgoing Mappings: the attributes being passed out of the View Action via the lookup connector 


Expand
titleViews vs Lookups

Insert excerpt
1.15 View Action Configuration
1.15 View Action Configuration
nameLookupVsView
nopaneltrue

Creating Lookups

  1. Hover over an action node, e.g. a Calculate Action, on the canvas and select Image Modified
  2. Enter a name for the Lookup Connector
  3. Click onto a 
    Insert excerpt
    _action_view
    _action_view
    nopaneltrue
     
    action on the canvas
  4. Alternatively, click onto any empty space on the canvas to create a new 
    Insert excerpt
    _action_view
    _action_view
    nopaneltrue
     Action
HTML Comment
hiddentrue

Worked Example

Here's a worked example using the School Data (available from the Learning Centre).

In this example, we are using:

  • Classroom Management screen  - this screen was created using the Tile with Buttons template, and contains:
    • A basic card container of the Classroom data
    • A basic card container of the Courses data
    • An empty string field, FilterField
Tip

If you are completing this chapter as part of the Actionflow course and using a training instance, the data and screens have already been pre-loaded into the Actionflow Foundation Application. For this example, we'll be working on the Classroom Management screen. 

Lookup to Classroom Courses

In this example, we want to see the courses held in each classroom when each classroom is clicked. To do this, we will use the classroom data to lookup and retrieve the associated courses data, then output that data back to the screen where it can be used to filter the courses data.

Image Removed

Image Added

To do this it we will:

  • Lookup the courses using the Classroom ID, which is found on both the Classroom and Course tables
  • Write those courses' Course ID(s) back to the screen onto a string field
  • Setup a background filter to only show courses in a Courses card container that match the Course ID in the field

Event Handler Setup

Event handlers facilitate actions occurring in response to a user action. For this example, we want a user clicking on a classroom card to run an Actionflow that populates a string field that we will later to use to filter the information that can be seen on screen

  1.  Click on the top card on the Classroom Management screen to open the 
    Insert excerpt
    _property_settings
    _property_settings
    nopaneltrue
     for the area, Card
  2. Click on the 
    Insert excerpt
    _property_tabs
    _property_tabs
    nameaction
    nopaneltrue
  3. Click the 
    Insert excerpt
    _add_icon
    _add_icon
    nopaneltrue
     icon in the Event Handler section
  4. In the New Card (On Click) Event Handler tab, click 
    Insert excerpt
    _save
    _save
    nopaneltrue
    1. Enter a name for the Actionflow:
      1. Name:
Find
      1. Filter Courses

Image Modified

Create Calculate Action and

View Action

Lookup

  1. Select Click to Connect and for the input, choose the Classrooms Card Component, then select Connect
Input
  1. Input   
  2. In the Mappings window that opens, drag the
CourseID
  1. ClassroomID attribute from the left to the right
    1. Select Save
  2. Click and drag the 
    Insert excerpt
    _action_calculate
    _action_calculate
    nopaneltrue
     icon from the toolbar onto the canvas
  3. In the Create Calculate Action window enter:
    1. Name:
FindStudents
    1. GetCourses
    2. Select Create Action

      Note

      For the input data, the attributes pass through the Calculate action without being processed. For the output data, the Calculate action processes the data into an array. 


  1. Click and drag the 
    Insert excerpt
    _driving_interface_connection_point
    _driving_interface_connection_point
    nameicon
    nopaneltrue
     icon onto the 
    Insert excerpt
    _action_calculate
    _action_calculate
    nopaneltrue
     action node
  2. Right-click on the in connector and choose
    Insert excerpt
    _open_mappings
    _open_mappings
    nopaneltrue
    1. Drag the
CourseID
    1. ClassroomID attribute on the left onto the Drag and Drop area on the right
    2. Select Save
  1. To look up to the
Course Attendees
  1. School_Courses table,
we need to create a 
  1. hover over the 
    Insert excerpt
    _action_
view
  1. calculate
    _action_
view
  1. calculate
    nopaneltrue
 ActionClick and drag the  Insert excerpt_action_view_action_viewnopaneltrue icon from the toolbar onto
  1.  action node and choose, Add Lookup
    1. On the Add Connection Point window, name the lookup: luc
      1. We recommend choosing a name to indicate the action taking place, e.g. "luc" for look up courses
    2. Click Confirm
  2. With the red arrow attached to your mouse, click anywhere on the canvas
  3. In the Create View Action window enter:
    1. Name: 
GetStudentID
    1. Courses
    2. Primary Table: choose
Course Attendees
    1. School_Course 
    2. Select Create Action

Expand
titleCheckpoint
Image Removed

Configure the

Lookup on the View Action Hover over the

Lookup 

  1. The Output Attribute Selection window will open automatically 
    1. Click the tick box next to CourseID
    2. Click Next
  2. The Incoming Mappings window will open automatically
    1. Drag the ClassroomID attribute from the left (Calculate Action) into the Drag and Drop area on the right to create a corresponding attribute in the 
      Insert excerpt
      _action_
calculate
    1. view
      _action_
calculate
    1. view
      nopaneltrue
 Action and select Image RemovedEnter a name for the Lookup Connector:
  • Name: lu
  • Select Confirm
  • When the red arrow shows, click on the 
      1.  action
      2. Select Next
    1. The Outgoing Mappings window will open automatically
      1. Drag the CourseID attribute from the left (View Action) to the Drag and Drop area on the right to map a corresponding attribute back to the
        Insert excerpt
        _action_
    view
      1. calculate
        _action_
    view
      1. calculate
        nopaneltrue
         action
    on the canvas
      Select the  Insert excerpt_action_view_action_viewnopaneltrue action on the
          1. Image Added
        1. Click Confirm and Create Filter
      1. We need to filter the data coming out of the lookup 
        1. Name: ByClassroomID
        2. Click abc to tell PhixFlow to interpret the field as an expression
        3. Filter Conditions: Image Added
          1. In this filter, the top CourseID is from the Courses data, and the bottom CourseID is from the Classroom data  
        4. Select Finish
      Expand
      titleCheckpoint

      Image Added

      Configure the Calculate Action and Output

      1. Click on the
        Insert excerpt
        _action_calculate
        _action_calculate
        nopaneltrue
         action on the canvas to open its
        Insert excerpt
        _property_
      settings
      1. tabs
        _property_
      settings
      1. tabs
        nopaneltrue
      2. In the Output Attributes section, click
      on
      1. the 
        Insert excerpt
        _
      attributes_icon
      1. addIcon
        _
      attributes_icon
      1. addIcon
        nopaneltrue
       icon In the Available Attributes window, drag StudentID into the Output Attributes section of the  Insert excerpt_property_settings_property_settingsnopaneltrue
    1. Click OK
    2. Select the lu connector to map the incoming and outgoing data
    3. For the Incoming Mappings:Drag the CourseID attribute from the left (Calculate Action) into the Drag and Drop area on the right to create a corresponding attribute in the 
      1.  icon to create a new attribute:
        1. Name: CourseIDArray
        2. Type: Choose Structured Data   
          1. This will return the results as an array
        3. Expression: 

          Code Block
          languagejs
          themeEmacs
          luc.CourseID


        4. Click 

          Insert excerpt
          _

      action_view
        1. finish
          _

      action_view
        1. finish
          nopaneltrue

       action
    4. Select Next
    5. For the Outgoing Mappings:Drag the StudentID attribute from the left (View Action) to the Drag and Drop area on the right to map a corresponding attribute back to the
      1. Under Connections on the left, select 
        Insert excerpt
        _
      action_calculate
      1. addIcon
        _
      action_calculate
      1. addIcon
        nopaneltrue
       action
      1. Image Removed
      Right-click on the StudentID attribute you just created and select
      1.  Add
      2. Add an Output Connection Point:
        1. Name: output
        2. Type: choose Output
        3. Click Create Connection Point
      3. In the Connect Output window, choose the ClassroomAvailabilityManagement 
        Insert excerpt
        _
      edit
      1. form
        _
      edit
      1. form
        nopaneltrue
       
    6. Rename the attribute: StudentIDFound
      1. Image Removed
    7. Click Confirm
    8. We need to filter the data coming out of the lookup 
    9. Click on
      1. , then Connect Output
        1. Close the Mappings window that opens as we don't have any attributes to map to this yet
      2. Hover your mouse over the
        Insert excerpt
        _action_
      view
      1. calculate
        _action_
      view
      1. calculate
        nopaneltrue
         action
      to open its PropertiesIn the Data Retrieval Options section, click
      1. on the canvas and click out
      2. When the red arrow shows, click on the 
        Insert excerpt
        _
      addIcon
      1. output
        _
      addIcon
      1. output
        nameicon
        nopaneltrue
       icon next to Filter
    10. Name: ByCourseID
    11. Filter Details: Image Removed
      1. Click abc to tell PhixFlow to interpret the field as an expression
    12. Insert excerpt_finish_finishnopaneltrue the Filter tab Insert excerpt_save_savenopaneltrue the View Action tab
      Expand
      titleCheckpoint

      Image Removed

      Configure the Calculate Action and Output

      Click on the Insert excerpt_action_calculate_action_calculatenopaneltrue action on the canvas to open its Insert excerpt_property_tabs_property_tabsnopaneltrueIn the Output Attributes section, click the  Insert excerpt_addIcon_addIconnopaneltrue icon to create a new attribute:
    13. Name: CourseStudentIDs
    14. Type: Choose Structured Data 
      1. This will return the results as an array
    15. Expression: 

      Code Block
      languagejs
      themeEmacs
      lu.StudentIDFound
      Click  Insert excerpt_finish_finishnopaneltrueUnder Connections on the left, select  Insert excerpt_addIcon_addIconnopaneltrue Add
    16. Add an Output Connection Point:
      1. Name: out
      2. Type: choose Output
      3. Click Create Connection Point
    17. Select Click to Connect and choose the CourseManagement  Insert excerpt_form_formnopaneltrue, then Connect Output
      1. Close the Mappings window that opens
      Hover your mouse over the Insert excerpt_action_calculate_action_calculatenopaneltrue action on the canvas and click outWhen the red arrow shows, click on the  Insert excerpt_output_outputnameiconnopaneltrue node under ConnectionsOn the Mappings window, drag across the CourseStudentIDs output attribute
      1.  node under Connections
      2. On the Mappings window, drag across the CourseIDArray attribute from the Calculate action into the Drag and Drop area on the right to create a corresponding attribute
      in
      1. on the output
        1. Click Save
      2. Click the
      out
      1. output connection point, under Connections
      2. On the Mappings window, drag the 
      CourseStudentIDs output attribute
      1. CourseIDArray attribute from the output to the string field,
      StudentIDFromAttendees
      1. FilterField
        1. Click
      SaveThe Actionflow is now built
        1. Save
      1. The Actionflow is now built
      Expand
      titleCheckpoint

      Image Added

      Setting up a Background Filter

      The Event Handler and Actionflow will now populate the string field, FilterField, by clicking each classroom card, but the Courses card container needs a background filter setting so it can be filtered by the values in the string field.

      Expand
      titleTroubleshooting

      Anchor

      Checkpoint

      troubleshooting

      Image Removed

      troubleshooting

      Setup Background Filter

      The Actionflow will populate the string field, StudentIDFromAttendees, but the values in this field need to be linked to the Students contact cards using a background filter in order to only see the students for the selected course only
      Note

      If at any point your screen does not display the expected results, such as clicking on the classroom card does not populate FilterField, or after creating the below filter the Courses cards do not filter, always try closing and reopening the screen first.


      1. Return to the
      Course
      1. Classroom Management screen 
      2. Click on the

      Students contact card
      1. Courses card container to open the Card Component 

        Insert excerpt
        _property_settings
        _property_settings
        nopaneltrue
         

        1. Ensure you click on the white space underneath the top contact card to open the Card Component
      2. On the 

        Insert excerpt
        _property_tabs
        _property_tabs
        nopaneltrue
        , in the Background Filter Rules section, click 
        Insert excerpt
        _addIcon
        _addIcon
        nopaneltrue

        1. Enter the Rule Expression: true
      3. Create a new filter by pressing 
        Insert excerpt
        _addIcon
        _addIcon
        nopaneltrue
         next to Filter:
        1. Name:
      ByStudentID
        1. ByFilterField
        2. In the Filter Details section, click Select an option and choose the CourseID in the Table Attributes
        3. Filter Details: 
      Image Removed 
        1. Image Added
        1. Click 
          Insert excerpt
          _finish
          _finish
          nopaneltrue
           on both the Filter and Filter Rule 
          Insert excerpt
          _property_settings
          _property_settings
          nopaneltrue
      1. Insert excerpt
        _lock
        _lock
        nopaneltrue
         the screen and
      press the Enrolled Students button
      1. click a classroom card to see the Actionflow working

      Having trouble? See Troubleshooting above.

      Tip

      Once you have verified the Actionflow is working, the

      StudentIDFromAttendees

      FilterField string field can be hidden in the 

      Insert excerpt
      _property_tabs
      _property_tabs
      namestyle
      nopaneltrue
       or 
      Insert excerpt
      _layers
      _layers
      nopaneltrue
       to tidy up the screen.


      Worked Example

      Here's a worked example using the School Data (available from the Learning Centre).

      In this example, we are using:

      • Course Management screen containing  - this screen was created using the Tile with Buttons template, and contains:
        • A grid of the School Courses data
        • A contacts card container of the School Students data
        • An empty string field, StudentIDFromAttendees
      Tip

      If you are completing this chapter as part of the Actionflow course and using a training instance, the data and screens have already been pre-loaded into the Actionflow Foundation Application. For this example, we'll be working on the expandable tile on the Course Management screen. 

      Lookup to Retrieve Course Attendees

      In this example, we want to see the students enrolled on each course. To do this, we will use the course data to lookup and retrieve the associated attendees data, then output the attendee data back to the screen where it can be used to filter the students data.

      Image Modified

      To do this it we will:

      • Lookup using the Course ID, which is found on both the Course and Attendees tables
      • Use the Course ID on the Attendees table to find the corresponding Student ID(s) of the student(s) attending that course
      • Write those Student ID(s) back to the screen onto a string field
      • Setup a background filter to only show students in a Students contacts card container that match the Student ID in the field

      Screen Setup

      1. Insert excerpt
        _lock
        _lock
        nopaneltrue
         your screen to expand the Students contacts card container on the right, shown by the tile with chevron
      2. Insert excerpt
        _unlock
        _unlock
        nopaneltrue
         your screen and click
        Insert excerpt
        _palette
        _palette
        nopaneltrue
         in the toolbar to open the Serene Grey palette 
      3. Expand Buttons - Secondary and add a custom button to the Tile - Footer area beneath the School Courses grid
        1. Name: Enrolled Students
      4. Using the 
        Insert excerpt
        _layers
        _layers
        nopaneltrue
        , hold down shift to move the button into the area, Right

      Image Modified

      Create Calculate Action and View Action

      1. Right-click on the Enrolled Students button and choose 
        Insert excerpt
        _actionflow_add
        _actionflow_add
        nopaneltrue
      2. Enter a name for the Actionflow:
        1. Name: Find Students
        2. Select Confirm
      3. Select Click to Connect and for the input, choose the School Course 
        Insert excerpt
        _grid
        _grid
        nopaneltrue
         View Component, then select Connect Input
      4. In the Mappings window that opens, drag the CourseID attribute from the left to the right
        1. Select Save
      5. Click and drag the 
        Insert excerpt
        _action_calculate
        _action_calculate
        nopaneltrue
         icon from the toolbar onto the canvas
      6. In the Create Calculate Action window enter:
        1. Name: FindStudents
        2. Select Create Action

          Note

          For the input data, the attributes pass through the Calculate action without being processed. For the output data, the Calculate action processes the data into an array. 


      7. Click and drag the 
        Insert excerpt
        _driving_interface_connection_point
        _driving_interface_connection_point
        nameicon
        nopaneltrue
         icon onto the 
        Insert excerpt
        _action_calculate
        _action_calculate
        nopaneltrue
         action node
      8. Right-click on the in connector and choose
        Insert excerpt
        _open_mappings
        _open_mappings
        nopaneltrue
        1. Drag the CourseID attribute on the left onto the Drag and Drop area on the right
        2. Select Save
      9. To look up to the Course Attendees table, we need to create a 
        Insert excerpt
        _action_view
        _action_view
        nopaneltrue
         Action
      10. Click and drag the 
        Insert excerpt
        _action_view
        _action_view
        nopaneltrue
         icon from the toolbar onto the canvas
      11. In the Create View Action window enter:
        1. Name: GetStudentID
        2. Primary Table: choose Course Attendees
        3. Select Create Action

      Expand
      titleCheckpoint

      Image Modified

      Configure the Lookup on the View Action 

      1. Hover over the
        Insert excerpt
        _action_calculate
        _action_calculate
        nopaneltrue
         Action and select Image Modified
      2. Enter a name for the Lookup Connector:
        1. Name: lu
        2. Select Confirm
        3. When the red arrow shows, click on the 
          Insert excerpt
          _action_view
          _action_view
          nopaneltrue
           action on the canvas
      3. Select the 
        Insert excerpt
        _action_view
        _action_view
        nopaneltrue
        action on the canvas to open its
        Insert excerpt
        _property_settings
        _property_settings
        nopaneltrue
      4. In the Output Attributes section, click on the 
        Insert excerpt
        _attributes_icon
        _attributes_icon
        nopaneltrue
         icon 
        1. In the Available Attributes window, drag StudentID into the Output Attributes section of the 
          Insert excerpt
          _property_settings
          _property_settings
          nopaneltrue
        2. Click OK
      5. Select the lu connector to map the incoming and outgoing data
      6. For the Incoming Mappings:
        1. Drag the CourseID attribute from the left (Calculate Action) into the Drag and Drop area on the right to create a corresponding attribute in the 
          Insert excerpt
          _action_view
          _action_view
          nopaneltrue
           action
        2. Select Next
      7. For the Outgoing Mappings:
        1. Drag the StudentID attribute from the left (View Action) to the Drag and Drop area on the right to map a corresponding attribute back to the
          Insert excerpt
          _action_calculate
          _action_calculate
          nopaneltrue
           action
          1. Image Modified
        2. Right-click on the StudentID attribute you just created and select
          Insert excerpt
          _edit
          _edit
          nopaneltrue
           
        3. Rename the attribute: StudentIDFound
          1. Image Modified
        4. Click Confirm
      8. We need to filter the data coming out of the lookup 
      9. Click on the
        Insert excerpt
        _action_view
        _action_view
        nopaneltrue
         action to open its Properties
      10. In the Data Retrieval Options section, click the 
        Insert excerpt
        _addIcon
        _addIcon
        nopaneltrue
         icon next to Filter
        1. Name: ByCourseID
        2. Filter Details: Image Modified
          1. Click abc to tell PhixFlow to interpret the field as an expression
        3. Insert excerpt
          _finish
          _finish
          nopaneltrue
           the Filter tab
      11. Insert excerpt
        _save
        _save
        nopaneltrue
         the View Action tab
      Expand
      titleCheckpoint

      Image Modified

      Configure the Calculate Action and Output

      1. Click on the
        Insert excerpt
        _action_calculate
        _action_calculate
        nopaneltrue
         action on the canvas to open its
        Insert excerpt
        _property_tabs
        _property_tabs
        nopaneltrue
      2. In the Output Attributes section, click the 
        Insert excerpt
        _addIcon
        _addIcon
        nopaneltrue
         icon to create a new attribute:
        1. Name: CourseStudentIDs
        2. Type: Choose Structured Data 
          1. This will return the results as an array
        3. Expression: 

          Code Block
          languagejs
          themeEmacs
          lu.StudentIDFound


        4. Click 

          Insert excerpt
          _finish
          _finish
          nopaneltrue

      3. Under Connections on the left, select 
        Insert excerpt
        _addIcon
        _addIcon
        nopaneltrue
         Add
      4. Add an Output Connection Point:
        1. Name: out
        2. Type: choose Output
        3. Click Create Connection Point
      5. Select Click to Connect and choose the CourseManagement 
        Insert excerpt
        _form
        _form
        nopaneltrue
        , then Connect Output
        1. Close the Mappings window that opens
      6. Hover your mouse over the
        Insert excerpt
        _action_calculate
        _action_calculate
        nopaneltrue
         action on the canvas and click out
      7. When the red arrow shows, click on the 
        Insert excerpt
        _output
        _output
        nameicon
        nopaneltrue
         node under Connections
      8. On the Mappings window, drag across the CourseStudentIDs output attribute from the Calculate action into the Drag and Drop area on the right to create a corresponding attribute in the output
        1. Click Save
      9. Click the out connection point, under Connections
      10. On the Mappings window, drag the CourseStudentIDs output attribute from the output to the string field, StudentIDFromAttendees
        1. Click Save
      11. The Actionflow is now built
      Expand
      titleCheckpoint

      Image Modified

      Setup Background Filter

      The Actionflow will populate the string field, StudentIDFromAttendees, but the values in this field need to be linked to the Students contact cards using a background filter in order to only see the students for the selected course only.

      1. Return to the Course Management screen 
      2. Click on the Students contact card container to open the Card Component 

        Insert excerpt
        _property_settings
        _property_settings
        nopaneltrue
         

        1. Ensure you click on the white space underneath the top contact card to open the Card Component
      3. On the 

        Insert excerpt
        _property_tabs
        _property_tabs
        nopaneltrue
        , in the Background Filter Rules section, click 
        Insert excerpt
        _addIcon
        _addIcon
        nopaneltrue

      4. Enter the Rule Expression: true
      5. Create a new filter by pressing 
        Insert excerpt
        _addIcon
        _addIcon
        nopaneltrue
         next to Filter:
        1. Name: ByStudentID
        2. Filter Details: Image Modified 
        1. Click 
          Insert excerpt
          _finish
          _finish
          nopaneltrue
           on both the Filter and Filter Rule 
          Insert excerpt
          _property_settings
          _property_settings
          nopaneltrue
      6. Insert excerpt
        _lock
        _lock
        nopaneltrue
         the screen and press the Enrolled Students button to see the Actionflow working
      Tip

      Once you have verified the Actionflow is working, the StudentIDFromAttendees string field can be hidden in the 

      Insert excerpt
      _property_tabs
      _property_tabs
      namestyle
      nopaneltrue
       to tidy up the screen.


      Image Modified