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 Modified

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 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 Courses

Image Modified

Create Calculate Action and View Action

  1. Select Click to Connect and for the input, choose the Classrooms Card Component, then select Connect Input
  2. In the Mappings window that opens, drag the CourseID attribute from the left to the right
    1. Select Save
  3. Click and drag the 
    Insert excerpt
    _action_calculate
    _action_calculate
    nopaneltrue
     icon from the toolbar onto the canvas
  4. 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. 


  5. 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
  6. 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
  7. To look up to the Course Attendees table, we need to create a 
    Insert excerpt
    _action_view
    _action_view
    nopaneltrue
     Action
  8. Click and drag the 
    Insert excerpt
    _action_view
    _action_view
    nopaneltrue
     icon from the toolbar onto the canvas
  9. 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.



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