By the end of this chapter you will understand what an Open Screen action is and how to use them, and you will have created an Open Screen Actionflow in your application.

What is an Open Screen Action?

The 

Creating Open Screen Actions

How do you add them (toolbar click and drag, or drag from toolbar), 

Add excerpt to properties page in hidden area

Worked Example

Here's a worked example using the school course data.

There are several ways to create 

Insert excerpt
_action_screen _action_screen nopanel true

 Actionflows.

Create Actionflow for Existing Screen

Use this method where the screen that requires opening already exists.

1. On the screen where the Actionflow will be initiated from, click 

   Insert excerpt
   _screen _screen nopanel true

   s in the toolbar to open the list of available screens
2. Drag and drop the required screen from the

   Insert excerpt
   _repository _repository nopanel true

    onto the button that will initiate the Actionflow, or drop anywhere and PhixFlow will create the button for you

Create Actionflow and Screen

Use this method to create the Actionflow and screen at the same time.

1. On the screen where the Actionflow will be initiated from, right-click on a button and choose

   Insert excerpt
   _actionflow_add _actionflow_add nopanel true

   1. Or, click Actionflow in the header tabs, then

      Insert excerpt
      _add _add nopanel true

2. On the Actionflow canvas, drag the 

   Insert excerpt
   _action_screen _action_screen nopanel true

    icon from the toolbar onto the canvas and follow the steps to create or open an existing screen
3. Alternatively, click the 

   Insert excerpt
   _action_screen _action_screen nopanel true

    icon in the toolbar to display existing screens in the application
   1. Existing screens can be dragged from the 

      Insert excerpt
      _repository _repository nopanel true

       onto the canvas to automatically create an Open Screen node

Create Actionflow and Screen using CRUD Wizard

A Grid Actions wizard is available to automatically create certain actions on a screen, such as Creating, Reading, Updating and Deleting data. These are referred to as CRUD actions. See Configure Action Buttons on 7. Editing Content on a Screen - Part 1.

Worked Examples

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

In this example, we are using:

• A Course Management screen containing a grid of the School Courses data - this screen was created using the Tile with Buttons template
• A Course Form screen containing form fields and associated with School Courses data by a background filter - this screen was created using the Edit Form template

We want to be able to add and edit the courses in our School Courses grid. To do this, we will create courses on a Course Management screen. The first step to doing this is by creating two Open Screen Actionflows. Both will open the same screen containing form fields, but when we are adding a new course , we want an empty input form fields, and when we are editing an existing course, we want the input form fields to contain course data.

Note: When creating a new screen in PhixFlow there is a Grid Actions wizard that will configure the Create, Read, Update and Delete (CRUD) actions for you. For the purposes of understanding the mechanics of Actionflows, we will create these manually.

Image Added

To save the new or edited course, the Save Action on the Course Form screen must be configured. This is covered in 1.09 Save Action Configuration.

Example 1: Open Screen to Add New Data

Create an Open

Screen Action that opens an empty input form.

1. On thescreen where the Actionflow will be initiated from

   Right

   , Course Management, right-click on the Image Modifiedbutton and choose 

   Insert excerpt
   _actionflow_add _actionflow_add nopanel true

   Expand
   title Can't see this option?
   Make sure your screen is Insert excerpt _unlock _unlock nopanel true ed. Image Added If you cannot see the toolbar across the top of the screen, your screen is Insert excerpt _lock _lock nopanel true ed. Right-click anywhere on the screen and choose  Insert excerpt _unlock _unlock nopanel true  the Screen.

   
   

2. Enter a name for the actionActionflow,
   1. Name: Add Course
   2. Select Confirm
3. Click the 

   Insert excerpt
   _action_screen _action_screen nopanel true

    icon in the toolbar to display the existing screens in your application
4. Drag the Course Form screen your pre-made 

   Insert excerpt
   _screen_icon_only _screen_icon_only nopanel true

    input form screen, Course Form, from the Repository onto the canvas to create an Open Screen nodeAlternatively, drag the an 

   Insert excerpt
   _action_screen _action_screen nopanel true

    icon from the toolbar onto the canvas and follow the steps to create or open an existing screen
5. Connect the Open Screen node to the Image Removedbutton by selecting Click to Connect
6. For  node

7. Select Click to Connect under Connections and for the input, choose the 

   On Click

   Insert excerpt
   _actionflow_on_click _actionflow_on_click nopanel true

    Action Event, then select Connect Input

8. Click

   On the canvas, click and drag the 

   Insert excerpt
   _driving_interface_connection_point _driving_interface_connection_point name icon nopanel true

    icon onto
   the Open Course Form

   the 

   Insert excerpt
   _action_screen_icon _action_screen_icon nopanel true

    Open Screen action node to connect the input to the action

   Expand
   title Checkpoint
   Image Added

   
   

9. Close the Actionflow to return to the Course Management screenLock the

10. Insert excerpt
    _lock _lock nopanel true

     the screen and press the  button to see the Actionflow in action
    1. We can see that the Actionflow is working because it displays opens an empty form

Example 2: Open Screen to Edit Existing Data

Create an Open Screen Action that opens an input form containing data from the school courses grid.

1. On the Course Management screen , where the Actionflow will be initiated from, right Course Management, check it is 

   Insert excerpt
   _unlock _unlock nopanel true

   ed
2. Right-click on the  button and choose 

   Insert excerpt
   _actionflow_add _actionflow_add nopanel true

3. Enter a name for the actionActionflow,
   1. Name: Edit Course
   2. Select Confirm
4. Click the 

   Insert excerpt
   _action_screen _action_screen nopanel true

    icon in the toolbar to display the existing screens in your application
5. Drag the Course Form screen from the Repository onto the canvas to create an Open Screen nodeAlternatively, drag the your pre-made 

   Insert excerpt
   _

   action

   screen_icon_only _screen

   _

   action

   icon_

   screen

   only nopanel true

    icon  input form screen, Course Form, from the toolbar Repository onto the canvas and follow the steps to create or open an existing screenConnect the Open Screen node to the Image Removed button by selecting
6. Select Click to Connect For and for the input, choose the School _ Courses View Component, then select Connect Input
7. The Mappings window will open:
   1. Drag the CourseID attribute from the left (Tile Body) to Grid) into the Drag and Drop space on the right (Edit CourseConnection Point), then click Save
   2. 
8. Click On the canvas, click and drag the 

   Insert excerpt
   _driving_interface_connection_point _driving_interface_connection_point name icon nopanel true

    icon onto the Open Course Form node

   Insert excerpt
   _action_screen _action_screen nopanel true

    action node to connect the input to the action
9. Right-click the connection wire connector between the input node and Open Screen node

   Insert excerpt
   _input _input nopanel true

    node and

   Insert excerpt
   _action_screen _action_screen nopanel true

    node on the canvas
10. Choose Open Mappings and

    Insert excerpt
    _open_mappings _open_mappings nopanel true

     and the Mappings window will open:

    1. Drag the CourseID attribute from the left (

       Edit Course) to

       Actionflow) onto the CourseID attribute on the right (

       Open Course Form

       Screen), then click Save
       

       Expand
       title Checkpoint
       Image Added

       
       

11. Close the Actionflow to return to the Course Management screenLock the screen

12. Insert excerpt
    _lock _lock nopanel true

     the screen and press the button to see the Actionflow in action
    1. We can see that the Actionflow is working because it displays the data from the School Courses grid to in the edit form

Image Modified