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

Getting Started with Flows

This guide takes you through extremely detailed step by step instructions to create a Leave Approval workflow. This tutorial uses the form you created in the Getting Started with Forms tutorial.

We strongly recommend that you jump directly to the Flow Tutorial if you are already comfortable using the flow designer. The flow tutorial assumes that you have some basic understanding of the flow designer. The Flow Tutorial teaches you important flow design patterns and increases your skills using the many flow designer features.

A common example of a workflow is a Leave Approval workflow, where an Employee requests vacation and the Manager must either approve it, reject it or send it back to the Employee for corrections. Typically, the process is paper or email-based. The Employee fills out a paper form and hands it to the Manager for a signature. The form is then faxed or delivered to HR where it is saved in a folder or scanned into the HR or document management system.

Using Live Forms, you can automate this workflow so that it is completely electronic and paperless. Further, you can integrate the workflow with Google Apps, a document management system such as Digitech ImageSilo/PVE, your database or custom business system so that the leave approvals are stored online.


The steps for the Leave Approval workflow are as shown in the figure:

  1. The Employee goes to a web page that embeds the workflow. Live Forms makes this very easy to do.
  2. The form is configured so that the Employee only sees the relevant portion of the form, i.e. the Employee does not see the Manager approval section or the HR Review section. The Employee information and Manager id are automatically populated by .
  3. The Employee fills in the form, digitally signs it and clicks a Submit Request button.
  4.  puts the leave approval request on the specific Manager's task list, [optionally] notifies the Manager by email and displays a confirmation message to the Employee.
  5. The Manager logs in, and visits a web page that displays an electronic task list.
  6. All pending leave approval requests will be displayed in the task list.
  7. The Manager clicks to perform an approval. The Manager-specific portions of the form are now visible. The data entered by the Employee is automatically populated for the Manager to review.
  8. If the Manager requires corrections, the form can be sent back to the Employee to make changes.
  9. Once approved, the manager digitally signs the form and clicks Submit Request.
  10. In the final step, the workflow is sent to the HR department to update records and/or comments.

On This Page:

Live Forms In-house Only

If you are using Live Forms In-house software installed locally on your own machine, then the 1st step is to login as the admin user and create your 1st tenant. Follow the steps below:

  1. Login as admin@d and type in the default password: admin.  

  2. Click Manage Tenants. 

  3. Click the icon to create a new tenant 


     4. Do not check the "Are you creating a tenant for Confluence" checkbox. Leave the Max Concurrent Users and the Security Manager Class blank.

     5. Fill in the rest of the fields for your tenant.  Click Submit.

Live Forms In-house and Online

The next steps are for both Live Forms In-house and Online tenant users:

  1. Login as the tenant admin user. An example of the tenant admin user id is: admin@mycompany. 

  2. Each tenant has it's own admin user that has permission to create new users, roles and perform other management functions for the tenant. For Live Forms In-house software users it is important to note the distinction between the frevvo admin user and the tenant admin user. Next we need to create a few users and roles in this tenant that we'll use in our Leave Approval workflow.

Setup users and roles

This is a one-time setup that will have to be performed by an administrator.

We will need to create three roles for the Leave Approval workflow:

  1. Click Manage Roles. Notice that the role frevvo.designer already exist by default and cannot be deleted. 


  2. Click the icon to create a new role. Add the role name "Employee" and click Submit

     

     

  3. Repeat step 2 to add the "Manager" and "HR" roles.

  4. Click the Back to Manage Tenant link. 
  5. Click Manage Users. Notice that the user admin already exists by default and cannot be deleted. 

     
     
  6. Click the icon each time to create a new user. 

  7. Add the user named "jerry" and assign jerry the role Manager. Remember to click submit for each one. 
  8. Add the user named "tom".  Assign the Employee role to user tom. Since jerry is tom's manager, select jerry from the dropdown list in the Reports to field.


     
  9. Add the user sue and assign sue the role of HR.

  10. Add the user named "designer" and assign the special role of frevvo.designer
     

     
  11. Logoff as the tenant admin.
  12. You now have your tenant setup and ready to create and test a simple Leave Approval workflow.

