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

Select Workflow from the PhixFlow home page
Click Add New
On the Create Workflow window that appears:
1. Name: Customer Approval
2. Select Create

Task 2: Add Nodes

On the workflow, click and drag the Analysis node from the toolbar onto the canvas
On the Create Analysis Model window:
1. Name: Collect Companies
2. Press Create Analysis Model

Task 3: Add and Change Swim Lanes

Right-click on the Swim Lane on the left of the screen, and choose Edit
On the Properties, in the Basic Settings, change the Label to:
1. Web
2. Apply and Close your changes
Right-click on the Swim Lane, Web, and choose Add lane after
On the Properties, in the Basic Settings, change the Label to:
1. Sales
2. Apply and Close your changes

Task 4: Rename Nodes

Add a Screen node for the screen you created in 3. Screens Fundamentals, by clicking Screen on the toolbar
The list of screens in your application appear in the Repository
Click and drag the Companies List screen onto the canvas
In the node Properties, change the Name to:
1. View Companies List
2. Apply and Close

Task 5: Connect Nodes

Hover over the Collect Companies node and select the icon
Then click on the View Companies List node to connect the two nodes together
From the toolbar, click and drag an Actionflow node onto the canvas
On the Create Actionflow window:
1. Name: Open Companies Form
2. Actionflow: select the button
  1. Name the Actionflow: Open Companies Form
  2. Click Confirm
3. Click Create Actionflow
Connect the nodes by hovering over the View Companies List node and selecting the icon, then click on the Open Companies Form node

Task 6: Screen Creation

Create another screen for editing a company by clicking and dragging a Screen node from the toolbar onto the canvas
1. Name: Companies Form
2. Press Create Screen
Connect this screen to the Actionflow by hovering over the Open Companies Form node and selecting the icon, then click on the Companies Form node
Double-click on the Companies Form nodeand select Yes to the Confirm message
On the Create Screen wizard, set the following:
1. Name: Companies Form
2. Open Maximised: toggle off
3. All Users can View Data: toggle on
4. Template: Edit Form
5. Press Create Screen

Task 7: Unconnected Actions

Click back onto the Customer Approval Workflow tab
Double click the View Companies List node
The Properties for the screen will open on the right
Click the Actions tab
In the Unconnected Actions section, click and drag the Open Companies Form action onto the Edit button on the screen

Task 8: Actionflow Creation

Click back onto the Customer Approval Workflow tab
Double-click the Open Companies Form node to open the Actionflow
On the Actionflow, under Connections, select Click to Connect
Choose On Click, then press Connect Input
Click and drag the input onto the Open Screen (Companies Form) node

Task 9: Add Embedded Workflows

Click back onto the Customer Approval Workflow tab
From the toolbar, click and drag a Workflow node onto the canvas
On the Create Workflow window:
1. Name: Onboarding Workflow
2. Press Create Workflow
From the toolbar, click and drag an Actionflow node onto the canvas
On the Create Actionflow window:
1. Name: Submit
2. Actionflow: select
  1. Name: Submit
  2. Click Confirm
3. Click Create Actionflow
From the toolbar, click and drag an Actionflow node onto the canvas
On the Create Actionflow window:
1. Name: Save
2. Actionflow: select
  1. Name: Save
  2. Click Confirm
3. Click Create Actionflow
Hover over the Companies Form node and select the icon, then click on the Save node
Repeat this to connect the Companies Form node to the Submit node, and the Submit node to the Onboarding Workflow node

Task 10: Add External Nodes

On the toolbar, hover over External, then click and drag a Send Email node onto the canvas
On the Create Send Email window:
1. Name: Email Accounts
2. Press Create Action
Hover over the Submit node and select the icon, then click on the Email Accounts node

Task 11: Add Descriptions to Nodes

Click on the Email Accounts node

In the Properties:
1. Description: Email Account Managers
2. Press Apply
Hover over the node on the canvas to see the description

Task 12: Add Labels to Connectors

Select the connector between the Companies Form node and the Save node
In the Properties:
1. Label: Save Details
2. Press Apply
Save the model

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.

Browser not supported