Introduction

Welcome to Workflow Fundamentals. In this chapter we will learn about all the key techniques and principles to create our first application workflow in PhixFlow that models the logic of our business processes.

Concepts

To find out more about the key concepts for Workflows in PhixFlow before you take the course below, or simply to refresh your memory, see Creating Workflows.

Video Demonstration 

Watch the video demonstration, then complete the task list below.

Fundamentals Tasks

Finish the tasks below to complete the Fundamentals course.

Task 1: Create a

Workflow

1. Select 

   Insert excerpt
   _workflow _workflow nopanel true

    from the PhixFlow home page

2. Click 

   Insert excerpt
   _add _add nopanel true

    
3. On the Create Workflow window that appears, enter the name,:
   1. Name: Customer Approval
   ,
   2. Select 
   and select 
   1. Create

Task 2: Add

Nodes

1. On the workflow, click and drag the

   Insert excerpt
   _workflow_analysis_toolbar _workflow_analysis_toolbar nopanel true

    node from the toolbar onto the canvas

2. On the

   Insert excerpt
   _workflow_analysis _workflow_analysis nopanel true

    window:

   1. Name: Collect Companies

   2. Press Create Analysis Model

Task 3: Add and Change Swim Lanes

1. Right-click on the Swim Lane on the left of the screen, and choose

   Insert excerpt
   _edit _edit nopanel true

2. On the

   Insert excerpt
   _property_settings _property_settings nopanel true

   , in the Basic Settings, change the Label to:
   1. Web

   2. Insert excerpt
      _finish _finish nopanel true

       your changes
3. Right-click on the Swim Lane, Web, and choose

   Insert excerpt
   _workflow_swim_after _workflow_swim_after nopanel true

4. On the

   Insert excerpt
   _property_settings _property_settings nopanel true

   , in the Basic Settings, change the Label to:
   1. Sales

   2. Insert excerpt
      _finish _finish nopanel true

       your changes

Task 4: Rename Nodes

1. Add a Screen node for the screen you created in 3. Screens Fundamentals, by clicking

   Insert excerpt
   _screen _screen nopanel true

    on the toolbar 
2. The list of screens in your application appear in the 

   Insert excerpt
   _repository _repository nopanel true

3. Click and drag the Companies List screen onto the canvas
4. In the node

   Insert excerpt
   _property_settings _property_settings nopanel true

   , change the Name to:
   1. View Companies List

   2. Insert excerpt
      _finish _finish nopanel true

Task 5: Connect Nodes

1. Hover over the

   Insert excerpt
   _workflow_analysis_icon _workflow_analysis_icon nopanel true

    Collect Companies node and select the 

   Insert excerpt
   _workflow_connector_icon _workflow_connector_icon nopanel true

    icon
2. Then click on the

   Insert excerpt
   _screen_icon_only _screen_icon_only nopanel true

    View Companies List node to connect the two nodes together
3. From the toolbar, click and drag an

   Insert excerpt
   _actionflow _actionflow nopanel true

    node onto the canvas
4. On the

   Insert excerpt
   _actionflow_create _actionflow_create nopanel true

    window:
   1. Name: Open Companies Form
   2. Actionflow: select the

      Insert excerpt
      _add_icon _add_icon nopanel true

       button
      1. Name the Actionflow: Open Companies Form
      2. Click Confirm
   3. Click Create Actionflow
5. Connect the nodes by hovering over the 

   Insert excerpt
   _screen_icon_only _screen_icon_only nopanel true

    View Companies List node and selecting the 

   Insert excerpt
   _workflow_connector_icon _workflow_connector_icon nopanel true

    icon, then click on the 

   Insert excerpt
   _actionflow_icon _actionflow_icon nopanel true

    Open Companies Form node

Task 6: Screen Creation

1. Create another screen for editing a company by clicking and dragging a 

   Insert excerpt
   _screen _screen nopanel true

    node from the toolbar onto the canvas
   1. Name: Companies Form
   2. Press Create Screen
2. Connect this screen to the Actionflow by hovering over the 

   Insert excerpt
   _actionflow_icon _actionflow_icon nopanel true

    Open Companies Form node and selecting the 

   Insert excerpt
   _workflow_connector_icon _workflow_connector_icon nopanel true

    icon, then click on the 

   Insert excerpt
   _screen_icon_only _screen_icon_only nopanel true

    Companies Form node
3. Double-click on the 

   Insert excerpt
   _screen_icon_only _screen_icon_only nopanel true

    Companies Form nodeand select Yes to the Confirm message
4. On the

   Insert excerpt
   _action_screen_icon _action_screen_icon nopanel true

    Create Screen wizard, set the following:
   1. Name:Companies Form
   2. Open Maximised: toggle off 

      Insert excerpt
      _toggle_off _toggle_off nopanel true

   3. All Users can View Data: toggle on 

      Insert excerpt
      _toggle_on _toggle_on nopanel true

   4. Template:Edit Form
   5. Press Create Screen

Task 7: Unconnected Actions

1. Click back onto the Customer Approval Workflow tab
2. Double click the 

   Insert excerpt
   _screen_icon_only _screen_icon_only nopanel true

    View Companies List node
3. The

   Insert excerpt
   _property_settings _property_settings nopanel true

    for the screen will open on the right