Creating the Leave Approval Workflow

  1. Logon to your  tenant as the designer user i.e.designer@mycompany. Replace mycompany with the name of your tenant.

  2. Click the Edit icon for the My Company HR application that you created in the Getting Started with Forms tutorial.



  3. Click the Flows tab. 



  4. Click the New icon to create a new flow. Change the name of the flow to Leave Approval Workflow. Check the Save PDF checkbox so that a pdf image of the flow is saved in the  submission repository.



  5. If you completed the Getting Started with Forms exercise, you should have a Leave Approval Form listed in the palette. Drag the Leave Approval form you just created from the Palette and drop it into the Guide box on the canvas. This creates the first step in the workflow.  Click on the Leave Approval step. Click the Edit Step Properties icon. Click on the General Settings tab. Name the step 'Employee' without the quotes by typing the name in the Name property. Click Submit.



  6. In our example, we will use the same form three times, once for the Employee, Manager and HR steps. Select the Employee step and click the icon twice. This will create two linked steps. A linked step is a copy of the original step. The form cannot be edited from the linked activity but any edits made to the original step (parent form) step are reflected in the linked step.

  7. Click on the first linked step. Click the Edit Step Properties icon. Click on the General Settings tab. Name the step 'Manager' without the quotes by typing the name in the Name property. Click Submit.

  8. Click on the second linked step. Click the Edit Step Properties icon. Click on the General Settings tab. Name the step 'HR' without the quotes by typing the name in the Name property. Click Submit.

Make Changes to the Leave Approval Form

You can edit a form in the Flow designer as well as the Forms designer. 

Be aware that changes made to a form in the Flow Designer are not reflected in the original form in the Forms designer. If you want your changes reflected in both designers, make the changes in the original form in the Forms Designer, then replace the updated form in your workflow in the Flow Designer.

Let's make some changes to the Leave Approval form so we can add a rule to prefill the user name, id, email address and manager's name on each step of our flow. Follow these steps:

  1. Click on the Employee step. Click the  Edit icon. This launches the Leave Approval Form in the form designer so you can edit it.



  2. Change the label of the First Name control to Employee Name. Change the Name of the First Name control to EmployeeName (no space). 



  3. Change the label of the Last Name field to Employee Id.
  4. Change the Name of the Last name field to EmployeeId.
  5. Make sure that the Name field of each control is properly set. This is a critical step to ensure that business rules work. The controls are named as shown in the table below. Make sure that the Control Name field is exactly as shown below including case-sensitivity. 
  6. Uncheck the Enabled checkbox for each control. The control values will be automatically filled in by a business rule.  

  7. Click the  save and exit icon to save the form.

  8. Click the  save and exit icon to save the workflow.
Control LabelControl NameDescription
Employee NameEmployeeNamethe current user's full name
Employee IdEmployeeIdthe login id of the current user
Manager IdManagerIdthe login id of the current user's manager
Employee EmailEmailthe current user's email address

