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.

What are we going to build?

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:

• 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.
• frevvo 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 frevvo 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.

What You Will Need

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. 

Example Project

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:

1.  Browse the appropriate URL below and log into your tenant as the designer user:
   1. Cloud: https://app.frevvo.com/frevvo/web/login
   2. In-house: http://<server>:<port>/frevvo/web/login
2. Click the  Add icon at the top of the Projects Home Page and select  Upload Project.
3. Browse for the downloaded project zipfile (WorkflowTutorial_project.zip).
4. Do not check the Replace or Copy checkboxes.
5. Click the Upload button.

The project is uploaded and immediately appears in your list of projects. 

Set Up Roles and Users

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.

Create the VP Role

1. Login to frevvo as the tenant admin. 

2. Click the Manage Roles link.

3. Click theplus icon.

4. Type "VP" into the role name and click Submit.

Create Users

We'll create a few users and assign some of them roles and supervisors.

Add "jerry"

1. Log on to frevvo as the tenant admin.

2. Click Manage Users on the Manage tenant page
   

3. Click the add new user icon which will bring up the Add New User form

4. Enter "jerry" as the User Name then enter all the required information - leave the Reports To and Roles fields empty. Click Submit.

Edit "designer"

1. You should be back on the user list - click the edit user icon for the designer user.

2. Select jerry from the Reports To dropdown. Click Submit.

Add "ed"

1. Click the add new user icon which will bring up the Add New User form

2. Enter "ed" as the User Name then enter all the required information.

3. Leave the Reports To field empty

4. Select the VP role from the role dropdown. Click Submit.

Add "sue"

1. Click the add new user icon which will bring up the Add New User form

2. Enter "sue" as the User Name then enter all the required information.

3. Leave the Reports To and Role fields empty. Click Submit.

Add "jim"

1. Click the add new user icon which will bring up the Add New User form

2. Enter "jim" as the User Name then enter all the required information.

3. Leave the Reports To field empty. 

4. Select VP from the Role dropdown. Click Submit.

5. You should be back on the user list. Logout. 

Create a frevvo Space

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.

1. Login to your tenant as the designer user.
2. Open the Workflow Tutorial project.
3. Find the Purchase Order Workflow in the list.
4. Click the  Action Menu and select  Deploy to remove the development watermark and deploy your workflow to production.
5. Click the Spaces link at left. Click the  Add icon.
6. Enter a Space Id i.e. workflowtutorial and a Space Name i.e. Workflow Tutorial Space and click Create. You will be directed to the Space Editor. Click Save. 
7. From the Action Menu, select Share. Copy the URL, paste it into a new browser window, and bookmark it. We will use it in Step 9 below.

We will add our workflow to the space a little later.

1 - Create the Workflow

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. 

1. Click the name of the Workflow Tutorial project (or click the  Action Menu and select  Open.) to go to the Forms and Workflows homepage.
2. Click the Add icon and select Create a New Workflow. The Workflow Design Wizard will open.
   
   
   
3. Enter a Name and Description for your workflow, i.e. Name: "My Purchase Order Workflow," Description: "Example PO workflow for tutorial." Click Next.
   
4. Notice that the first step is already created for us. Rename it to "PO." Then, instead of the default "Create New Form," select the existing form "PO" form from the Step Type dropdown.
   
5. Click the Add icon to add Step 2.
   1. Rename the new step "Client Approval"
   2. Leave the default Step Type set to "Approval Step"
   3. Leave the default Assignment Type "To an Email Address." You will see that the email field defaults to your email - leave that as is for now. We will change it to a template later.
6. Click the Add icon to add Step 3.
   1. Rename the new step "Sales Review"
   2. Leave the default Step Type set to "Approval Step"
   3. Change the Assignment Type to "To a User." Add yourself as the user. We will change it to a template later.
7. Click the Add icon to add Step 4.
   1. Rename the new step "Manager Approval"
   2. Leave the default Step Type set to "Approval Step"
   3. Change the Assignment Type to "To a User." Add yourself as the user. We will change it to a template later.
8. Click the Add icon to add Step 5.
   1. Rename the new step "VP Approval"
   2. Leave the default Step Type set to "Approval Step"
   3. Change the Assignment Type to "To a Role." Add the role VP (you will have to SetUpRolesandUsers)

Click Finish. Your initial workflow should look like this:

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.
• frevvo sends a copy of the signed PDF to the sales person by email. 

Note, the customer does not have to be logged into a frevvo tenant (anonymous) to perform the Approval step. 

We need to customize:

• The Approval Section on the PO form.

• 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. 

2 - Edit the Workflow Steps

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:

