Versions Compared

Version Old Version 10 New Version Current
Changes made by

Zoe Baldwin

Zoe Baldwin

Saved on

Key

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

Insert excerpt
_Banners
_Banners
nameactionflow
nopaneltrue

Image Modified

 Test Your Knowledge

 Training Exercise

You have now learnt how to create and configure simple Actionflows in PhixFlow. To reinforce the techniques you have learnt, complete these assignments. Note: A training instance is required to complete these assignments.

Don't worry, this is not an exam. You can use the Help to broaden your understanding and assimilate knowledge. A number of hints have been provided; use these if you are struggling as each hint gives you more information on the solution.  

.

Expand
titleAssignment Hint

Remember to close and reopen your screen if you do not see the changes you expect.

Assignment 1

Difficulty Level: Mild

Configure the Students button on 

Task 1

On the Menu (screen), configure the Students button to open the Student Management screen

 

.

.

Expand
titleHint (Which Action Node?)

See 1.07 Open Screen Action Configuration.


Expand
titleSolution

Actionflow Setup

Image Added

Task 2

Configure the Save and Delete buttons on New Student Form screen to save and delete data in the School Students table.

.

Expand
titleHint (Which Action Nodes?)

See 1.09 Save Action Configuration and 1.12 Delete Action Configuration.


Expand
titleSolution

Save Actionflow Setup

Image Added

Delete Actionflow Setup

Image Added

Assignment 2

Difficulty Level: Medium

Task 1

On the Student Management screen, when a new student is created using the New Student button, we want the Intake Year field on the New Student Form screen to be prepopulated with the current year in the format,

YYYY 

YYYY.

.

Expand
titleHint 1 (Which Actionflow?)

Modify the Actionflow on the New Student button on Student Management screen.


Expand
titleHint 2 (How to Show the Current Year)

Use one of PhixFlow's Functions to retrieve the current year. 

What type of Action Node can perform a function?


Expand
titleHint 3 (Which Action Node?)

Use the dateGet function in an Output Attribute in a 

Insert excerpt
_action_calculate
_action_calculate
nopaneltrue
 action.

See 1.11 Calculate Action Configuration.


Expand
titleHint 4 (Output Attribute)

When creating your Output Attribute, set the Type as Integer. Your Expression should be:

Code Block
themeEmacs
dateGet(now(),_YEAR)

Note: The function now can also be used. This will return the date with a Type of String and requires the field that is being mapped onto to have a Type of Date set.


Expand
titleHint 5 (Helpful Reminders)

Check your mappings all the way through the Actionflow and remember to map your new Output Attribute onto the IntakeYear field.

When a user tries to save


Expand
titleSolution

Actionflow Setup & Mappings

Image Added

Note: The function now is also an acceptable solution - see Hint 4.

Task 2

When a new student is saved, we want a confirmation screen to appear that allows the save to be confirmed or cancelled.

Bonus Task: add a static text component to the confirmation screen with the Display Text, "Are you sure you want to create the new student,". In the Actionflow, map the name of the new student onto the dynamic text component, Message

Expand
titleHint 1 (Which Actionflow?)
Modify the Save Actionflow on the New Student Form screen

.

.

Expand
titleHint
2
1 (Confirmation Screen)
Create

Firstly, create a confirmation screen using the Confirmation template. See 1.13 Confirmation Message Configuration.


Expand
titleHint 2 (Which Actionflow?)

Modify the Save Actionflow on the New Student Form screen.


Expand
titleHint 3 (Bonus Task)
  1. From the palette, add a Header 1 - Static component to the screen and add the Display Text specified above
. 
  2. Within the Confirmation phase of the Save Actionflow,
add a  Insert excerpt_action_calculate_action_calculatenopaneltrue between the input node and the Open Screen node.

Add an Output Attribute with the Expression:

Code Block
themeEmacs
in.
  1. change the Input Connection Point to the New Student Form
  2. Map across the Name
  3. Map the
Output Attribute
  1. Name onto the Message dynamic text component.


Expand
titleSolution

Actionflow Setup & Mappings

Image Added

Task 3

titleHint 1 (Displaying WebIcon Attribute)

Set up the Students grid on the Student Management screen to contain a button in the Web column that open the student's website when clicked. Use the Action Icon 

Insert excerpt
_styles_ccs
_styles_ccs
nopaneltrue
,

