Live Forms v6.1 is no longer supported. Click here for information about upgrading to our latest GA Release.
Flow Tutorial
Approval workflows are everyday actions that businesses perform on a routine basis. This tutorial will show how easy it is to create an Approval Workflow using . We will start with a simple workflow and add to it for each example discussed to demonstrate some design patterns and different features. The final workflow will be an example of a services Purchase Order workflow. We will create:
- A screenflow - allows you to collect a lot of information in a series of small steps
- A workflow where one of the steps is performed by someone outside the company (anonymous)
- An Approval workflow where one of the steps is only routed for additional approvals if certain conditions are met.
If you need basic help using the Flow designer, please refer to the Getting Started with Workflows guide, and then return here.
What are we going to build?
Many companies offer software services to their new and existing clients. The final workflow in this tutorial will be a Purchase Order workflow for services that follows this business scenario:
- A sales person accesses the company's Purchase Order form, fills in the customer's email address and other required information, signs it and clicks Continue.
- sends a customized email to the customer that contains a link to the PO.
- The customer clicks on the link, reviews the Purchase Order, approves and signs it or sends it back to the company for corrections
- The workflow is routed back to the sales person.
- The sales person reviews the PO, and sends it to his manager for approval. The manager receives an email.
- The manager clicks on the link in the notification email, logs onto to review the PO via the Task List. He approves or sends it back to the sales person for corrections.
- If approved by the manager and the total amount of the PO is greater than $10,000.00, the workflow is routed to the VP for final approval.
On This Page:
What You will need:
You need either a Live Forms Online account -- signup for a 30 day trial if you don't already have an account. Or use a working Live Forms In-house software installation. If you are using In-house software you will also need to create a tenant, add a designer user to that tenant and configure email.
Example Applications
There are 2 applications that can be downloaded to help with this tutorial:
- Download PurchaseOrderCompleted_app.zip if you want to view the completed workflows discussed below.
- Download PurchaseOrder_app.zip if you want to build each example workflow yourself as you progress through the tutorial.
In either case, you must upload the application(s) to your user account. Follow these steps:
- Log into your tenant as the designer user.
- Click the Upload icon at the top of the Application Home Page.
- Browse for the downloaded application zipfile (PurchaseOrderCompleted_app.zip or PurchaseOrder_app.zip).
- Do not check the Replace or Copy checkboxes.
- Click the Upload button.
The application is uploaded and immediately appears in your list of applications.
Example 1 - Purchase Order workflow
Let's begin by creating a simple screenflow consisting of the Client and Services forms that the sales person will use to create the Purchase Order. A screenflow is a type of workflow where all the steps are filled in by the same user. The Client form contains a read-only information section (first name, last name, and email) that will be automatically populated with the sales person's information using a business rule and a second section to collect information about the customer requesting the services. The Services form contains fields to describe the requested services and business rules to calculate the cost.
We will add a form action to customize the message displayed to the sales person when the workflow is completed.
Create the Purchase Order workflow
To create this workflow, follow these instructions:
- Click the Edit icon for the Purchase Order application.
- Click the Flows tab to open the Flows home page
- Click the New icon to create a new flow. Click on the toolbar to display the flow properties panel. Type "Example 1 - PO Screenflow" in the Flow Name field.
If the Palette is contracted, click in the header to expand it. Drag the Client form from the palette and drop it on the flow designer canvas. This form will be the first step in the flow.
Drag the Services form from the palette and drop it below the Client form. The Services form will be the second step in the flow.
Click on the what does the user see icon in the tool bar to customize the message the sales person will see when the flow is completed:
Click on the Display Message wizard. Copy the message below into the Message box then click Finish. {ClientName} and {ClientCompanyy} are examples of templates. Templates are specified by surrounding the name of a control in your form with curly braces. will use the values entered into the Client Name and Client Company fields at runtime.
The Purchase Order for {ClientName} at {ClientCompany} is complete.
At this point, your workflow should look like this:
Click the save and exit icon to save your work.
If you want to see the details of the forms, click on a step in the flow designer then click the Edit icon on that step. The form will display in the forms designer. You can view the business rules by clicking on the Rules icon.
Test Example 1:
- Click the Test icon for your workflow. Note the Creation Date, sales person's first name, last name and email address are automatically populated.
- Fill in the customer contact name, email address, company name and phone number. Empty controls displaying a yellowish background are required. Required controls must contain valid data in order to continue to the next step and submit the form.
- Click the Continue button to proceed to the next step.
- Fill in the Client Services Order. Notice the Amount and Total Amount columns calculate the cost. These calculations are handled by business rules already setup in the PO form.
- Fill in at least two rows of the Client Services table. Delete a row - notice the amount previously calculated for this row is automatically subtracted from the Subtotal and the Total.
- Sign the form as the sales person (designer user) - you can use your mouse or type the name into the Type Name field.
- Verify that the Date Signed field is populated with the current date.
- Click the Finish button. You will see your customized display message.
- If you want to see how the workflow will look on an iPad or an iPhone, close the window, click the Test icon again then click the Tablet or Smart phone buttons at the top of the test screen.
Example 2 - Send the PO for Signature
This workflow sends the Purchase Order electronically to the customer for their review and signature. The customer's email address is entered by the sales person on the first step. An email is sent to the customer with a link to the PO. The customer clicks the link to review the PO, approves and signs it or sends it back to the sales person for corrections. sends a copy of the signed PDF to the sales person by email. Note, the customer does not have to be logged into a tenant (anonymous) to perform the Approval step.
We will create a new workflow that can be modified for subsequent examples in this tutorial. The workflow will have:
An anonymous Email activity for the step that the customer signs.
Customized messages for Task notification emails to the customer and sales person.
A document action to send an email to the sales person and the client. A signed PO is attached to the email when the workflow is completed.
You will need at least one valid email address to test this workflow.
Create the Purchase Order workflow:
We will replace the Client and Services steps with a single step using a form named PO. The PO form contains these additions:
- an Agreement section that the customer can sign
- a business rule to show and hide the Agreement section based on the step of the workflow being executed
- a business rule to prefill the DateSigned field when the customer signs
- a business rule to make the signature field required if the customer checks "yes" on the approval control
Follow these instructions:
- Click the Edit icon for the Purchase Order application.
- Click the Flows tab to open the Flows Home Page.
- Click the New icon to create a new workflow. Click on the toolbar to display the workflow properties panel. Type "Example 2 - Send the PO for Signature" in the Flow Name property on the left.
Drag the PO form from the Palette and drop it on the flow designer canvas. The PO form will be the first step in the workflow.
- Click on the PO step. Make sure the printable property is checked on this step. We are creating our flow using the linked steps design pattern. Checking the printable property on the original form guarantees that the original form and any linked steps in the flow are included in the pdf.
- Type "Send to client" in the Continue Label property.
- Click the Link icon to create a copy of this step. A linked copy of the PO form (dashed border), is added to the flow.
- Click on the linked PO step:
- Change the name to "Client Approval" by typing it in the Name field in the Properties panel.
Type "Send to frevvo, Inc" into the Continue label property to change the text to something more meaningful.
- Click the Setup Approval/Rejection link, uncheck the Reject to here and Reject from here checkboxes. The Reject button feature will be discussed in a later example.
- Drag the Email activity from the Palette and drop it in between the PO and Client Approval steps.
- Click on the Email step.
Enter the template {ClientEmail} into the Email address property. ClientEmail is the field in the Client form where the sales person enters the email address of the customer. sends the PO to the email address entered in that field. This is an example of a template. Note the control name is encased in curly braces.
Enter "Purchase Order Sent to {ClientEmail} for Signature" in the Pending Message property. This will be the message that the sales person sees after they click the Continue button.
Click on the Setup Task Notification Link. Type the subject for the email - "Purchase Order from frevvo". Copy the text below into the message field to replace the existing message. This is the email the customer receives.
{ClientName}, <br/><br/> Please review and sign this Purchase Order from frevvo Inc. by clicking on <a href="{task.notify.url}">this link</a>. <br/><br/> Thank You.
- Click Finish.
Configure the email the sales person receives:
- Click the what happens to my data icon on the toolbar.
- Click on the Email data to a specified address wizard.
- Enter {SalesEmail} and {ClientEmail} in the To: field. Separate them with a comma or semi-colon.
- Select PDF from the Send Snapshot dropdown. This adds a pdf to the email after the customer approves it or requests corrections.
- Uncheck the Send Data checkbox.
- Click Next
- Enter "Purchase Order for {ClientName} at {ClientCompany}" in the subject field.
Copy the text below into the message field to replace the existing message.
The Purchase Order from {ClientName} at {ClientCompany} is attached. Please review. <br/> Thank You.
- Click the Finish button.
- Customize the message the client will see when they click the Send to frevvo, Inc button.
Click on the what happens to my data icon in the tool bar.
Click on the Display Message wizard. Enter "The Purchase Order for {ClientName} at {ClientCompany} was saved.".
- Click Finish.
- Change the visibility of the workflow to public so the customer (anonymous user) can access it. To do this:
Click the lock icon on the toolbar. This will pop up a window where the designer can specify permissions.
Change the Visibility from “Public in Tenant” to “Public” for the Permission “Who can use the flow”.
- Click Finish.
- At this point, your workflow should look like this:
- Click the save and exit icon to save your work.
If you want to see the details of the forms, click on a step in the flow then click the Edit icon on that step. The form will display in the forms designer. You can view the business rules by clicking on the Rules icon.
Test Example 2:
- Click the Test icon for your workflow. Click the blue right arrow to expand the Instructions section. This section is only visible to internal employees of the company.
- Fill in the the PO.
- Click the Continue button to proceed to the next step.
- Fill in the Client Services Order, click the Sign this section button to sign the form as the sales person.
Click the Send to Client button. You will see your customized pending message.
Log out of
sends a notification email with your customized subject/message to the email address specified in the Primary Contact Email Address field on the first step.
Open the customer's email with a "Purchase Order from frevvo" subject. Click on the link provided.
The customer will see the completed PO and a section where they can sign to approve the PO or send it back if corrections are needed.
Approve the PO for now. We will cover rejecting the PO in a later step. Sign as the customer. Verify the Date Signed field is populated with the current date after signing.
Click the Send to frevvo, Inc button. You will see your customized message.
The sales person and the client receive an email "Purchase Order for {ClientName} at {ClientCompany}" at the subject.
- Open one of the emails and click on the pdf. Verify the Client Information, Client Services details and the Agreement section with the customer's signature are included.
If you want to see the details of the forms, click on a step in the flow then click the Edit icon on that step. The form will display in the forms designer. You can view the business rules by clicking on the Rules icon.
Example 3 - PO for Sales Review
The PO form has a hidden field that is populated with the user id of the sales person by a business rule. We will add a step to the workflow that uses the information in this field to route the workflow back to the sales person. We can also customize the Task List notification email that the sales person receives.
Modify the workflow
If you want to keep the Example 2 workflow intact, download it by clicking the download icon on the Flows Home page then upload it to make a copy. Make these changes to the copy. Or you can simply edit Example 2 to create this workflow.
Click the Edit icon for the workflow you want to modify. Change the name to "Example 3 - PO for Sales Review"
Add the Sales Review step:
- Click on the PO form, and then click the Link icon.
- A linked copy of the PO form, bordered by dashed lines, will be added to the flow. Drag this step below the Client Approval step.
- Click on the linked PO step, change the name to "Sales Review" by typing it in the Name field on the Properties panel.
- Type {SalesID} in the User property on the Property panel.
- Type "Thank you! Your PO has been sent back to frevvo Inc." in the Pending Message property. This is the message the client will see when they click the Send to frevvo, Inc button on the previous step.
- Type Client: {ClientCompany} in the Task Info property. The Task Info helps the sales person identify the task on the Task List.
To customize the task notification email the sales person receives:
- Click on the Setup Task Notification Email link.
- Type "Review PO from {ClientName}" in the subject field. You can select the control name from the dropdown to the left of the subject field. Leave the default message.
Click Finish.
- At this point, your workflow should look like this when you click on the toolbar:
- Click the save/exit icon to save your changes.
Test Example 3:
- Click the Test icon.
- Fill in the PO and sign as the sales person. Click the Send to client button.
- Log out of .
- Check the email account for the customer. Access the notification email, click on the link provided.
- Approve the PO. Sign as the customer.
- Click the Send to frevvo, Inc button. You will see your customized pending message.
- Check the sales person's email account. Click the link in the notification email.
- Log into as the designer.
- The Task List for the designer displays. Notice the task came from an anonymous user and where the Task Info displays on the Task List.
- Click the Perform icon.
- Review the PO and click the Finish button.
Check the email account for the sales person. Verify that the pdf shows the Client and Sales information, the Client Service Order details and the Signed Agreement section.
Example 4 - PO for Manager Approval
Create/Modify Users:
Users can also only be created by the tenant administrator. The steps are:
Log on to as the tenant admin.
Click Manage Users on the Manage tenant page
Click the add new user icon which will bring up the Add New User form
Enter "jerry" as the User Name then enter all the required information - leave the Reports To and Roles fields empty. Click submit
You should be back on the user list - click the edit user icon for the designer user.
Select jerry from the Reports To dropdown. Click Submit.
Modify the PO step:
Add the Manager Approval section:
2. Drop a Section control to the bottom of the form
Click on the section label and change it to "Manager Approval". The control name will automatically become ManagerApproval.
Uncheck the Visible checkbox
Click the Security tab
Set the Signature property to "Text/Signature Image"
Check the Must Sign property
Drop a textarea control inside the section
Name it "Manager Comments"
Modify the Show/Hide Section Rule:
Click the rules icon on the toolbar. We will edit an existing rule so that the Manager Approval section is hidden until we get to the Manager step.
Click the icon to edit the rule "Show/Hide Sections" .
Add ManagerApproval.visible = true; into the else if (an === "Manager Approval") section. Click the arrow to see how the rule should look with this line added.
Click save/exit icon to save the changes to the PO form.
Modify the workflow:
Create a new linked step from the PO step.
Drag it to the end of the flow.
Type "Manager Approval" in the Name property.
Type "{subject.reports.to}" in the User property.
Type "PO sent for your Manager's Approval" in the Pending Message property.
Type "Client: {ClientCompany}" in the Task Info property.
To customize the task notification email the manager receives, click the Setup Task Notification link.
- Type "Approval needed for PO from {ClientCompany}" in the Subject field. Leave the default message. Click Finish.
Click to select the Sales Review step.At this point, your workflow should look like this:
- Type "Send to Manager" in the Continue Label property.
- Type "Send to Manager" in the Continue Label property.
- Click the save/exit icon to save your changes.
Test Example 4:
- Click the Test icon. Fill in the PO and sign as the sales person. Click the Send to client button.
- Log out of .
- Check the email account for the customer. Access the email with the subject "Purchase Order from frevvo", click the link provided.
- Approve and sign the PO as the customer.
- Click the Send to frevvo, Inc button.
- Check the sales person's email account. Find the notification email with the subject "Review PO from {ClientName}" and click the link.
- Log in as the designer, click the perform icon, review the PO then click Send to Manager. Logout.
- Check the manager's email for the notification email with a subject "Approval needed for PO from {ClientCompany}". Click the link in the email.
- Log in as jerry. Jerry's Task List displays. Notice that this task comes from the designer user.
- Click the Perform icon. Note the Manager Approval section displays as specified by the Show/Hide rule.
- Add a comment and sign as the manager. Click Finish.
The sales person and the client receive emails with the signed/approved pdf. Verify that the pdf shows the Client/Sales information, the Client Service Order details, the Signed Agreement and Manager Approval sections.
Example 5 - PO for VP Approval
Create the VP role:
Roles can only be created by the tenant administrator. The steps are:
Login to as the tenant admin.
Click the Manage Roles link.
Click the plus icon.
Type "VP" into the role name and click Submit
Create a user with the role of VP:
Click Manage Users on the Manage tenant page
Click the add new user icon which will bring up the Add New User form
Enter "ed" as the User Name then enter all the required information.
Leave the Reports To field empty
Select the VP role from the role dropdown. Click Submit.
You should be back on the user list. Logoff.
Modify the PO step:
Add the VP section:
2. Drop a Section control to the bottom of the form
- Click on the section label and change it to "VP Approval". The control name will automatically become VPApproval.
- Uncheck the Visible checkbox
- Click the Security tab
- Set the Signature property to "Text/Signature Image"
- Check the Must Sign property
- Drop a textarea control inside the section
- Name it "VP Comments"
Modify the Show/Hide Section Rule:
Click the rules icon on the toolbar. We will edit an existing rule so that the VP Approval section is hidden until we get to the VP step.
Click the icon to edit the rule "Show/Hide Sections"
- Add these lines into the else if (an === "VP Approval") section:
ManagerApproval.visible = true;
VPApproval.visible = true;
Click the arrow to see how the rule should look with these lines added.
Click the save/exit icon to save the changes to the PO form.
Modify the workflow:
- Create a new linked step from the PO step.
- Drag it to the end of the flow.
- Type "VP Approval" in the Name property.
- Select VP from the Role list
- Set the Pending Message property to "PO sent for VP Approval".
- Type "Client: {ClientCompany}" in the Task Info property.
To customize the task notification email the VP receives, click the Setup Task Notification link.
- Type "VP Approval needed for PO from {ClientCompany}" in the Subject field. Leave the default message. Click Finish.
- Click to select the Manager Approval step.
- Set the Continue Label property to "Send to VP".
- At this point, your workflow should look like this:
- Click the save/exit icon to save your changes.
Test Example 5:
- Click the Test icon. Fill in the PO and sign as the sales person. Click the Send to client button.
- Log out of .
- Check the email account for the customer. Access the email with the subject "Purchase Order from frevvo", click the link provided.
- Approve and sign the PO as the customer.
- Click the Send to frevvo, Inc button.
- Check the sales person's email account. Find the notification email with the subject "Review PO from {ClientName}" and click the link.
- Log in as the designer, click the perform icon, review the PO then click Send to Manager. Logout.
- Check the manager's email for the notification email with a subject "Approval needed for PO from {ClientCompany}". Click the link in the email.
- Log in as jerry. You will see the manager's Task List
- Click the Perform icon. Note the Manager Approval section displays as specified by the Show/Hide rule.
- Add a comment and sign as the manager. Click Send to VP. Logout.
Check the email account for the VP. Find the notification email with the subject "VP approval needed for PO from {ClientCompany}. Click the link in the email.
Log in as ed. You will see the VP's Task List
- Click the Perform icon. Note the Manager Approval and VP Approval sections display as specified by the Show/Hide rule.
- Add a comment and sign as the VP. Click Finish. Logout.
The sales person and customer receive emails with the signed/approved pdf. Verify that the pdf shows the Client/Sales information, the Client Service Order details, the Signed Agreement,Manager Approval and VP sections.
Example 6 - PO conditional routing
In , preconditions are used to add logic to your flow to skip or perform a step when the condition is true.
We will add a precondition on the VP Approval step to route the workflow to the VP only if the Total Amount of the PO is greater than or equal to $10000.00. When the VP approves, the flow will be completed and the sales person and client receive emails with the signed pdf.
If the amount of the PO is less than $10,000.00 then the VP step will be skipped and the flow will end with the Manager Approval step. The sales person and the client will get the email with the signed pdf.
Modify the workflow:
- Click on the Manager Approval step and change the text of the Continue button to say Finish or Send to VP step.
Click on the "VP Approval" step
Type " TotalAmount.value >= 10000 into the Precondition property.
- Click the save/exit icon to save your changes.
Test Example 6:
Follow these steps to test Example 6:
- Click the Test icon. Fill in the PO with a total amount greater than or equal to $10000.00. Sign as the sales person. Click the Send to client button.
- Log out of .
- Check the email account for the customer. Access the email with the subject "Purchase Order from frevvo", click the link provided.
- Approve and sign the PO as the customer.
- Click the Send to frevvo, Inc button.
- Check the sales person's email account. Find the notification email with the subject "Review PO from {ClientName}" and click the link.
- Log in as the designer.
- Click the Perform icon, review the PO then click Send to Manager. Logout.
- Check the manager's email for the notification email with a subject "Approval needed for PO from {ClientCompany}". Click the link in the email.
Log in as jerry. You will see the manager's Task List.
Click the Perform icon. Add a comment and sign as the manager. Click Finish or Send to VP. Logout.
- Check the email account for the VP. Find the notification email with the subject "VP approval needed for PO from {ClientCompany}. Click the link in the email.
- Log in as ed. You will see the VP's Task List
- Add a comment to the VP Approval section. Click Finish. The sales person (designer) and the customer will receive an email with the signed PO. Check the pdf to make sure the VO approval is included.
- Run the workflow again with a Total Amount that is less than $10000.00. The workflow is finished after the Manager Approval step.The sales person and client receive an email with the signed pdf.
Since we have seen working examples of how the Task Notification emails work, you can bypass them if you prefer when testing workflows going forward. Simply log into or out of using the login screen, You will still have to access the anonymous step via email.
Example 7 - PO Reject
What happens if the manager or VP need more information or corrections made to the PO before approving? They can send the PO back to an earlier step by clicking the reject button. When a task is rejected, the user who it is being sent back to receives an email informing them of the reason for the rejection.
The designer configures which steps display a Reject button via the Setup Approval/Rejection wizard. Simply check/uncheck the Reject to here or Reject from here checkboxes for each step in the workflow. The reject button label can also be modified on any step.
You cannot add a reject button to an email step in a flow. You can, however, add one to a step performed by an anonymous user (our Client Approval step). For example, clicking the Reject button on this step allows the customer to send the PO back to the sales person (designer) for corrections. Once the corrections are made, the flow is sent back to the customer for another review and the flow continues to completion if the customer approves.
Modify the workflow:
Make a copy (download/upload) of Example 6 and name the new flow "Example 7 - "PO Reject". You can change the button label on any step where Reject from here is checked.
- Click the PO step then click on the Setup Approval/Rejection link.
- Check "Reject to here" and uncheck "Reject form here" then Submit. Since this is the first step in the flow, there are no steps before it to reject to. If you leave it checked, it will be ignored.
- Click Submit.
- Click the Email step, You'll see there is no Setup Approval/Rejection link. This simply sends an email with a link to the Client Approval step..
- Click the Client Approval step.
- Leave Reject to here unchecked and check Reject from here.
- Change the Reject Button Label to "Send PO back for revision".
- Click Submit.
- Click the Sales Review step then click on the Setup Approval/Rejection link.
- Verify that Reject from here and Reject to here are unchecked.
- Click Submit.
- Click the Manager Approval step then click on the Setup Approval/Rejection link.
- Verify that Reject from here and Reject to here are checked. . The manager can reject the flow back to the sales person and the VP can reject the flow back to the manager step.
- Change the Reject Button Label to "Reject PO".
- Click Submit
- Click the VP Approval step then click on the Setup Approval/Rejection link.
- Check Reject from here and uncheck Reject to here. Since this is the last step in the flow, there are no steps after it that can reject back to it. If you leave it checked, it will be ignored.
- Change the Reject button Label to "Reject PO".
- Click Submit.
- Click the save/exit icon to save your changes.
Test Example 7:
Click the Test icon. Fill in the PO with an amount over $10,000.00. There is no Reject button on this step. Sign as the sales person, click the Send to client button then logout.
Check the email account for the customer. Access the email with the subject "Purchase Order from frevvo", click the link provided.
Notice the reject button with the label Send PO back for revision. Click on this button.
- Click the down arrow for the To dropdown on the Rejection screen. Select the step in the flow to send the flow back to - in our case - PO - (designer) who is the sales person.
- Provide an explanation for rejecting the PO in the Reason box. Click Submit.
- The message "Task successfully rejected" displays.
- Check the email for the sales person (designer user). Notice the email with the title "You have a new task for Example 7 - PO Reject"
- Open this email. The reason for the rejection is shown in the body of the email. There is no link to the flow embedded in the rejection email. The ability to customize the rejection email will be available in a future release.
Log in as the sales person (designer user). Click My Tasks then click the perform icon, review the PO, make a change, sign then click Send to client. Logout.
- Check the email account for the customer. Access the email with the subject "Purchase Order from frevvo", click the link provided.
- Approve the corrected PO, sign and click the Send to frevvo, Inc button.
Log in as the sales person (designer user). Click My Tasks then click the perform icon. Review the PO then click Send to Manager. Logout.
Log in as jerry. You will see the manager's Task List. Click the Perform icon. Notice the Reject PO button on this step.
Approve the PO as the manager, sign then click Finish or Send to VP. Logout.
Login as ed. You will see the VP's Task List. Click the Perform icon. Notice the Reject PO button on this step.
Click Reject PO. A list of steps that you can send the task back to displays when you click the down arrow in the To dropdown. In this example, the VP can reject the task back to the manager Jerry or the sales person (desiger user).
Select Manager Approval (jerry) from the dropdown then fill in a reason for the rejection - "Does this project conflict with the Sales Conference in LA". Click Submit. The message "Task successfully rejected" displays.
Click the Inbox icon. The task is removed from the VP's Task List. Logout.
The manager receives an email with the subject "You have a new task for {your flow name}" This email cannot be customized. Note the reason for the rejection is included in the email body.
Log in as jerry. You will see the manager's Task List. Click the Perform icon. Change the comment to inform the VP that the project does not conflict with the conference. sign and click Finish or Send to VP. Logout.
Log in as ed. You will see the VP's Task List. Click the Perform icon.
Approve, sign then click Finish. Logout. The sales person (designer) and the customer will receive an email with the signed PO.
Example 8 - Save/load
The Save/Load property adds a Save button to a workflow step. If the sales person cannot complete the PO in one session, they can partially fill the purchase order form, save it, then return to complete it at a later date. We will add the Save button to the PO step in this example. Also, we will take this opportunity to view the audit trail - a feature that is available for any task in the Task List. The audit trail is very useful when you want to view the task's history.
Modify the workflow:
Make a copy (download/upload) of Example 7 and name the new flow "Example 8 - "Save/Loadl"
Click on the flow designer toolbar to display the flow Properties panel. Check the Save/Load property.
- Click the PO step to display the property panel for this step. Verify that the Save/Load property is checked.
- Click all the remaining flow steps and uncheck the Save/Load property.
- Click the save/exit icon to save your changes.
Test Example 8:
- Click the Test icon. Fill in a few fields on the PO. Note the Save button is added.
- Click Save. The "Save successful" message displays.
- Click My Tasks
- Since the sales person only has one task in the Task List, the saved task will display. However, if you have many tasks in the list and you only want to see the partially completed ones, click the Saved Task icon at the top.
- Click the Perform icon. Fill in some more fields. Click Save.
- You can click the Save button as many times as you want. Clicking the view task history icon will show the audit trail for the task. You will see an entry for each time the task was saved. The task shown in the image was saved 3 times and is currently locked by the sales person (max).
- When all the fields in the PO are filled in, click Send.
- Run the rest of the workflow as described in the previous examples. You will not see the Save button on any of the subsequent steps.
Example 9 - PO Save to User
Create another user:
Log on to as the tenant admin.
Click Manage Users on the Manage tenant page
Click the add new user icon which will bring up the Add New User form
Enter "sue" as the User Name then enter all the required information.
Leave the Reports To and Role fields empty. Click Submit.
You should be back on the user list. Logoff.
Modify the PO step:
Log in as the designer user. Copy Example 8. Rename the copy Example 9 - PO Save to User
- Click the PO step and the to edit it.
Add a field named "ManagerID" with a label "Manager ID" to the Sales Information section. Uncheck the Visible property.
- Drop a dropdown control under the Manager Approval Section
- Set the label and name of the control to "Managers".
- Uncheck the visible property
Add two managers to the dropdown control's Option's property. The option syntax is value=label. Value must be the manager username and the label can be a more user friendly label such as the manager's first and last name.
jerry=Jerry Mousesue=Sue Blue
- Click the Properties Style tab and set the control width to half the width of the form.
- Drop a message control to the right of the Managers dropdown.
Add this text to the message control's Message property.
To reassign your approval task to another manager, select that manager from the Managers dropdown and click the Save button.
- Set the Name property to ReassignMsg. Uncheck the visible property
Modify/Add Rules:
- Click the rules icon on the toolbar.
- Click the icon to edit the rule "Show/Hide Sections" .
Add these two new lines to the if (an === "Manager Approval") block to make these controls visible on the manager step:
Managers.visible = true;
ReassignMsg.visible = true;Click the arrow to see how the rule should look with these lines added.
Edit the rule "Populate Sales Person" and add this line under the SalesID line:
ManagerID.value = _data.getParameter('subject.reports.to'); Click the arrow to see how the rule looks with this line added.Add a new rule by clicking on the create new rule icon.
Name it "Reassign to User"
Add this line to the rule: ManagerID.value = Managers.value; Click the arrow to see the rule:
Click the save/exit icon to save the changes to the PO form.
Modify the workflow:
- Click the Manager Approval step.
- Check the Save to User property and Save/Load properties.
- Change the User property from {subject.reports.to} to {ManagerID} - this must now be set to a dynamically populated control in the PO form.
- Click the save/exit icon to save the changes to the flow.
Test Example 9:
- Test the flow to the step for Manger Approval
- When performing the task from Jerry's Task List, select the other manager (sue) from the Manager's dropdown. You do not have to sign it.
Click the Save button. The task will be removed from Jerry's Task List.
Login as the other manager (Sue). The PO Manager Approval task is now on her task list.
- Perform that task. The flow will be routed to the VP if the amount of the PO is greater than or equal to > $10,000.00. If the amount is under $10,000.00, the flow will complete.
Example 10 - PO Save to Role
In some cases, you may want multiple actions taken during a step in the workflow. Let's say you want to collect comments about the PO from more than one VP in the company. The PO can be routed to the first VP (Ed) who will comment, click Save and the approval task will be assigned to the Task List of all users with the VP role. A second VP can then perform the task from their Task List add their comment, click Save. The last VP to comment signs to complete the flow.
In this example, we will drop the comment control in the VP section of the PO into a repeat control so more than one manager can comment and add some message controls to clarify the instructions. Our workflow must use the Save to Role feature so the saved task is assigned to all users with the VP role that we specified for the VP step.
We will need to create another user with the role of VP.
Create another user with the VP role:
Log on to as the tenant admin.
Click Manage Users on the Manage tenant page
Click the add new user icon which will bring up the Add New User form
Enter "jim" as the User Name then enter all the required information.
Leave the Reports To field empty.
Select "VP" from the Role dropdown. Click Submit.
You should be back on the user list. Logout.
Modify the PO step:
Login in as the sales person (designer user). Copy Example 9. Rename the copy Example 10 - PO Save to Role.
- Click the PO step and the edit icon.
- Drop a message control inside the VP Approval section
Put the following text into the message control's Message property
If you want another VP to comment: <ol> <li>Add your comment below</li> <li>Click the save button to return this PO onto the task list of all employees with the VP role</li> </ol> Other VPs can add comments by clicking the + icon.
- Drop a message control inside the VP Approval section, below the VP Comments text area
- Select "Warning" from the Message Type dropdown.
Put the following text into the message control's Message property.
The last VP to comment must sign the approval
Click the Comments control inside the VP Approval sectionDrop a Repeat control inside the VP Approval section immediately above the VP Comments text area.
- Type "Enter both your name and comments" into the Placeholder property
- Drag the VP Comments text area into the repeat control
- Click to select the VP Comments text area control
- Set the Min property to 0
- Set the Max property to 4
Click the save/exit icon to save the changes to the PO form.
Modify the workflow:
- Click the VP Approval step
- Check the Save to Role property
- Check the Save/Load property
- Click the save/exit icon to save the changes to the flow.
Test Example 10:
- Test the flow to the step for VO Approval.
- Add a VP Comment.
- Click the Save button.
- All users with the VP role will receive a task notification letting them know the PO is available on their tasks lists again.
- Login as the other VP user and view their task list
- Perform the task.
- Click the icon to add another comment and sign the section.
Example 11 - PO Workflow Escalation
If workflow tasks are not completed within a certain specified time, you can remind the user via an email (s) that there is a deadline for task completion and you can reassign the task to another user when the deadline expires. In Example 11, we will use the escalation feature to set a five minute deadline for manager Jerry to approve the PO. He will receive two emails in that time frame reminding him that he has a task that requires his attention. When the five minute deadline expires, Jerry will receive an email informing him that the task has been reassigned to manager Sue.
In Example 9, manager Jerry manually selected the manager to reassign the task to from a dropdown control in the PO step. In this example, we will configure the Escalation feature so that automatically assigns the task to the user/role specified after the time period expires.
We will use the Setup Escalation link on the manager step. Escalations can be set up for any of the steps in our flow except the step performed by the anonymous user (Client Approval).
Modify the workflow:
Copy Example 10. Rename the copy Example 11 - PO Workflow Escalation
Click the Manager Approval step. Click the Setup Escalations link.
Set up the Deadline:
Select Complete Within from the dropdown in the Deadline section. Enter "5" on the minutes box that displays.
Setup the Reassignment:
- Select "User" from the Assignee Type dropdown. Type "sue" in the Assignee's text box. Note the list of users displays as you type.
Setup the email that will inform Jerry that the deadline has expired for the PO task.
- Select " Current Owners" from the Recipient Type dropdown. This will notify roles/user assigned to the workflow step via email.
Replace the template {flow.activity.assignee} with {flow.activity.escalation.reassignee} in the message. This change will put the name of the manager the task was reassigned to (Sue) in the message to Jerry.
Setup the Reminder emails to be sent. For Example, we want a total of two reminder emails to be sent - one every two minutes during the 5 minute time period.
Select "Potential Owners" from the Recipient Type dropdown.
Leave "Limit Reminder" checked. Enter "2" in the repeat and Every text boxes. Select "Minutes" from the Unit dropdown.
Leave the text of the Reminder message at the default.
Click Submit.
Click the save/exit icon to save the changes to the flow.
Test Example 11:
- Test the flow to the step Manager Approval step.
- Logon as Jerry to verify the PO task is on his Task List..
- Wait 2 minutes then check Jerry's email for the first reminder email.
- Wait another 2 minutes then check Jerry's email for the second reminder email.
- Check Jerry's email for the Task Deadline notification email after the 5 minutes has passed. The email should mention that the task has been reassigned to Sue.
- Check Jerry's Task List. The PO Approval task should be removed. Logout.
Login as Sue. The PO Approval task should now be on Sue's Task List. Note the task was initiated by "System User".
- Perform the task and complete the flow. Logout.
Example 12 - Quick Approve/Reject
Quick Approve provides the ability for a user to see a simple view of a task in order to Approve or Reject it. A comment and/or signature can be added to the task without viewing the entire form. Quick View makes the process of task review/approval/rejection easy especially on mobile devices. When the sales person uses an iPad or iPhone to access their task list, they can perform a quick approval/reject without having to view the PO details by clicking the Quick Approve icon.
In this example, we will add Quick Approval to the Sales Review step. We will add a Sales Approval section to the PO, modify the Show/HIde sections rule to make this section visible on the Sales Review, Manager Approval and VP Approval steps then use the Setup Approval/Rejection wizard to configure Quick Approve on the Sales Review step.
Modify the PO step:
Copy Example 11. Rename the copy Example 12 - Quick Approve/Reject
- Click the PO step then click the edit icon.
- Drop a Section control below the Agreement section. Label it "Sales Approval" . The section name will change to SalesApproval
- Uncheck the Visible property.
- Click the Security tab on the section and set the Signature property to Text/Signature Image.
- Check Must sign
- Drop in a text area control. Label it Sales Comments and verify that the name is SalesComments. The Sales Comments section is an example of an approval control (section with a textarea - no other controls). You must have an approval control to successfully configure the Quick Approval feature.
Modify the Show/Hide Sections Rule:
- Click the rules icon on the toolbar.
- Click the icon to edit the rule "Show/Hide Sections" rule.
Add this line to the if (an === "Sales Review"), if (an === "Manager Approval") and if (an === "VP Approval") blocks to make the Sales Approval section visible on the Sales Review, Manager Approval and VP Approval steps:
SalesApproval.visible = true;Click the arrow to see how the rule should look with these lines added.
Click the save/exit icon to save the changes to the PO form.
Modify the workflow:
- Click on Sales Review step
- Click the Setup Approval/Rejection link.
- In the Quick Approve section, check the Enabled checkbox.
Copy the text below into the Summary:
{ClientName} from {ClientCompany} has approved the PO for {TotalAmount}!!!
- Select Sales Approval from the Approval Control dropdown.
- Click Submit.
Click the save/exit icon to save the changes to the flow.
Test Example 12:
- Test the flow to the Client Approval step. Approve the PO.
- Logon as the sales person (designer).
- Click My Tasks.
Click the quick view icon. The Quick Approval screen will display.
- The Sales Person can click the Details button to view the PO.
- Notice the text we added as the Quick Approval summary appears at the top.
- Add a comment and click Approve. You will see the message "Task Successfully Approved"
- Complete the flow.
Example 13 - PageBreak : Mobile
What do you have to do to run the PO flow on an iPad or iPhone? Nothing!!!! automatically breaks up the form into steps and adds Back and Next buttons. uses the device’s features to make the mobile experience easier for the user e.g. specialized keyboards.
If you want to specify where the logical breaks are, you can use the PageBreak control to break the PO step into small logical pieces. For example, our PO has Instructions, Sales Information, Client Information and Client Services Order sections. In this example, we will use the PageBreak control to display the Instructions, Sales and Client Information sections on the same screen on an iPad and and on two separate screens on a smartphone. We will add another PageBreak control to display the Client Services Order section on a separate screen on both devices.
Modify the PO step:
Copy Example 12. Rename the copy Example 13 - PageBreak : Mobile
- Click the PO step then click the edit icon.
- Click the show/hide page breaks icon in the toolbar once. Pagebreak controls in the PO form will display.
- Click on the PageBreak control below the Sales Information section. Notice this PageBreak is only set up for the iPhone.
- Drop a PageBreak control from the palette above the message control "Travel and expense will be invoiced on a cost basis and are payable upon receipt of invoice.".
Uncheck Tablet so this will only add a page break when the form is viewed on a smartphone.
Click the save/exit icon to save the changes to the PO form.
Click the save/exit icon to save the changes to the flow.
Test Example 13:
- Click the Test icon. This is the desktop view. You will see all of the sections on the same screen.
Click the Tablet icon at the top. The Instruction, Sales Information and Client Information display on the same screen, as expected, since the first PageBreak was setup to be recognized on the phone and not the tablet, The second PageBreak was setup to be recognized by the phone and the tablet so you will have to click Next, to see the Client Services section.
- Click the Phone icon at the top. You will see the Instructions and Sales Information sections only. The first PageBreak was setup to be recognized on the phone so you will have to click Next, to see the Client Information section. The second PageBreak was setup to be recognized by the phone and the tablet so you will have to click Next, to see the Client Services section.
Example 14 - Fast Finish
In this example, we will switch to an Employee Onboarding workflow to demonstrate the Fast Finish feature. This feature adds a Finish button that allows the user to fast forward through a screenflow. It is very useful if your screenflow contains a lot of steps. Let's consider this scenario:
A new employee starts their first day at your company and needs to provide their information. The employee is handed an iPad with a link to an Employee Onboarding workflow that is used to collect basic information, W - 4 allowances and Education information. When completed, the new employee clicks the Continue button and the flow is routed to their manager for approval. If approved by the manager, the flow is routed to HR for final processing.
Imagine the employee completes the flow through the Confirmation step and then decides to navigate back to make a change to the Employee Information step. Without a fast finish button the screen flow will make the user review each step - Employee Info, W-4, Education Info and Confirmation in order to submit the forms to the manager for approval. But by adding Fast Finish the new employee can now click on the Finish button and (as long as all required fields are complete and valid in all other flow steps) immediately submit the forms to the manager for approval.
We will use the Navigation toolbar at the top to navigate back and forth between the steps of the flow. We will configure Fast Finish on the first three steps. We will also need to add another role, HR and another user, Pam who has the HR role, to test it.
Add a Role and User:
Login as your tenant admin.
Create a new role - HR.
Add a new user pam and give her the role HR. Logout.
Modify the workflow:
- Login as the designer. Edit the Purchase Order application.
- Make a copy of the Employee Onboarding flow. Name the copy Example 14 - Fast Finish
- Click on the Employee Information step.
- Check Fast Finish on the Property panel.
- Click on the Allowances step.
- Check Fast Finish on the Property panel.
- Click on the Education step.
- Check Fast Finish on the Property panel.
Click the save/exit icon to save the changes to the flow.
Test Example 14:
Click the Test icon.
The Employee Information step prefills the user name and uses the Geo-location feature to capture the user's location. All browsers will show a pop up asking the user's permission to use their location. Click to give permission.
Fill in the other required fields. Click Continue.
- Fill in the W - 4 Allowances. Notice the Total Allowances field is updating as you enter values for the other allowances. this calculation is done using a business rule. Click Continue.
- Fill in the Education Information step. Notice if you check "yes" for the "Permission to access college transcript" question a table requesting additional information displays. This is controlled by a show/hide business rule. Click Continue.
- On the Confirmation step, click Review the pdf. The W - 4 will open in a separate browser tab merged with the data you entered. This is an example of the pixel-perfect PDF generation feature.
- While reviewing the pdf, you realize you made a mistake when entering your social security number. Close the pdf.
- Click the Employee Information step in the Navigation toolbar at the top.
- Make a change to the SSN. Click the Finish button.
- The flow will skip the Allowances and Education information steps and return you immediately to the Confirmation step.
- Review the pdf to verify the updated SSN is now displaying. Close the pdf.
- Sign then click Send to Manager.
- Login as Jerry. Perform the task. Add a comment and sign. Click Send to HR.
- Login as Pam and complete the flow.
Example 15 - Summary
In this example, we will add a Summary step to the Employee Onboarding flow. This will simply display a Summary view of all the data that has been entered into the various steps of the flow prior to the Summary step. Previously completed activities in a workflow can be viewed by all users but editing data is only allowed for the currently logged in user. Clicking on the Details button navigates to the selected activity for viewing/editing.
We will change the Navigation property to a different format and use the Summary step to navigate back to a previous step.
Modify the workflow:
- Login as the designer. Edit the Purchase Order application.
- Make a copy of Example 14. Name the copy Example 15 - Summary
- Click on the toolbar to display the flow property panel. Select "Percent" from the Navigation dropdown.
- Drag a Summary activity from the palette and drop it in between the Education Information and Confirmation steps.
Click the save/exit icon to save the changes to the flow.
Test Example 15:
- Click the Test icon.
- Run the flow. Notice the percent completed is displayed at the top
- On the Summary step, click the Details button to navigate to a previous step.
- Change a value in one of the fields.
- Click the Continue button on the rest of the steps.
- Complete the flow.
Example 16 - Save on Navigate
Imagine a large workflow with many steps - let's say 30. You are filling in the screens and when you get to screen 25 you accidentally close your browser! None of the entered information is saved and you will have to begin all over again. Unless you check the Save on Navigate checkbox for the flow. This feature will automatically save the flow to your Task List. When you click the Perform icon to open up the task returns you to the last step where data was being entered. If you navigate to previous steps, all entered data displays.
Modify the workflow:
- Login as the designer. Edit the Purchase Order application.
- Make a copy of Example 15. Name the copy Example 16 - Save on Navigate.
- Click on the toolbar to display the flow property panel. Select "Navigation Toolbar" from the Navigation dropdown.
- Check the Save on Navigate checkbox to turn this feature on.
Click the save/exit icon to save the changes to the flow.
Test Example 16:
- Click the Test icon.
- Fill in the Employee Information and Personal Allowances steps in the New Employee Onboarding workflow.
- Fill in the first column of the first row of table on the Education step.
- Close the browser.
- Login as the designer.
- Click My Tasks. The unfinished task will be on your Task List.
- Click the Perform icon. returns you to the step where you left off.
- Continue entering data from this point to complete the flow.