frevvo v9 is no longer supported. Please visit Live Forms Latest for our current Cloud Release. Earlier documentation is available too.

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 Flows 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 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 Applications

There are 2  applications that can be downloaded to help with this tutorial:

In either case, you must upload the application(s) to your  user account. Follow these steps:

  1. Log into your tenant as the designer user.
    1. Open a tab in your browser. Browse one of the following URLs:
    2. Cloud: https://app.frevvo.com/frevvo/web/login
    3. In-house: http://<server>:<port>/frevvo/web/login
  2. Click the Upload icon at the top of the Application Home Page. 
  3. Browse for the downloaded application zipfile (PurchaseOrderCompleted_app.zip or PurchaseOrder_app.zip).
  4. Do not check the Replace or Copy checkboxes.
  5. Click the Upload button.

The application is uploaded and immediately appears in your list of applications. 

Example 1 - Purchase Order screenflow

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 screenflow

To create this workflow, follow these instructions:

  1. Click the Edit icon for the Purchase Order application.
  2. Click the Flows tab to open the Flows home page.
  3. 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.
  4. 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 into the Guide box. This form will be the first step in the flow. Click the step, then the step name on the properties panel to rename it 'Client.'

  5. Drag the Services form from the palette and drop it below the Client form when you see the  "green flashing bulls eye". The Services form will be the second step in the screenflow. Change the step name to 'Services.'

  6. Click on the  section in the left side panel to customize the message the sales person will see when the flow is completed: 

    1. The Flow Step Properties window opens to the Flow Actions tab. Click the radio button 'Display Message When User Submits a Flow.' Copy the message below into the Message box then click Finish. 

      The Purchase Order for {ClientName} at {ClientCompany} is complete.

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

    2. Click Submit.

  7. At this point, your workflow should look like this:



  8. Click the  save/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  save/exit icon then the Test icon. 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.
  • 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 Step 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 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:

  1. Click the Edit icon for the Purchase Order application.
  2. Click the Flows tab to open the Flows Home Page.
  3. 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.
  4. Drag the PO form from the Palette and drop it into the Guide box on the flow designer canvas. The PO form will be the first step in the workflow. Change the step name to 'PO.'

    1. Click on the PO step. Click the tab in the Properties panel. 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.
    2. Type "Send to client" in the Continue Label property. Click Submit.
  5. Click the  Link icon to create a copy of this step. A linked copy of the PO form (double box), is added to the flow.
  6. Click on the linked PO step, then click the  tab. The Form Properties window will appear.
    1. Change the name to 'Client Approval.'
    2. Type 'Send to frevvo, Inc' into the Continue label property to change the text to something more meaningful.

    3. Click the Rejection tab, uncheck the Reject to here and Reject from here checkboxes. The Reject button feature will be discussed in a later example.
  7. We will now set up the anonymous user step:
    1. Click on the Assignment tab of the Properties window. 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.   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.
    2. Below the Task Notification Email instruction on the same tab, 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.
    3. Click on the Messages tab, 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 Send to client button. 
  8. Click Submit
  9. We will use the Visual Rule Builder to add a business rule to the PO. This rule hides the Instruction section on the Client Approval step. The Instructions should only show on the steps performed by company employees logged into . It will also show the Agreement (Client Approval) section on the Client Approval and subsequent workflow steps and hide it on the first step. We want the Agreement section to display on the Client Approval step of the workflow where the Client Approves or Rejects the PO. If the Client approves the PO, then the business rule will make the Client Signature field required.

     Click here to see how to create this rule

    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

    1. Click the PO step then click the blue pencil icon to edit it
    2. Click the Rule icon on the Flow Designer toolbar
    3. Click the to add the rule.
    4. Name it Show/Hide Client Approval/Instruction Sections, make Client Signature Required if Approved
    5. Click the Rule Builder button then click Add Condition - this is the Condition wizard
    6. Select current step from the first dropdown.
    7. Select is on or after from the second dropdown
    8. Select Client Approval from the third dropdown
    9. Click Next then click Add Action - this is the Action wizard where you set up actions that will happen if the condition is true
    10. Set the Agreement section to visible
    11. Add another action to set the Instructions section to hidden
    12. Add another action to set the Client Signature field to required
    13. 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
    14. Set the Agreement section to hidden
    15. Add another action to set the Instructions section to visible
    16. Add another action to set the Client Signature field to optional
    17. Click Finish

    The Rule should look like this on the Rule Editor page:


  10. Click the save and exit icon to save your work. Click the Cancel icon to return the the Flow Designer canvas.  
  11. In this example, the workflow will end after the client approves. The sales person receives an email with a copy of the flow pdf attached. Follow these steps to configure this email:
    1. Click the  section in the properties panel. The Flow Properties window will appear on the Document Actions 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. Please review. 
        <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 flow xml will not be attached to the email but any attachments that are uploaded will.

  12. Customize the message the client will see when they click the Send to frevvo, Inc button.
    1. Click on the  tab.

    2. Click the Display Message when user submits flow radio button. Enter "The Purchase Order for {ClientName} at {ClientCompany} was sent to frevvo, Inc.".

  13. Change the visibility of the workflow to public so the customer (anonymous user) can access it. To do this: 
    1. Click the  tab.

    2. Under Who can start the flow check the radio button for 'Anyone (login not required)'.

    3. Click Submit.

  14. At this point, your workflow should look like this:  



  15. 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.
    • The Flow Visibility does not have to be set to Anyone (login not required) when you have a step in your flow that is assigned to an email address and is performed by an anonymous user. Any of the Flow Visibility options will work.

