Worked ExampleHere's a worked example using the School Data (available from the Learning Centre). In this example, we are using: - A 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 CoursesIn 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 SetupEvent 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 - Click on the top card on the Classroom Management screen to open the
Insert excerpt |
---|
| _property_settings |
---|
| _property_settings |
---|
nopanel | true |
---|
| for the area, Card - Click on the
Insert excerpt |
---|
| _property_tabs |
---|
| _property_tabs |
---|
name | action |
---|
nopanel | true |
---|
|
- Click the
Insert excerpt |
---|
| _add_icon |
---|
| _add_icon |
---|
nopanel | true |
---|
| icon in the Event Handler section - In the New Card (On Click) Event Handler tab, click
- Enter a name for the Actionflow:
- Name:
Find Courses
Image Modified Create Calculate Action and View Action- Select Click to Connect and for the input, choose the Classrooms Card Component, then select Connect Input
- In the Mappings window that opens, drag the CourseID attribute from the left to the right
- Select Save
- Click and drag the
Insert excerpt |
---|
| _action_calculate |
---|
| _action_calculate |
---|
nopanel | true |
---|
| icon from the toolbar onto the canvas - In the Create Calculate Action window enter:
- Name:
FindStudents 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. |
- Click and drag the
Insert excerpt |
---|
| _driving_interface_connection_point |
---|
| _driving_interface_connection_point |
---|
name | icon |
---|
nopanel | true |
---|
| icon onto the Insert excerpt |
---|
| _action_calculate |
---|
| _action_calculate |
---|
nopanel | true |
---|
| action node - Right-click on the in connector and choose
Insert excerpt |
---|
| _open_mappings |
---|
| _open_mappings |
---|
nopanel | true |
---|
|
- Drag the CourseID attribute on the left onto the Drag and Drop area on the right
- Select Save
- To look up to the Course Attendees table, we need to create a
Insert excerpt |
---|
| _action_view |
---|
| _action_view |
---|
nopanel | true |
---|
| Action - Click and drag the
Insert excerpt |
---|
| _action_view |
---|
| _action_view |
---|
nopanel | true |
---|
| icon from the toolbar onto the canvas - In the Create View Action window enter:
- Name:
GetStudentID - Primary Table: choose Course Attendees
Select Create Action
Expand |
---|
| Image Modified |
- Hover over the
Insert excerpt |
---|
| _action_calculate |
---|
| _action_calculate |
---|
nopanel | true |
---|
| Action and select Image Modified - Enter a name for the Lookup Connector:
- Name:
lu - Select Confirm
- When the red arrow shows, click on the
Insert excerpt |
---|
| _action_view |
---|
| _action_view |
---|
nopanel | true |
---|
| action on the canvas
- Select the
Insert excerpt |
---|
| _action_view |
---|
| _action_view |
---|
nopanel | true |
---|
| action on the canvas to open its Insert excerpt |
---|
| _property_settings |
---|
| _property_settings |
---|
nopanel | true |
---|
|
- In the Output Attributes section, click on the
Insert excerpt |
---|
| _attributes_icon |
---|
| _attributes_icon |
---|
nopanel | true |
---|
| icon - In the Available Attributes window, drag StudentID into the Output Attributes section of the
Insert excerpt |
---|
| _property_settings |
---|
| _property_settings |
---|
nopanel | true |
---|
|
- Click OK
- Select the lu connector to map the incoming and outgoing data
- 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
Insert excerpt |
---|
| _action_view |
---|
| _action_view |
---|
nopanel | true |
---|
| action - Select Next
- 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
Insert excerpt |
---|
| _action_calculate |
---|
| _action_calculate |
---|
nopanel | true |
---|
| action- Image Modified
- Right-click on the StudentID attribute you just created and select
- Rename the attribute:
StudentIDFound - Image Modified
- Click Confirm
- We need to filter the data coming out of the lookup
- Click on the
Insert excerpt |
---|
| _action_view |
---|
| _action_view |
---|
nopanel | true |
---|
| action to open its Properties - In the Data Retrieval Options section, click the
Insert excerpt |
---|
| _addIcon |
---|
| _addIcon |
---|
nopanel | true |
---|
| icon next to Filter- Name:
ByCourseID - Filter Details: Image Modified
- Click abc to tell PhixFlow to interpret the field as an expression
Insert excerpt |
---|
| _finish |
---|
| _finish |
---|
nopanel | true |
---|
| the Filter tab
- the View Action tab
Expand |
---|
| Image Modified |
- Click on the
Insert excerpt |
---|
| _action_calculate |
---|
| _action_calculate |
---|
nopanel | true |
---|
| action on the canvas to open its Insert excerpt |
---|
| _property_tabs |
---|
| _property_tabs |
---|
nopanel | true |
---|
|
- In the Output Attributes section, click the
Insert excerpt |
---|
| _addIcon |
---|
| _addIcon |
---|
nopanel | true |
---|
| icon to create a new attribute:- Name:
CourseStudentIDs - Type: Choose
Structured Data - This will return the results as an array
Expression: Code Block |
---|
| lu.StudentIDFound |
Click Insert excerpt |
---|
| _finish |
---|
| _finish |
---|
nopanel | true |
---|
|
- Under Connections on the left, select
Insert excerpt |
---|
| _addIcon |
---|
| _addIcon |
---|
nopanel | true |
---|
| Add - Add an Output Connection Point:
- Name:
out - Type: choose Output
- Click Create Connection Point
- Select Click to Connect and choose the CourseManagement , then Connect Output
- Close the Mappings window that opens
- Hover your mouse over the
Insert excerpt |
---|
| _action_calculate |
---|
| _action_calculate |
---|
nopanel | true |
---|
| action on the canvas and click out - When the red arrow shows, click on the
Insert excerpt |
---|
| _output |
---|
| _output |
---|
name | icon |
---|
nopanel | true |
---|
| node under Connections - 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
- Click Save
- Click the out connection point, under Connections
- On the Mappings window, drag the CourseStudentIDs output attribute from the output to the string field, StudentIDFromAttendees
- Click Save
- The Actionflow is now built
Expand |
---|
| Image Modified |
Setup Background FilterThe 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. - Return to the Course Management screen
Click on the Students contact card container to open the Card Component Insert excerpt |
---|
| _property_settings |
---|
| _property_settings |
---|
nopanel | true |
---|
| - Ensure you click on the white space underneath the top contact card to open the Card Component
On the Insert excerpt |
---|
| _property_tabs |
---|
| _property_tabs |
---|
nopanel | true |
---|
| , in the Background Filter Rules section, click Insert excerpt |
---|
| _addIcon |
---|
| _addIcon |
---|
nopanel | true |
---|
|
- Enter the Rule Expression:
true - Create a new filter by pressing
Insert excerpt |
---|
| _addIcon |
---|
| _addIcon |
---|
nopanel | true |
---|
| next to Filter:- Name:
ByStudentID - Filter Details: Image Modified
- Click
Insert excerpt |
---|
| _finish |
---|
| _finish |
---|
nopanel | true |
---|
| on both the Filter and Filter Rule Insert excerpt |
---|
| _property_settings |
---|
| _property_settings |
---|
nopanel | true |
---|
|
- 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 |
---|
name | style |
---|
nopanel | true |
---|
| to tidy up the screen. |
|