Setup the steps in your workflow

  1. Edit the Leave Approval Workflow.
  2. Click on the Employee step. Click the Edit Step Properties icon. Click on the General Settings tab.  Change the text of the Continue Button label by typing it in the Continue Label field. Ex: Send to Manager.
  3. Click on the Assignment tab. Assign the Employee role to this step by selecting it from the Assign to Role dropdown. Click Submit.
  4. Click on the Manager step. Click the Edit Step Properties icon. Click on the General Settings tab. Change the Continue Label to Send to HR. Manager Jerry will click on this button to send the workflow to the HR department.
  5. Click on the Assignment tab. Assign the Manager role to this step by selecting it from the Assign to Role dropdown.

  6. Click on the Messages tab.
  7. Add a customized message in the Pending Message field. Tom will see this message when he clicks the Send to Manager button. Ex: Your request has been forwarded to your manager for approval.
  8. Add some text in the Task Information field so manager Jerry can identify the task when he sees it on the Task List. You can use a template in the message. A template is a control in your form encased in curly brackets. will resolve the template at runtime and replace the field in the Task Info with the data that is entered into it. If you want to show the Employee Name in the Task Information, enter Leave Approval for {EmployeeName} in the Task Information field so the approving manager will know who the request is for when it appears on their task list. . 

  9. Click Submit.
  10. Click on the HR step. Click the Edit Step Properties icon. Click on the Assignment tab.  Assign the HR role to this step by selecting it from the Assign to Role dropdown
  11. Click on the Messages tab.
  12. Enter "Leave Approval for {EmployeeName}" in the Task Information field.
  13. Enter a Pending Message that Jerry will see when he clicks the Send to HR button. Ex: The Leave Approval for {EmployeeName} has been forwarded to HR.
  14. Click Submit.
  15. You can customize the message the HR user will see when the workflow is completed. 
  16. Click on the  Form Action icon in the tool bar. 
  17. Click on the Display Message wizard.
  18. Enter your customized message 



  19. Click Finish.
  20. Click the  save and exit icon to save the work your have done so far.
     

Add the Manager Approval Section

  1. Edit the Leave Approval Workflow. Click on the Employee step. Click the pencil icon to open the Employee step in the Forms Designer inside the Flow Designer.
  2. Drag and drop a Section control below the Leave Approval Request section. Name the section Manager Approval. 
  3. Drag a text field from the palette and drop it in the section. Type Manager Id as the label and ManagerId2 as the control name. Uncheck the Visible property.
  4. Click on the Style tab and change the width to 6 columns on the grid.
  5. Drop an Email control the the right of the Manager Name control. Type Manager Email as the label and ManagerEmail as the control name.
  6. Add a text area control with 3 lines and name the control Manager Comments.
  7. Select the section by clicking on its header.
  8. In the properties panel, select the Security Tab.
  9. Select Wet signature from the signature dropdown. Check the Must Sign checkbox to require a signature and verify that the Lock checkbox is checked to prevent tampering with the signed data . 

Add the HR Section

  1. Drag and drop a Section control below the Manager Approval section. Name the section HR Approval .
  2. Drag and drop a text control into the HR section. Type HR Id for the label and HRId as the control name.
  3. Click on the Style tab and change the width to 6 columns on the grid.
  4. Drag and drop another text control to the right of the HR Name field in the HR section. Type HR Email for the label and HREmail as the control name.
  5. Add a text area control with 3 lines and name the control HR Comments
  6. As before, in the Security Tab, select Text/Signature Image from the Signature dropdown and check the Must Sign checkbox to make the signature required. 


Add Business Rules

The business rule to display the Certification control if the user checks the sick option in the Type of Leave field should show int the Rules list. We will use the Visual Rule Builder to add five additional rules to Step 1 of the workflow. We will need rules to:

  • Show/Hide the Manager Approval section on the Manager and HR steps
  • Show/Hide the HR Approval section on the HR step
  • Populate the Employee Name, user id, email and manager when the Employee step loads.
  • Populate the manager name and email if the flow is on the Manager Approval step.
  • Populate the HR employee's name and email when the flow is on the HR step.