Test Example 2:

  • Click the  save/exit icon then the Test icon. Click the   blue right arrow to expand the Instructions section. This section is only visible to internal employees of the company.
  • Fill in the first step of the PO and sign.
  • 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. In this example, the Reject button does not show as it is not configured for this workflow step

  • Approve the PO for now. We will cover rejecting the PO in a later section. 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}" as the subject.

  • Open one of the emails and click on the pdf. Verify the Sales Information, Client Information, Client Services details and the Agreement section with the customer's signature are included.

Example 3 - PO for Sales Review

Now that we have a workflow that sends the PO to the customer for approval, we can quickly modify it to send the Approved PO back to the sales person after signing. The sales person receives an email with a link to their task list. The  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  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.

Also, 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/Summary fields wizard. 

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.

  1. Login to your tenant as the designer user.
  2. Edit the Purchase Order application.
  3. Click the Edit icon for the workflow you want to modify. Change the name to Purchase Order Workflow.

  4. Set up the fields from the flow to use as task and submission search criteria. 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. 
    1. Click the Setup Searchable fields link on the Flow Properties panel. 
    2. Minimally, move the Client Company, Client Name and Total Amount fields from the Available Fields column to the Searchable Fields column. Add/remove any other fields that you want to define as Searchable Fields.
    3. Click Submit.
       
  5. Add the Sales Review step:

    1. Click on the PO form, and then click the Link icon.
    2. A linked copy of the PO form,  a double box, will be added to the flow. Drag this step below the Client Approval step. Drop it when you see the "green flashing bulls eye".
    3. Click on the linked PO step. Click the  Edit Step Properties icon then click on the General Settings tabChange the name to "Sales Review" in the Name field.
    4. Click on the Assignment Tab. Type {SalesID} in the Assign to User property on the panel.
    5. To customize the task notification email the sales person receives: 

      1. Below the Task Notification Email instruction message type "Review PO from {ClientName}" in the subject field. You can select the control name from the dropdown on the right side of the subject field. 

      2. Leave the default message. 

    6. Click on the Messages tab. 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.
    7. Type Client: {ClientCompany} in the Task Information property. The Task Information helps the sales person identify the task on the Task List.

    8. Click Submit
  6. Click the flow header, then click the  tab on the properties panel. Click on the Display Message wizard. Change the email message back to

    The Purchase Order for {ClientName} at {ClientCompany} is complete.

    Click Submit.

  7. At this point, your workflow should look like this:
  8. Click the  save/exit icon to save your changes. 

