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 frevvo. We will use an example of a services Purchase Order workflow to demonstrate design patterns and frevvo features. If you need basic help using the frevvo Workflow Designer, please refer to the Build a Workflow guide, and then return here.
This is a hands-on, in-depth tutorial. If you prefer, you can view a playlist of Quick-Start Workflow Tutorial videos. |
Many companies offer software services to their new and existing clients. This tutorial will produce a Purchase Order workflow for services that follows this business scenario:
You need either a frevvo Online account -- signup for a 30 day trial if you don't already have an account. Or use a working frevvo 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.
Download this example project (WorkflowTutorial_project.zip) that contains completed workflow examples as well as the forms you need to build the workflow yourself using the steps below.
Upload the project to your frevvo user account. Follow these steps:
The project is uploaded and immediately appears in your list of projects.
We need to create several roles and users assigned to those roles in order to complete all of the steps in this tutorial. Users and Roles can only be created by the tenant admin.
Login to frevvo as the tenant admin.
Click the Manage Roles link.
Click theplus icon.
Type "VP" into the role name and click Submit.
We'll create a few users and assign some of them roles and supervisors.
Log on to frevvo 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.
Select jerry from the Reports To dropdown. Click Submit.
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.
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.
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.
A space is a built-in portal that's very simple to create and makes it easy to test your forms and workflow(s). We will create a frevvo space to test the remaining examples. The Task Notification emails for the remaining Purchase Order examples will send the user to their Task List in your space.
The Tenant Admin can set a Default Space on the Manage Tenant page. Task Notifications will then link the user directly to their task or task list in your Default Space without the need to configure the URLs in the workflow properties. |
We will add our workflow to the space a little later.
First, build the workflow using the Workflow Design Wizard, which provides an easy way to quickly create all of your approval steps and business rules to route them at once.
Let's begin by using the built-in Workflow Design Wizard to create the steps of our workflow and automatically add routing and business rules.
Click Finish. Your initial workflow should look like this:
The Workflow Design Wizard added some controls and business rules for you, which saves a lot of time! These can also help you to understand the actions of business rules so that you can change them or add your own. Open the PO step by clicking the pencil icon. Scroll down and notice that the wizard added approval sections for Client Approval, Sales Review, Manager Approval, and VP Approval. The Client Approval has a Wet Signature control and a Date control. All the other approval sections are Text/Signature Image Signed sections because they will be performed by authenticated users. Now look at the business rules by clicking the Rules Icon. Some of these came over with the PO Step, but the rules to show/hide the approval sections on each approval step were added by the Workflow Design Wizard. Visit the Workflow Design Wizard documentation for more details about how it streamlines workflow creation! |
This workflow sends the Purchase Order electronically to the customer for their review and signature.
Note, the customer does not have to be logged into a frevvo tenant (anonymous) to perform the Approval step.
We need to customize:
The Task Assignment that sends the step that the customer signs.
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.
We will customize the Continue Button text, task assignments, and pending messages the user will see when they complete each step. These quick customizations will route the workflow as follows:
Notice that in the Guided Designer: Workflow editing mode, clicking on a step opens the Step Properties Wizard where you can select a tab to edit settings. Then, clicking another step takes you to the same tab on that step. We will follow this convenient paradigm to edit various properties for each of our steps.
On the Client Approval step, click the Assignment tab. Remove your email and enter the template {ClientEmail} into the Assign to Email property. ClientEmail is the field in Step 1 where the sales person enters the email address of the customer. frevvo 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. 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.perform.url}">this link</a>. <br/><br/> Thank You. |
Type "Review PO from {ClientName}" in the subject field.
Leave the default message.
If a Default Space has been set, {task.perform.url} will send the user to the task in your space and you do not need to customize the URL. |
Optional (if no Default Space Set): Click on the Assignment Tab. Do not make any changes to the Subject under Task Notification Email instruction. In the Message field, replace the {task.perform.url} template with the URL to the Space we created above. Make sure the space URL is included between the double quotes. Append /tasklist to the end of the URL. The message shown below will send the user to their Task List in a space with an id of workflowtutorial.
You can access your task by clicking <a href="https://app.frevvo.com:443/frevvo/web/tn/mycompany/u/85a7dee1-e4cc-4c31-bcc6-d6929fb4d2b2/space/workflowtutorial/tasklist">this link</a> |
Click the Manager Approval Step. Type "{subject.reports.to}" in the Assign to User property. Type "Approval needed for PO from {ClientCompany}" in the Subject field. Leave the default message, or customize as described above.
Click on the Client Approval step and pick the Messages tab. Copy the message below into the Pending Message box.
The Purchase Order for {ClientName} at {ClientCompany} has been sent to the client for approval. |
{ClientName} and {ClientCompany} 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. You can also select a template by using the drop down arrow in the top right corner of the message box, or by using typeahead starting with a '{' followed by the first few letters of the template name. A suggestion menu will appear for you to choose the template you want.
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 Information property. The Task Information helps the sales person identify the task on the Task List.
Click Save to save your changes.
In frevvo, preconditions are used to add logic to your workflow 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 workflow 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 workflow will end with the Manager Approval step. The sales person and the client will get the email with the signed PDF.
You can type the JavaScript for the precondition or let frevvo create it for you using the Precondition Rule Builder.
We will use the Precondition Rule Builder to create the JavaScript for the precondition. Follow these steps:
Click Add Precondition. The Precondition Properties wizard will open.
Click OK.
Click Submit.
We will make a small modification to the form so that the agreement message control is inside the Client Approval section created by the Workflow Design Wizard.
Next, let's add a rule to make the client signature required when the client approves the PO.
Go to the Rules editing mode using the Guided Designer navigation bar.
Notice that several rules already exist; some were present on the PO form that we used. Others were added by the Workflow Design Wizard. The descriptions tell you each rule's purpose.
The Visual Rule Builder consists of 3 wizards:
|
Next we'll update the rule "On Approval Step (Client Approval)" to hide the Instruction section on the Client Approval step. The Instructions should only show on the steps performed by company employees logged into frevvo. This rule was built by the Workflow Design Wizard, so it already makes the Client Approval section required on the Client Approval and optional on all other steps. Since the Instructions section can work under the same condition, we'll just add it to this existing rule.
Find the rule named On Approval Step (Client Approval)
Click any pencil icon on the actions.
Click Add Action - this is the Action wizard where you set up actions that will happen if the condition is true.
Set the Instructions section to hidden.
Click Next then click Add Action - this is the else action wizard where you set up actions that will happen if the condition is false.
Set the Instructions section to visible.
The Rule should look like this on the Rule Editor page:
Let's set up the permissions on the workflow, the user experience after they click "submit", and an email that will automatically send a PDF snapshot of workflow to the Salesperson and Client when the workflow is complete. We will also configure Searchable Fields so we can search and filter our submissions in the frevvo Submissions repository.
Change the visibility of the workflow to public so the customer (anonymous user) can access it. To do this:
Click the Access Control tab.
Under Who can start the workflow check the radio button for 'Anyone (login not required)'.
The Workflow Visibility does not have to be set to Anyone (login not required) when you have a step in your workflow that is assigned to an email address and is performed by an anonymous user. Any of the Workflow Visibility options will work. |
In order to be able to use data from the PO workflow to search submissions and tasks, we will define the fields that we want to use as search criteria using the Setup Searchable fields wizard. For example, if we define the control named ClientCompany as a searchable field then we can search for Purchase Orders that were submitted by a particular company.
In Settings editing mode, click the Searchable Fields tab.
The Workflow Actions customize the message(s) the client will see when they click the Send to frevvo, Inc button.
Click on the tab.
Click the Display Message when user submits workflow radio button. Enter "The Purchase Order for {ClientName} at {ClientCompany} is complete."
Document actions allow to configure what happens to the data and documents of your workflow after it is submitted.
Enter {SalesEmail} and {ClientEmail} in the To: field. Separate them with a comma. Ex: {SalesEmail},{ClientEmail}
Copy the text below into the message field to replace the existing message.
The Purchase Order from {ClientName} at {ClientCompany} is attached. <br/> Thank You. |
Do not check the Send Data checkbox. Check the Attachments checkbox. These selections ensure the workflow xml will not be attached to the email but any attachments that are uploaded will.
Go to the Action Menu in the top right and select Save and Close.
Before we test, let's add the workflow to the space you created above.
Add a Tab by typing * Workflow Tutorial into the Edit Space Menu dialogue.
* Workflow Tutorial |
Add your workflow to the tab by typing ** Purchase Order Workflow | <your relative raw URL>
** Purchase Order Workflow | /frevvo/web/tn/example/u/8e31e94a-cec0-4544-84fd-e7cd21c75512/app/_qJzwYdPwEemwR6ZLVqxI8w/flowtype/_FwuVYPp6EemxPqwlgCNmrA?_method=post&embed=true |
Save your Space.
Click the link to your space that you bookmarked earlier. Login as the designer.
Select the Purchase Order from the Workflow Tutorial tab.
Click the Perform icon. Add a comment and sign as the manager. Click Finish or Send to VP. Logout of your frevvo space.
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 frevvo 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 can reject from or 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 workflow is sent back to the customer for another review and the workflow continues to completion if the customer approves.
Log into your tenant as the designer user. Edit the Workflow Tutorial project, then edit the Purchase Order Workflow. You can change the button label on any step where Reject from here is checked.
Optional (if no Default Space is set.): Replace the {task.perform.url} template in the Rejection email body to the URL of your frevvo space with /tasklist appended to it. Here is an example.
<p>This workflow was rejected back to you for further action.</p><p>The workflow was rejected by {subject.first.name} {subject.last.name} at step: {flow.activity.name}. The reason was: {flow.activity.reject.reason}.</p><p> You can access your task by clicking <a href="https://app.frevvo.com:443/frevvo/web/tn/mycompany/u/85a7dee1-e4cc-4c31-bcc6-d6929fb4d2b2/space/workflowtutorial/tasklist">this link</a></p> |
If a Default Space has been set, {task.perform.url} will send the user to the task in your space and you do not need to customize the URL. This also applies to the instructions below. |
Optional (if no Default Space is set.): Replace the {task.perform.url} template in the Rejection email body to the URL of your frevvo space with /tasklist appended to it. Here is an example.
<p>This workflow was rejected back to you for further action.</p><p>The workflow was rejected by {subject.first.name} {subject.last.name} at step: {flow.activity.name}. The reason was: {flow.activity.reject.reason}.</p><p> You can access your task by clicking <a href="https://app.frevvo.com:443/frevvo/web/tn/mycompany/u/85a7dee1-e4cc-4c31-bcc6-d6929fb4d2b2/space/workflowtutorial/tasklist">this link</a></p> |
Test the Changes
Click the link to your space that you bookmarked earlier. Login as the designer user.
Select the Purchase Order from the Workflow Tutorial tab.
Log out of your frevvo space.
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.
Log into your frevvo space as the sales person (designer user). The Sales Person's (designer user) Task List displays. Click the Perform icon, review the PO, make a change, sign then click Send to client. Logout.
Login to your frevvo space as the sales person (designer user). Select Task List from the Important Items tab. Click the Perform icon. Review the PO. Click Send to Manager. Logout.
Login to your frevvo space as jerry@<your tenant>. Select Task List from the Important Items tab. 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 to your frevvo space as ed@<your tenant>. Select Task List from the Important Items tab. 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 theInbox 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 workflow name}". Note the reason for the rejection is included in the email body. Click the link in the Rejection email.
Login to your frevvo space as jerry@<your tenant>. The Sales Person's (designer user) Task List displays. 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.
Login to your frevvo space as ed@<your tenant>. Select Task List from the Important Items tab. 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.
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 frevvo 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.
Manager Jerry is going to the Sales Conference in LA. As he is preparing to leave the office, a PO requiring his approval comes in. Example 9 will show you how Jerry can quickly reassign the PO to another manager, Sue, so he can leave for the conference.
Add a text control named "ManagerID" with a label "Manager ID" to the Sales Information Section. 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's frevvo username and the label can be a more user friendly label such as the manager's first and last name.
jerry=Jerry Mouse
sue=Sue Blue
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. |
Go to the Rules editing mode.
The Visual Rule Builder consists of 3 wizards:
|
Edit the rule "Populate Sales Person" and add this action line under the SalesID to userID() line:
|
Add a new rule to copy the selection from the Managers dropdown into the ManagerID control. Remember we have set up the ManagerID template to route this step of the workflow to the user name specified in the ManagerID control.
The Visual Rule Builder consists of 3 wizards:
|
Save your changes.
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 workflow.
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.
Go to the Forms editing mode.
Drop a Message control inside the VP Approval section above the VP Comments text area.
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 section
Drop a Repeat control inside the VP Approval section immediately above the VP Comments text area.
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 this example, we will use the frevvo 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.
Open the Workflow Tutorial project, then edit the Purchase Order Workflow.
Select Complete Within from the dropdown in the Condition field. Enter "5" on the minutes box that displays.
Replace the template {flow.activity.assignee} with {flow.activity.escalation.reassignee} in the Email 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.
Click on the Reminders Tab. Change the Reminders are Off slider to on.
Enter "2" in the Every text box. Select "Minutes" from the Time Unit dropdown.
Leave the text of the Reminder message at the default.
Click the save and close icon to save the changes to the workflow.
Login as Sue. The PO Approval task should now be on Sue's Task List. Note the task was initiated by "System User".
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 a tablet or smartphone to access their task list, they can perform a quick approval/reject without having to view the PO details by clicking the Quick Approval icon..
In this example, we will add Quick Approval to the Sales Review step.
Copy the text below into the Summary:
{ClientName} from {ClientCompany} has approved the PO for {TotalAmount}!!! |
Click the save and close icon to save the changes to the workflow.
Click the quick view icon. The Quick Approval screen will display.
What do you have to do to run the PO workflow on a tablet or smartphone? Nothing! frevvo automatically breaks up the form into steps and adds Back and Next buttons. frevvo uses the device’s features, such as specialized keyboards, to create a user-friendly mobile experience.
You can use the PageBreak control to customize the mobile page breaks on 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 a tablet 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.
Open the Workflow Tutorial project, then edit the Purchase Order Workflow.
Leave the Phone and Tablet checkboxes checked.
Click the save and test icon. The Save and Test feature saves the changes to your workflow and allows designers to test forms/workflows without leaving the Workflow designer.
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.
In this example, we will switch to an Employee On-boarding workflow to demonstrate the Fast Finish feature that allows the user to fast forward through a screenflow. A screenflow is a type of workflow where all the steps are filled in by the same user. Fast Finish 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 workflow is routed to their manager for approval. If approved by the manager, the workflow is routed to HR for final processing.
Imagine the employee completes the workflow 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 screenflow 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. Adding Fast Finish allows the new employee to click on the Finish button and (if all required fields are complete and valid in all other workflow 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 workflow. 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.
Login as your tenant admin.
Create a new role - HR.
Add a new user pam and give her the role HR. Logout.
Click cancel changes icon to exit back to the Form and Workflows Home Page.
Click the Test icon for the Employee OnBoarding Workflow.
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.
In this example, we will look at the Summary step on the Employee On-boarding workflow. This will simply display a Summary view of all the data that has been entered into the various steps of the workflow prior to the Summary step. Previously completed steps 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 step 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.
Click cancel changes to exit back to the Form and Workflows Home Page.
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. The Save on Navigate feature will prevent this situation by automatically save the workflow to your Task List. When you click the Perform icon to open up the task frevvo returns you to the last step where data was being entered. If you navigate to previous steps, all entered data displays.
Click cancel changes to exit back to the Forms and Workflows Home Page.