It is very important to ensure that the Names of the controls in the form exactly match the names used in the rule below and that the names used in a rule are unique across the form.

  1. Click the  rules icon in the flow designer toolbar.
  2. Click the plus icon to add a rule.
  3. Show the Manager Approval section on the Manager and HR step
  4. Click the Run Builder button then click Add Condition - this is the Condition wizard
  5. Select the current step from the first dropdown.
  6. Select is on or after from the second dropdown.
  7. Select Manager from the third dropdown.
  8. Click Next  - this is the Action wizard where you set up actions that will happen if the condition is true
  9. Select the Manager Approval section from the first dropdown
  10. Set the property to as visible by selecting it from the second dropdown.
  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. Select the Manager Approval section from the first dropdown
  13. Set the property to as hidden by selecting it from the second dropdown.
  14. Click Finish.
    The rule should look like this:
  15. Click the plus icon to add a rule.
  16. Name the rule Show the HR Approval section on the HR step.
  17. Click the Run Builder button then click Add Condition - this is the Condition wizard.
  18. Select the current step from the first dropdown.
  19. Select is from the second dropdown.
  20. Select HR from the third dropdown.
  21. Click Next - this is the Action wizard where you set up actions that will happen if the condition is true
  22. Select the HR Approval section from the first dropdown
  23. Set the property to as visible by selecting it from the second dropdown.
  24. 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
  25. Select the HR Approval section from the first dropdown
  26. Set the property to as hidden by selecting it from the second dropdown.
  27. Click Finish.
    The rule should look like this:
  28. Click the plus icon to add a rule.
  29. Name the rule Populate the Employee Name, Email, Employee Id and Manager Id when the Employee step loads.

  30. Click the Run Builder button then click Add Condition - this is the Condition wizard
  31. Select the current step from the first dropdown.
  32. Select is from the second dropdown
  33. Select Employee from the third dropdown.
  34. Click Next - this is the Action wizard where you set up actions that will happen if the condition is true
  35. Select EmployeeName from the first dropdown.
  36. Select to from the second dropdown
  37. Begin typing userFullName in the third field then select the userFullName function when it displays in the dropdown. Type in the closing parenthesis. Tab out of the field. This sets up the EmployeeName field to be populated with the Employee Name using the built-in userFullName function.
  38. Click the Add Action button.
  39. Select EmployeeId from the first dropdown.
  40. Select to from the second dropdown
  41. Begin typing userID in the third field then select the userID function when it displays in the dropdown. Type in the closing parenthesis. Tab out of the field. This sets up the EmployeeId field to be populated with the employee's  user id using the built-in userID function.
  42. Click the Add Action button.
  43. Select ManagerId from the first dropdown.
  44. Select to from the second dropdown
  45. Begin typing userManagerID in the third field then select the userManagerID function when it displays in the dropdown. Type in the closing parenthesis. Tab out of the field. This sets up the ManagerId field to be populated with the user id of the employee's manager using the built-in userManagerID function.
  46. Click the Add Action button.
  47. Select Email from the first dropdown.
  48. Select to from the second dropdown
  49. Begin typing userEmail in the third field then select the userEmail function when it displays in the dropdown. Type in the closing parenthesis. Tab out of the field. This sets up the Email field to be populated with the employee's email address using the built-in userEmail function.
  50. Click Finish
    The rule should look like this:
  51. Click the plus icon to add a rule.
  52. Name the rule Populate the Manager Id and Email on the Manager step

  53. Click the Run Builder button then click Add Condition - this is the Condition wizard
  54. Select the current step from the first dropdown.
  55. Select is from the second dropdown
  56. Select Manager from the third dropdown.
  57. Click Next - this is the Action wizard where you set up actions that will happen if the condition is true
  58. Select ManagerID2 from the first dropdown.
  59. Select to from the second dropdown
  60. Begin typing userManagerID in the third field then select the userManagerId function when it displays in the dropdown. Type in the closing parenthesis. Tab out of the field. This sets up the ManagerId2 field to be populated with the user id of the employee's manager using the built-in userManagerID function.
  61. Click the Add Action button.
  62. Select ManagerEmail from the first dropdown.
  63. Select to from the second dropdown
  64. Begin typing userEmail in the third field then select the userEmail function when it displays in the dropdown. Type ManagerId after the opening parenthesis then add the closing parenthesis. Tab out of the field. This sets up the Email field to be populated with the email address of the employee's manager using the built-in userEmail function.
  65. Click Finish
    The rule should look like this:
  66. Click the plus icon to add a rule.
  67. Name the rule Populate the HR Employee Name and Email on the HR step

  68. Click the Run Builder button then click Add Condition - this is the Condition wizard
  69. Select the current step from the first dropdown.
  70. Select is from the second dropdown
  71. Select HR from the third dropdown.
  72. Click Next - this is the Action wizard where you set up actions that will happen if the condition is true
  73. Select HRId from the first dropdown.
  74. Select to from the second dropdown
  75. Begin typing userID in the third field then select the userID function when it displays in the dropdown. Type in the closing parenthesis. Tab out of the field. This sets up the HRId field to be populated with the user id of the HR employee using the built-in userID function.
  76. Click the Add Action button.
  77. Select HREmail from the first dropdown.
  78. Select to from the second dropdown
  79. Begin typing userEmail in the third field then select the userEmail function when it displays in the dropdown. Type HRId after the opening parenthesis then add the closing parenthesis. Tab out of the field. This sets up the HREmail field to be populated with the email address of the HR employee using the built-in userEmail function.
    The rule should look like this:
  80. Click Finish
  81. Click the  save and exit icon to save the rules.

  82. Click the  save and exit icon to save the workflow. 