Test Example 3:

  • Click the Test icon or the  Save and Test icon from the Flow designer.
  • 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 Sales person (designer) is taken directly to the task. The link in the email is built with will the {task.perform.url} that bypasses the Task List.

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

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

Default 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 flow properties.

  1. Login to your tenant as the designer user.
  2. Edit the Purchase Order application.
  3. Click the Flows tab.
  4. Find the Purchase Order Workflow in the list.
  5. Click the Deploy icon to remove the development watermark and deploy your workflow to production.
  6. Click the Spaces link at left. Click the New icon.
  7. Enter a Space Id i.e.workflowtutorial and a Space Name i.e. Workflow Tutorial Space and click Create.
  8. Click the Share icon. Copy the share URL for your space. Bookmark it in a different tab of your browser. Save the URL. You will need it for the Task Notification email messages in Example 4.
  9. Logout

Example 4 - PO for Manager Approval

In this example, we will add another linked step to route the workflow to the sales person's manager for approval. We will need to add a Manager Approval section to our PO step then update a business rule to hide this section until the Manager Approval step is performed. A customized Task Notification email will alert the manager that there is a task requiring his attention. 
We will need to create a new user (jerry) in  and edit the designer user to specify jerry as the manager the designer user reports to. Then we can route the workflow to the manager using {subject.report.to}. This is an example of built-in data that  makes available for every transaction.

Create/Modify Users:

Users can only be created by the tenant administrator.  The steps are: 

  1. Log on to  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

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

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

Modify the PO step:

Log back into your tenant as the designer user.
Add the Manager Approval section: 
  1. Edit the Purchase Order application.
  2. Click the Flows Tab.
  3. Edit the Purchase Order Workflow.
  4. Click the  icon to edit the PO step.
  5. Drop a Section control to the bottom of the form
    1. Click on the section label and change it  to "Manager Approval". The control name will automatically become ManagerApproval.

    2. Uncheck the Visible, Required and Printable property checkboxes.

    3. Click the Security tab

    4. Set the Signature property to "Text/Signature Image"

    5. Check the Must Sign property

    6. Drop a textarea control inside the section 

    7. Name it "ManagerComments"

    8. Click  save/exit icon to save the changes to the PO form.

Modify the workflow:

  1. Create a new linked step from the PO step.

    1. Drag it to the end of the flow. Drop it when you see the "green flashing bulls eye".

    2. Click on the linked PO step, then click the  tab in the Properties panel. Change the step name to "Manager Approval." 

    3. Click on the Assignment Tab. Type "{subject.reports.to}" in the Assign to User property. 

    4. To customize the task notification email the manager receives,

      1. Type "Approval needed for PO from {ClientCompany}" in the Subject 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>

        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.

    5. Click on the Messages tab. Type "PO sent for your Manager's Approval"  in the Pending Message property. 

    6. Type "Client:  {ClientCompany}" in the Task Information property.

    7. Click Submit

  2. Click to select the Sales Review step. 

      1. Click the  Edit Step Properties icon then click on the General Settings tab.
      2. Type "Send to Manager" in the Continue Label property.
      3. Click on the Assignment Tab.

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

        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.

      5. Click Submit
      6. At this point, your workflow should look like this:
  3. Click the save/exit icon to save your changes.