WebsiteIcon
  • Web icon: Image Removed
    • Expand

    WebsiteIconStyle.

    • Unhide the WebIcon attribute by right-clicking the grid and selecting 

      Insert excerpt
      _view_show_config
      _view_show_config
      nopaneltrue
      .

    • In the View Attributes section, double-click the WebIcon attribute to open the 
      Insert excerpt
      _property_tabs
      _property_tabs
      nopaneltrue
    • On the 
      Insert excerpt
      _property_tabs
      _property_tabs
      namestyle
      nopaneltrue
      , in the Grid Settings, untick Always Hidden
      • Note the other hidden attribute, Website, this contains the URL. Leave this attribute hidden.

    .

    Expand
    titleHint
    2
    1 (Creating Actionflow and Icon Style)

    Set up the Actionflow and icon style by clicking the

    Web

    WebIcon header in the grid. In the Properties for the WebIcon View Attribute, click the 

    Insert excerpt
    _property_tabs
    _property_tabs
    nameaction
    nopaneltrue
    .

    Set an Action Method of Actionflow and create a new Actionflow.


    Expand
    titleHint 2 (Actionflow)

    This Actionflow has a similar setup to 1.14 Open URL Action Configuration, except it does not require a

    Insert excerpt
    _action_calculate
    _action_calculate
    nopaneltrue
     action.


    Expand
    titleHint 3 (Icon Style)

    For the Action Icon Style, click 

    Insert excerpt
    _styles_ccs_list
    _styles_ccs_list
    nopaneltrue
     to see the preconfigured styles in the app. Drag the 

    WebsiteIcon

    WebsiteIconStyle style into the Action Icon Style box on

    the 

    the

    Insert excerpt
    _property_tabs
    _property_tabs
    nameaction
    nopaneltrue
    , or you can create your own style using the WWWIcon.


    Expand
    title
    Hint 4 (Actionflow)

    This Actionflow is the same as the one setup in 1.14 Open URL Action Configuration, except the Expression for the Output Attribute is:

    Code Block
    themeEmacs
    in.Address
    Solution

    Icon Style and Grid Setup

    Image Added

    Actionflow Setup & Mappings

    Image Added  

    Assignment 3

    Difficulty Level: Hot

    Task 1

    When a new student is created on the New Student Form screen, we want the form to contain validation. Create a new validation rule stipulating:

    • the Name field is mandatory
    • the Name field must contain at least 3 characters
    • the Name field must adhere to the pattern, ^[A-Za-z\s-]+$

    .

    Expand
    titleHint 1 (How to set validation)

    Remember validation is setup on the inner input field.


    Expand
    titleHint 2 (Mandatory)

    Setting a field as mandatory is configured using the tick box and toggle button in the Validation section of the Properties tab.


    Expand
    titleHint 3 (New Validation Type)

    Create a new validation type with the following settings:

    Base Type: String

    Minimum Length: 3

    Pattern:

     ^

     ^[A-Za-z\s-]+$


    Expand
    titleSolution

    Screen Setup

    Image Added

    Task 2

    We want the status of a course to be dynamically updated to On Hold if the associated classroom's status is changed to Unavailable

    (use drop down, define the statuses)Add

    .

    • On your ERD, add an attribute to the School_ClassRooms data, with the name, ClassroomStatus, a Type of

     String

    •  String and a blank Expression

    Use
    • On the Classroom Availability Management screen
    to change the classroom status  
  • We want to see a list of the courses that each student is enrolled on. Set up a button, using a lookup, on the Student Management screen that opens the Courses Enrolled screen with this information on
    1. Bonus Task: Map the student name onto the dynamic text component, StudentName, so that when the Courses Enrolled button is pressed, the selected student name shows
      1. Image Removed
    • HTML Comment
    hiddentrue

    Assignment 2

    Configure the Student Management button in the menu

    Difficulty Level: Image Removed

    On the Course Management screen open the Insert excerpt_layers_layersnopaneltrue and expand the area, Screen Header
  • Expand the area, Right, and you will see two components - a button and a dynamic text field
  • Create an Actionflow on the button that uses the now function to insert today's date into a dynamic text field
    • HTML Comment
    hiddentrue

    Assignment #: Configure a button, that when pressed, shows today's date

    Difficulty Level: Image Removed

    On the Course Management screen open the Insert excerpt_layers_layersnopaneltrue and expand the area, Screen Header
  • Expand the area, Right, and you will see two components - a button and a dynamic text field
  • Create an Actionflow on the button that uses the now function to insert today's date into a dynamic text field
    • Expand
    titleQuestions to consider
    • Does this Actionflow require any data from the Course Management screen for it to run?
    • What type of Action Node can perform a function?
    • How do you write the results of the function to the text field on the screen?
    Expand
    titleHelpful Hints & Answers to the Above Questions
    • No data is required for the input
    • Use a Calculate Action to perform the function
    • You will need a create an output to write to the text field
      • The top level of the screen is called a Form
    • Remember to map all the way through the Actionflow
      • Check every connector to make sure the data you expect is being pushed through
    Expand
    titleReveal Answer
    Expand
    titleInput & Action Node Setup

    Setup the Input and Calculate Action

    Description?

    Right-click on the button on the screen and choose  Insert excerpt_actionflow_add_actionflow_addnopaneltrue
  • Enter a name for the Actionflow,
    1. Name: Populate Date Field
    2. Select Confirm
    • Select Click to Connect and for the input, choose the  Insert excerpt_actionflow_on_click_actionflow_on_clicknopaneltrue Action Event, then select Connect InputClick and drag the  Insert excerpt_action_calculate_action_calculatenopaneltrue icon from the toolbar onto the canvas
  • Enter a name for the Calculate Action and select Create Action 
    • The  Insert excerpt_property_tabs_property_tabsnopaneltrue for the Calculate Action will open on the rightIn the Output Attributes section, click the  Insert excerpt_add_icon_add_iconnopaneltrue iconEnter a name for the new Output Attribute and complete the following details:
  • Type: choose String

    • Expression: 

    Code Block
    now()
    Then  Insert excerpt_finish_finishnopaneltrue
  • Click and drag the input onto the Get Date Calculate Action
    • Expand
    titleOutput Setup

    Setup the Output and Write Back to the Screen

    DESCRIPTION?

    In the Connections panel on the left, click Insert excerpt_addIcon_addIconnopaneltrue Add to create a new connection point
  • Enter the following details for the new connection point:
    1. Name: out
    2. Type: choose Output
    3. Select Create Connection Point
    • Select Click to Connect and for the output, choose the  Insert excerpt_form_formnopaneltrue datasource
    1. Select Connect Output
  • Close the Mappings window that automatically opens
  • Hover over the Calculate Action node and select out
    • A red arrow will appear - click on the Insert excerpt_output_outputnameiconnopaneltrue output node under Connections
  • On the Mappings window, drag the attribute, TodayDate, from the left (Calculate Action) to the right (output connection point) to create an attribute on the output
    1. Select Save
    • Under Connections, right-click on the connector, out, and choose Insert excerpt_mappings_configure_mappings_configurenopaneltrue
  • Drag the TodayDate attribute from the left (output connection point) and drop it onto the DateField target parameter on the right (Course Management screen)
    1. Select Save
  • Close the Actionflow to return to the Course Management screen
    • Insert excerpt_lock_locknopaneltrue the screen and press the Button Date on the screen to see the Actionflow in actionWe can see that the Actionflow is working because it displays today's date in the format DD/MM/YY in the DateField dynamic text field
    • , add in the attribute you just created
    • Set up the screen so that the status can be changed using a fixed (custom) drop down list with the values, Available and Unavailable
      1. Your screen setup should look similar to this:Image Added

    .

    Expand
    titleHint 1 (Which Actionflow?)

    Configure the Save Actionflow on the Classroom Availability Management screen.


    Expand
    titleHint 2 (Which Action Node?)

    Use a 

    Insert excerpt
    _action_view
    _action_view
    nopaneltrue
     action and use the Help in 1.15 View Action Configuration.


    Expand
    titleSolution

    Screen Setup

    Image Added

    Actionflow Setup & Mappings

    Image Added

    Output Attribute in Calculate Action

    Image Added

    Actionflow Setup & Mappings

    Image Added

    Task 3

    We want to see a list of the courses that each student is enrolled on. Set up the Courses Enrolled button, using a lookup, on the Student Management screen that populates the Student is enrolled in tile. 

    • Map onto the string field, CourseIDFromView

    Bonus Task: Map the student name onto the dynamic text component, StudentName, so that when the Courses Enrolled button is pressed, the selected student name shows.

    Image Added

    .

    Expand
    titleHint 1 (Lookup Table)

    When creating your Lookup, you'll need to select the primary table, School Course Attendees.


    Expand
    titleHint 2 (Background Filter)

    Once your Actionflow is setup and the CourseID is being mapped into the CourseIDFromView field, remember to create a background filter.


    Expand
    titleSolution

    Actionflow Setup & Mappings

    Image Added

    Output Attributes in Calculate Action

    Image Added

    Lookup Mappings

    Image Added

    Actionflow Setup & Mappings

    Image Added

    Background Filter

    Image Added

    .

    Once you have verified your Actionflow is working, finish by hiding the tile (Column 2) that contains the CourseIDFromView string field.


    Image Added