Testing the Leave Approval Workflow

 A  great way to test your flow is to use a  space. A space is a frevvo website that is very easy to create. Your deployed forms/workflows are automatically added. Follow these steps to create the space:

  1. Ensure the visibility of your Expense Report flow is set to public in tenant and that it is deployed to production: 



  2. Click on the Spaces Tab. Click the icon. Enter an id and name for your space. Click Create. 
     
  3. Click the  Share icon. Copy the share url for your space then logoff 


     
  4. Paste the space url into another browser or a new tab of the browser you are using. Login  as tom@<your tenant name>.  automatically makes your application a tab on the space menu and your Leave Approval Workflow an option on the menu under the tab. Your space should look something like this:



  5. Click on the tab for your application and then click on the Leave Approval workflow. This brings you to the first step in your flow. The workflow automatically has a navigation bar to indicate which step you are currently in as well as the next steps that are coming. 

  6. Fill in the fields in the 1st step, remember to sign and click the Send to Manager button to route the workflow to the Manager for approval.



  7. Tom should see the customized pending message that you set up on the manager activity in the workflow. 




  8. Logout of your space then login to the space as the manager jerry - jerry@<your tenant>.
  9. Click on the Important Items tab, then click the Task List. Jerry will see the pending Leave Approval request from Tom. Note the Task information that we set up on step 2 of the flow using the template - Leave Approval for {EmployeeName} 
     
  10. Click the Perform icon to display the task. Notice Manager Jerry sees the Employee Information section filled in by Tom and the Manager Approval section so he can approve or reject the request.
  11. The manager name and email fields are populated by our business rule. 
  12. Add a comment and sign the section.

     


  13. Click the customized Send to HR button. The pending message that you set up on the HR step of the workflow displays.



  14. Logout of your space and login as sue@<your tenant>.
  15. Click on the Important Items tab and then on the Task List. The pending task for the HR department displays. Note Sue, the HR employee, sees the Employee Information section, the Manager Approval section and the HR section. 



  16. Click the Finish button to complete the workflow. The flow's configured form action message displays. 



  17. Logout of your space. 

Congratulations - you have just created a simple workflow in . There are many other features available in the product that were not discussed in this tutorial. Refer to our documentation for the details. Some are listed in the Related Topics section below.

Related Topics

  1. Read the general documentation on designing flows for a detailed discussion of workflows and their features  
  2. Like forms, a workflow has three accessibility states. See making forms/flows public for more details.
  3. Like forms, a flows's doc and form actions are configurable. Go back into the frevvo flow designer for one of your flows to use the Form Action and Doc Action buttons. See submitting your form for more details.
  4. Flows can be custom styled to fit the look & feel of your existing web site. See Layouts and Styles

  5. Refer to Flow Design Patterns for a discussion of useful design patterns for workflows.

  6. See the Business Rules chapter for the details and examples of how to add behaviors to your forms/flows using the Visual Rule Builder.

  7. Make your forms/flows more interactive by using templates.