• The Client receives an email with a link to review and approve the PO. When they click submit, they'll see a personalized confirmation on the screen.
• The sales person receives an email with a link to their task list. The frevvo Task List is like an email inbox where users can find all the tasks requiring their attention. In this example, the sales person will access their Task List, review the signed PO and complete the workflow.  
• The PO form has a hidden field that is populated with the frevvo user id of the sales person by a business rule. We will set an assignment on the Sales Review step 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.
• Next, we will route the workflow to the sales person's manager for approval. A customized Task Notification email will alert the manager that there is a task requiring his attention. You already created the user (jerry) in frevvo and edited the designer user to specify jerry as the manager the designer user reports to. We can route the workflow to the manager using {subject.report.to}. This is an example of built-in data that frevvo makes available for every transaction.
• Next, we will route the workflow to the VP for approval. A customized Task Notification email will alert the VP that there is a task requiring his attention. 

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.

Continue Button

1. Click the Client Approval Step. Type 'Send to frevvo, Inc' into the Continue label property to change the text to something more meaningful.
2. Click the Sales Review step. Type "Send to Manager" in the Continue Label property.
3. Click the Manager Approval Step. Type "Finish or Send to VP" in the Continue Label property.

Task Assignment

1. 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.

   

2. Click the Sales Review step and notice that you remain on the Assignments tab. Type {SalesID} in the Assign to User property on the panel. To customize the task notification email the sales person receives: 

   1. Type "Review PO from {ClientName}" in the subject field.  

   2. 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>

3. 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.

4. Click the VP Approval Step. The role you set in the Workflow Design Wizard is still correct. To customize the task notification email the VP receives, Type "VP Approval needed for PO from {ClientCompany}" in the Subject field. Leave the default message, or customize as described above.

Messages

1. 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. frevvo 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.

   

   
   

2. Click the Sales Review Step. You will still be on the Message tab.

   1. 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.

   2. Type "Client: {ClientCompany}" in the Task Information property. The Task Information helps the sales person identify the task on the Task List.

3. Click the Manager Approval Step. 
   1. Type "PO sent for your Manager's Approval"  in the Pending Message property. 
   2. Type "Client: {ClientCompany}" in the Task Information property.
4. Click the VP Approval Step. 
   1. Set the Pending Message property to "PO sent for VP Approval". 
   2. Type "Client: {ClientCompany}" in the Task Information property. 

Click  Save to save your changes.

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.

1. Click on the Action Menu for the PO Step, and select Edit. This will take you to the Forms editing mode.
2. Drag the Agreement Section inside the Client Approval Section.
   

5 - Edit Rules

Next, let's add a rule to make the client signature required when the client approves the PO.

1. Go to the Rules editing mode using the Guided Designer navigation bar.
   

2. 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.

    More info about the Visual Rule Builder...

   The Visual Rule Builder consists of 3 wizards:

   • Condition wizard - describe the conditions under which a set of actions should be executed
   • Action wizard - declare the actions that should be taken when the condition is true
   • Else Action wizard - declare the actions that should be taken when the condition is false
3. Add a Rule. Name the rule "Set Client Signature to Required." Add a description "Set Client Signature to Required when approved."
   1. Set the Condition to "ClientApprovalCheck" "is filled."
   2. Set the Action to "signature_ClientApproval" "to required."
   3. Set the Else Action to "signature_ClientApproval" "to optional."
      

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.

1. Find the rule named On Approval Step (Client Approval)

2. Click any pencil icon on the actions.

3. Click Add Action - this is the Action wizard where you set up actions that will happen if the condition is true.

4. Set the Instructions section to hidden.

5. 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.

6. Set the Instructions section to visible.
   The Rule should look like this on the Rule Editor page:

   
7. Click  save to save your rules, and go back to the Workflow editing mode using the Guided Designer navigation bar.

1. Click on the  tab.

2. Click the Display Message when user submits workflow radio button. Enter "The Purchase Order for {ClientName} at {ClientCompany} is complete."

Document Actions

Document actions allow to configure what happens to the data and documents of your workflow after it is submitted.

1. In Settings editing mode, click the Document Actions tab, and the Send Documents sub-tab.
2. Click the Send Email radio button.

   1. Enter {SalesEmail} and {ClientEmail} in the To: field. Separate them with a comma. Ex: {SalesEmail},{ClientEmail}

   2. Enter "Purchase Order for {ClientName} at {ClientCompany}" in the subject field.

   3. 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.

   4. Select PDF from the Send Snapshot dropdown. This adds a PDF to the email after the customer approves it or requests corrections.

   5. 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.

8 - PO Reject

9 - Save/Load