Create the Show/Hide Manager Step Rule
  1. We will create a rule that hides the Manager Approval step (section) until the flow gets to the Manager step. The rule shows the Manager Approval section on the Manager step and on any steps after it.

  2. Edit the workflow

  3. Click on the PO Step

  4. Click the  icon to edit the PO step
  5. Click the  rules icon on the toolbar.

     Click here to see how to create this rule

    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
    1. Click the to add the rule.
    2. Name it Show/Hide Manager Approval Step
    3. Click the Run Builder button then click Add Condition - this is the Condition wizard
    4. Select current step from the first dropdown.
    5. Select is on or after from the second dropdown
    6. Select Manager Approval from the third dropdown
    7. Click Next then click Add Action - this is the Action wizard where you set up actions that will happen if the condition is true
    8. Set the Manager Approval section to visible
    9. Add another action to set the Manager Approval section to required
    10. Add another action to set the Manager Approval section to printable
    11. 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
    12. Set the Manager Approval section to hidden
    13. Add another action to set the Manager Approval section to optional
    14. Add another action to set the Manager Approval section to not printable

    15. Click Finish.
  6. Click save/exit icon to save the changes to the PO form. Save the flow.

  7. Log out of the designer.

Test Example 4:

  • Click the link to your space that you bookmarked earlier. Login as the designer user.

  • Select the Purchase Order Workflow from the Purchase Order tab. Fill in the PO and sign as the sales person. Click the Send to client button.

  • Logout of the space
  • 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.
  • Login to your  space as the designer@<your tenant>. The Sales person (designer) is taken directly to the Task List.
  • Review the PO then click Send to Manager.
  • Check the manager's email account for the notification email with a subject "Approval needed for PO from {ClientCompany}". Click the link in the email.
  • Login to your  space as jerry@<your tenant>. Jerry is taken directly to his Task List in the space. Find the tasks for the Purchase Order Workflow in the 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 Finish.
  • Logout of the space.
  • 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

In this example, we will add another linked step to route the workflow to the VP for approval. We will need to add a VP Approval section to our PO step then update a business rule to hide this section until the VP Approval step is performed. A customized Task Notification email will alert the VP that there is a task requiring his attention. 
We will need to create a new role (VP) and a new user with the VP role in . Then we can route the workflow to any user that has the role of VP if approved by the manager. This is an example of routing a workflow using a  role.

Create the VP role:

Roles can only be created by the tenant administrator.  The steps are:

  1. Login to  as the tenant admin. 

  2. Click the Manage Roles link.

  3. Click the plus icon.

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

Create a user with the role of VP:

  1. Click Manage Users on the Manage tenant page

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

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

  4. Leave the Reports To field empty

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

  6. You should be back on the user list. Logoff.

Modify the PO step:

Log back into your tenant as the designer user.
Add the VP section: 
  1. Edit the Purchase Order Application then edit the Purchase Order Workflow.
  2. Click the  icon to edit the PO step.
  3. Drop a Section control to the bottom of the form
    1. Click on the section label and change it to "VP Approval". The control name will automatically become VPApproval.
    2. Uncheck the Visible, Required and Printable property checkboxes.
    3. Click the Security tab
    4. Set the Signature property to "Text/Signature Image"
    5. Check the Must Sign property
    6. Drop a textarea control inside the section 
    7. Name it "VP Comments"
    8. Click save/exit icon to save the changes to the PO form.

Modify the workflow:

  1. Create a new linked step from the PO step.
    1. Drag it to the end of the flow.
    2. Click on the linked PO step then click the  Edit Step Properties icon Click on the General Settings tab. Type "VP Approval" in the Name field.
    3. Click on the Assignment tab. Select VP from the Role list in the Assign to Role(s) field.
    4. To customize the task notification email the VP receives, 
      1. Type "VP Approval needed for PO from {ClientCompany}" in the Subject field. 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. Click Finish.

         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>
    5. Click on the Messages section in the Properties panel. Click on the Message Tab. Set the Pending Message property to "PO sent for VP Approval". 
    6. Type "Client:  {ClientCompany}" in the Task Information property. 
    7. Click Submit.
  2. Click to select the Manager Approval step.
    1. Set the Continue Label property to "Send to VP". 
  3. At this point, your workflow should look like this:


  4. Click the  save/exit icon to save your changes. 