4. Click the

   Insert excerpt
   _action_actionsTab _action_actionsTab nopanel true

    tab
5. In the Unconnected Actions section, click and drag the Open Companies Form action onto the Edit button on the screen

Task 8: Actionflow Creation

1. Click back onto the Customer Approval Workflow tab
2. Double-click the 

   Insert excerpt
   _actionflow_icon _actionflow_icon nopanel true

    Open Companies Form node to open the Actionflow
3. On the Actionflow, under Connections, select Click to Connect
4. Choose 

   Insert excerpt
   _actionflow_on_click _actionflow_on_click nopanel true

   , then press Connect Input
5. Click and drag the 

   Insert excerpt
   _input _input nopanel true

    onto the

   Insert excerpt
   _action_screen_icon _action_screen_icon nopanel true

    Open Screen (Companies Form) node

Task 9: Add Embedded Workflows

1. Click back onto the Customer Approval Workflow tab
2. From the toolbar, click and drag a

   Insert excerpt
   _workflow _workflow nopanel true

    node onto the canvas
3. On the

   Insert excerpt
   _workflow_create _workflow_create nopanel true

    window:
   1. Name: Onboarding Workflow
   2. Press Create Workflow
4. From the toolbar, click and drag an

   Insert excerpt
   _actionflow _actionflow nopanel true

    node onto the canvas
5. On the

   Insert excerpt
   _actionflow_create _actionflow_create nopanel true

    window:
   1. Name: Submit
   2. Actionflow: select

      Insert excerpt
      _add_icon _add_icon nopanel true

      1. Name: Submit
      2. Click Confirm
   3. Click Create Actionflow
6. From the toolbar, click and drag an

   Insert excerpt
   _actionflow _actionflow nopanel true

    node onto the canvas
7. On the

   Insert excerpt
   _actionflow_create _actionflow_create nopanel true

    window:
   1. Name: Save
   2. Actionflow: select

      Insert excerpt
      _add_icon _add_icon nopanel true

      1. Name: Save
      2. Click Confirm
   3. Click Create Actionflow
8. Hover over the 

   Insert excerpt
   _screen_icon_only _screen_icon_only nopanel true

    Companies Form node and select the 

   Insert excerpt
   _workflow_connector_icon _workflow_connector_icon nopanel true

    icon, then click on the 

   Insert excerpt
   _actionflow_icon _actionflow_icon nopanel true

    Save node
9. Repeat this to connect the 

   Insert excerpt
   _screen_icon_only _screen_icon_only nopanel true

    Companies Form node to the 

   Insert excerpt
   _actionflow_icon _actionflow_icon nopanel true

    Submit node, and the 

   Insert excerpt
   _actionflow_icon _actionflow_icon nopanel true

    Submit node to the

   Insert excerpt
   _workflow_icon _workflow_icon nopanel true

    Onboarding Workflow node

Task 10: Add External Nodes

1. On the toolbar, hover over

   Insert excerpt
   _workflow_external _workflow_external nopanel true

   , then click and drag a

   Insert excerpt
   _workflow_send_email _workflow_send_email nopanel true

    node onto the canvas
2. On the 

   Insert excerpt
   _workflow_create_send_email _workflow_create_send_email nopanel true

    window:
   1. Name: Email Accounts
   2. Press Create Action
3. Hover over the 

   Insert excerpt
   _actionflow_icon _actionflow_icon nopanel true

    Submit node and select the 

   Insert excerpt
   _workflow_connector_icon _workflow_connector_icon nopanel true

    icon, then click on the 

   Insert excerpt
   _workflow_send_email_icon _workflow_send_email_icon nopanel true

    Email Accounts node

Task 11: Add Descriptions to Nodes

1. Click on the 

   Insert excerpt
   _workflow_send_email_icon _workflow_send_email_icon nopanel true

    Email Accounts node

1. In the

   Insert excerpt
   _property_settings _property_settings nopanel true

   :
   1. Description: Email Account Managers
   2. Press

      Insert excerpt
      _save _save nopanel true

2. Hover over the node on the canvas to see the description

Task 12: Add Labels to Connectors

1. Select the connector between the 

   Insert excerpt
   _screen_icon_only _screen_icon_only nopanel true

    Companies Form node and the

   Insert excerpt
   _actionflow_icon _actionflow_icon nopanel true

    node Save node
2. In the

   Insert excerpt
   _property_settings _property_settings nopanel true

   :
   1. Label: Save Details
   2. Press 

      Insert excerpt
      _save _save nopanel true

3. Insert excerpt
   _save_saveModel _save_saveModel nopanel true

    the model

Further Reading (Optional)

For more information on the topics covered in this chapter, see the below links.

• Creating Workflows
• Adding Content to Workflow Models
• Workflow Swimlane
• Workflow Model Elements

Image Added Congratulations!

You have completed the Fundamentals course and have created a simple application. Feel free to play around with your application and add extra features, if you wish. Why not try Adding Grid Icons and Interactive Icons or try Adding a Navigation Menu Bar?

Next Steps

If you are interested in learning more about specific areas of PhixFlow, such as, screen building and data analysis, complete one of our full courses. Find these in the Learning Centre, along with other helpful resources and how-to articles.