Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Section
Column

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

Tip

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 
    Frevvoproduct
    .
  3. The Employee fills in the form, digitally signs it and clicks a Submit Request button.
  4. Frevvoproduct
     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.
Column
width300px

On This Page:

Table of Contents
maxLevel2

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:

...

     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

Warning

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 "Manager" 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". Do not assign a role for 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 
    Frevvoproduct
     tenant as the designer. 

  2. Click the Edit icon for the My Company HR application. 



  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 
    Frevvoproduct
     submission repository.



  5. If you completed the Getting Started with Forms exercise, you should have a Leave Approval Form listed in the palette. Drag and drop the Leave Approval form you just created into the flow. This creates the first step (activity) in the workflow.  Name the activity 'Employee' by typing the name in the Name property. 


  6. In our example, we will use the same form three times, once for the Employee, Manager and HR.  Select the Employee activity and click the  icon twice. This will create two linked activities. A linked activity refers to the same form as the original activity. The form cannot be edited from the linked activity but any edits made to the original form are reflected in the linked activity. 



  7. Name the second activity Manager and the third activity HR. 

Setup the steps in your workflow

  1. Click on the Employee step. Leave the role dropdown blank so anyone that logs into the tenant can perform step 1.
  2. Change the text of the Submit Button label by typing it in the Continue Label field. Ex: Send to Manager 

      

  3. Assign the role of Manager to the second step. 
  4. 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.
  5. Add some text in the Task Info 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. 
    Frevvoproduct
     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 use the workflow for more than one employee, enter Leave Approval for {EmployeeName} in the Task Info field so the approving manager will know who the request is for when it appears on their task list. 
  6. Change the Continue Label to Send to HR. Manager Jerry will click on this button to send the workflow to the HR department.

     
  7. For the third activity, set the role to HR. 
  8. Enter "Leave Approval for {EmployeelName}" in the Task Info field.
  9. 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. 



  10. You can customize the message the HR user will see when the workflow is completed. 
  11. Click on the  Form Action icon in the tool bar. 
  12. Click on the Display Message wizard.
  13. Enter your customized message 

  14. Click the  save and exit icon to save the work your have done so far. 

      

Make Changes to the Leave Approval Form

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

...

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 EmailEmployeeEmailthe current user's email address

 

Add the Manager Approval Section

 

  1. Drag and drop a Section control below the Leave Approval Request section. Name the section Manager Approval. 
  2. Drag a text field from the palette and drop it in the section. Type Manager Name as the label and ManagerName as the control name.
  3. Click on the Style tab and change the width to 6 columns on the grid.
  4. Drop an Email control the the right of the Manager Name control. Type Manager Email as the label and ManagerEmail as the control name.
  5. Add a text area control with 3 lines and name the control Comments.
  6. Select the section by clicking on its header.
  7. In the properties panel, select the Security Tab.
  8. In the Roles multi-select, select the roles Manager and HR by holding down the shift key and clicking. This section will only be visible to the Manager and to the subsequent HR reviewer.
  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.
  2. Drag and drop a text control into the HR section. Type HR Name for the label and HRName 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. As before, in the Security Tab, select the HR role to restrict viewing of this section to HR Employees.
  6. Select Text/Signature Image from the Signature dropdown and check the Must Sign checkbox to make the signature required. 

Add Another Business Rule

Add a rule that will populate the Employee Name, user id, email and manager when the form loads, the manager name and email if the flow is on the Manager Approval step and the HR employee's name and email when the flow is on the HR step.

...

  1. Click the  rules icon in the flow designer toolbar.
  2. Click the plus icon to add a rule.
  3. Name the rule Initialize Fields for Employee, Manager and HR Steps. 

  4. Copy/Paste the rule below into the rule box. 

    Code Block
    if (form.load)  {
        var an  = _data.getParameter ("flow.activity.name");
        if (an  === 'Employee')  {
            EmployeeId.value  = _data.getParameter('subject.id');
            EmployeeName.value  = SubjectUtil.getFullName(_data.getParameter ('subject.first.name'), _data.getParameter ('subject.last.name'));
            EmployeeEmail.value  = _data.getParameter('subject.email');
            ManagerId.value  = _data.getParameter('subject.reports.to' );
        } else if (an  === 'Manager')  {
            ManagerName.value  = SubjectUtil.getFullName(_data.getParameter ('subject.first.name'), _data.getParameter ('subject.last.name'));
            ManagerEmail.value  = _data.getParameter('subject.email');
        } else if (an  === 'HR') {
            HRName.value  = SubjectUtil.getFullName(_data.getParameter ('subject.first.name'), _data.getParameter ('subject.last.name'));
            HREmail.value  = _data.getParameter('subject.email');
        }
    }
  5. Click the  save and exit icon to save the rule.

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

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

...

Congratulations - you have just created a simple workflow in 
Frevvoproduct
. 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
    Frevvoproduct
    workflows and their features 
  2. See the Leave Approval Workflow Tutorial for the details about integrating with Google Apps or ImageSilo/PVE to save your workflow.
  3. Like forms, a workflow has three accessibility states. See making forms/flows public for more details.
  4. 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.
  5. Flows can be custom styled to fit the look & feel of your existing web site. See Layouts and Styles

  6. Refer to Flow Examples for step by step instructions for designing a real useful workflows, such as an Expense Report, Leave Approval or Vendor Quote workflow.

  7. See the Business Rules chapter for the details and examples of how to add behaviors to your forms/flows.

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