Create the Show/Hide VP Section Rule:
  1. We will create a rule that hides the VP Approval step (section) until the flow gets to the VP step. The rule shows the VP Approval section only when the flow is on the VP Approval step.

  2. Edit the workflow

  3. Click on the PO Step

  4. Click the  icon to edit the PO step
  5. Click the  rules icon on the toolbar.

     Click here to see how to create this rule

    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
    1. Click the to add the rule.
    2. Name it Show/Hide VP Approval Step
    3. Click the Rule Builder button then click Add Condition - this is the Condition wizard
    4. Select current step from the first dropdown.
    5. Select is from the second dropdown
    6. Select VP Approval from the third dropdown
    7. Click Next then click Add Action - this is the Action wizard where you set up actions that will happen if the condition is true
    8. Set the VP Approval section to visible
    9. Add another action to set the VP Approval section to required
    10. Add another action to set the VP Approval section to printable
    11. 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
    12. Set the VP Approval section to hidden
    13. Add another action to set the VP Approval section to optional
    14. Add another action to set the VP Approval section to not printable
    15. Click Finish

  6. Click the  save/exit icon to save the changes to the PO step.
  7. Click the  save/exit icon to save the changes to the workflow.

  8. Logout of the designer.

Test Example 5:

  • Click the link to your space that you bookmarked earlier. Login as the designer user.

  • Select the Purchase Order from the Purchase Order tab.

  • Fill in the PO and sign as the sales person. Click the Send to client button.
  • Log out of your space.
  • 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.
  • Login to your  space as the designer@<your tenant>. You will be taken directly to the Sales person's (designer) Task List. Click the Perform icon. The red Perform icon indicates that the task has been assigned to a specific user. In this case, the sales person (designer user). Review the PO then click Send to Manager. Logout of your space.
  • Check the manager's email for the notification email with a subject "Approval needed for PO from {ClientCompany}". Click the link in the email.
  • Login to your  space as jerry@<your tenant>. You will be taken directly to Jerry'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 of your space.
  • Check the VP emails with the title "VP Approval needed for PO from {ClientCompany}". Click the link in the email.
  • Login to your  space as the ed@<your tenant>.. You will be taken directly to the VP's Task List. Click the Perform icon. The blue perform icon indicates that the task has been assigned to a role. The task will be locked when the first user assigned the VP role clicks the Perform icon.
  • Note the Manager Approval and VP Approval sections display as specified by the Show/Hide rules.
  • Enter a comment for the VP, sign and click Finish. Logout of the space.
  • 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.

Since we have seen working examples of how the Task Notification emails work, we will bypass them for the Manager and VP steps when testing workflows going forward.

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.

You can type the JavaScript for the precondition or let create it for you using the Precondition Rule Builder.

Modify the workflow:

We will use the Precondition Rule Builder to create the JavaScript for the precondtion. Follow these steps:
  1. Login to your tenant as the designer user.
  2. Edit the Purchase Order Application, click the Flows tab and edit the Purchase Order Workflow.
  3. Click on the Manager Approval step then click on the General Settings section of the Properties panel. Change the text of the Continue button to say Finish or Send to VP. Click Submit.
  4. Click on the "VP Approval" step

    1. Click on the Precondition Section in the Properties panel.
    2. Click on the Slider to set the Precondition Builder On
    3. Click on the Edit below the slider. It will open a popup to set the precondition.
    4. Select the TotalAmount control from the first dropdown.
    5. Select is equal or more than from the operator dropdown.
    6. Slide the toggle to the right and enter 10000 into the literal field.
    7. Click Accept.

    8. Click Submit.

  5. Click the  save/exit icon to save your changes.
  6. Logout of the designer.
 

Test Example 6:

Follow these steps to test Example 6:

  • Click the link to your space that you bookmarked earlier. Login as the designer.

  • Select the Purchase Order from the Purchase Order tab.

  • Fill in the PO with a Total Amount value that is equal to or greater than $10,000.00. Sign as the sales person. Click the Send to client button.
  • Log out of your space.
  • 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.  
  • Log into your  space as the designer@<your tenant>. Select Task List from the Important Items tab.
  • Click the Perform icon. Review the PO then click Send to Manager. Logout of your space.
  • Login to your space as jerry@<your tenant>. Select Task List from the Important Items tab. 
  • Click the Perform icon. Add a comment and sign as the manager. Click Finish or Send to VP. Logout of your space.

  • Login to your space as ed@<your tenant.  Select Task List from the Important Items tab
  • Click the Perform icon. Add a comment and sign as the VP. Click Finish. Logout of your space.
  • The sales person (designer) and the customer will receive an email with the signed PO. Check the pdf to make sure the VP 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.

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 can 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: 

Log into your tenant as the designer user. Edit the Purchase Order Application, click the Flows tab then edit the Purchase Order Workflow. You can change the button label on any step where Reject from here is checked.

  1. Click the PO step then click on the Rejection section in the left Properties panel.
    1. Check "Reject to here" and uncheck "Reject form here". 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.
    2. Click Submit.
  2. Click the Client Approval step. Click on the Rejection section in the left Properties panel.
    1. Check Reject to here and Reject from here.
    2. Change the Reject Button Label to "Send PO back for revision".
    3. Click Submit.
  3. Click the Sales Review step then click on the Rejection section in the left Properties panel.
    1. Check Reject from here and Reject to here.
    2. Click Submit.
  4. Click the Manager Approval step then click on the Rejection section in the left Properties Panel.
    1. 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.
    2. Change the Reject Button Label to "Reject PO".
    3. Replace the {task.perform.url} template in the Rejection email body to the URL of your  space with /tasklist appended to it. Here is an example.

      Reject Email Message
      <p>This workflow was rejected back to you for further action.</p><p>The work flow 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.

    4. Click Submit
  5. Click the VP Approval step then click on the  Rejection section in the left Properties Panel.
    1. 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.
    2. Change the Reject Button Label to "Reject PO".
    3. Replace the {task.perform.url} template in the Rejection email body to the URL of your  space with /tasklist appended to it. Here is an example.

      Reject Email Message
      <p>This workflow was rejected back to you for further action.</p><p>The work flow 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>
    4. Click Submit.
  6. Click the  save/exit icon to save your changes to the workflow.
  7. Logout of your  tenant.

Test Example 7:

  • Click the link to your space that you bookmarked earlier. Login as the designer user.

  • Select the Purchase Order from the Purchase Order tab.

  • Fill in the PO with a Total Amount value that is equal to or greater than $10,000.00. There is no Reject button on this step. Sign as the sales person. Click the Send to client button.
  • Log out of your 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.

  • 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 Purchase Order Workflow". This is the Rejection email.
  • Open this email. The step of the flow where the rejection was performed and the reason for the rejection is shown in the body of the email. Click the link to the flow embedded in the rejection email. The rejection email subject and body can be customized to reflect whatever you want to say.
  • Log into your 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.

  • 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.
  • Login to your 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  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  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 flow name}". Note the reason for the rejection is included in the email body. Click the link in the Rejection email.

  • Login to your 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 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.

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:

  1. Login to your tenant as the designer user.
  2. Edit the Purchase Order Application, click the Flows tab, then edit the Purchase Order Workflow.
  3. Click on the flow designer toolbar to display the flow Properties panel. Check the Save/Load property. 

  4. Click the PO step to display the property panel for this step. Click on General Settings Section. Check the Save/Load property.  
  5. Change the label of the Save button by typing "Save for Later" in the Save Label field. 
  6. Click Submit
  7. Repeat st