What are we going to build?

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 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. When the Manager logs in, she 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, she can send the form back to the Employee to make changes.
9. Once she approves, she 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.
11. The form data along with a PDF image can be electronically saved in a back end system such as Google Apps, ImageSilo/PVE, your HR system etc. The data will also optionally be saved in ' submissions repository.
12. Finally, the original requesting Employee is notified by email.

Setup users and roles

In our example, the company org chart is as shown above.

We will need tHRee roles: Employee, Manager and HR. To create these roles in :

1. Login to as the administrative user for your tenant.
2. On the page that is displayed, click the 'Manage Roles' link.
3. Click the icon and in the form that is displayed type in the desired role. Note that role names are case sensitive.
4. Repeat for the second and third roles.

The admin user will also need to setup the org chart as described below.

1. Login to as the administrative user for your tenant.
2. On the page that is displayed, click the 'Manage Users' link.
3. In the Alphabet at the top click All to display a list of the users in the tenant. If the users shown in the company org chart above are not listed, perform steps 4 - 8 to add them.
4. For each user, click the  icon to add a new user profile.
5. In the form that's displayed, fill in the information for each user shown in the company org chart shown above.
6. Be sure to select the role specified in the company org chart for each user.
7. Select the user's Manager from the Reports To drop down.
8. Click "Submit" to add the user.
9. If you are using Active Directory or LDAP, you do not need to do this.

Creating the Leave Approval Workflow

Setup the steps in your workflow

• Create a new flow by clicking on the Flows menu item and clicking the New button.
• Drag and drop a New Form into the flow. This creates a step (activity) in the workflow.
• Name the activity 'Employee' by typing the name in the Name property.
• 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.
• Name the second activity Manager and the third activity HR.
• For the first activity, set the role Employee.
• For the second activity, we require that it is performed by the Employee's Manager (specific person rather than a role). We'll set this up later.
• For the third activity, set the role HR

Create the Leave Approval form

Read the general documentation on designing forms for a detailed discussion of and their features. In particular, make sure you understand the Name property of a control. You can find more information in this documentation.

The form consists of four sections as described below.

Employee Information Section

View the Form Layout Video to learn more about laying out form controls.

1. Drag and drop controls as shown in the image above.
2. We have created a section with Employee information containing controls Id, Manager Id, Name, and Email.
3. 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. You may label the controls whatever you want.
4. Uncheck the Enabled checkbox for each control and check the Required checkbox. The control values will be automatically filled in by a business rule.

Leave Request Section

This section is filled in by the Employee who is requesting the leave.

1. Drag and drop controls as desired.
2. We've placed Start Date, Number of Days, Type of Leave, Certification and Comments controls as shown.
3. Select the section by clicking on its header.
4. In the properties panel, select the Security Tab.
5. This is considered a Signed Section. Two types of signatures are available from the Signature drop down: Text/Signature Image or Wet Signature. Here is information about the difference between the signature types. Select Wet Signature from the dropdown. 
6. Check the Must Sign checkbox to require the signature and verify that the Lock checkbox is checked to prevent tampering with the signed data .
7. Notice that a "Sign this section" button and an X with a line appear at the bottom right and left of the section when the signature type is selected. 
8. The Employee will have to sign the section before it can be submitted.
9. Select the Security Tab.
10. Select the Employee role from the role dropdown.
11. Do not forget to uncheck the Visible checkbox on the Certification field. This field is not visible on the form unless the Employee selects Sick Leave as the Type of Leave. This will be handled by a rule that will be discussed later in the tutorial.

Manager Approval Section

This section is used by the Manager to approve or deny the leave request. We will set up the Quick View  feature so that the Manager will have a quick way to approve or reject the task from their Task List. This is convenient particularly if this part of the workflow is performed on a mobile device. An Approval control is required for this feature. An Approval control is a section that contains only one text/textarea control and can be optionally set up for a digital signature. Follow these steps to incorporate this feature in your flow:

1. Drag and drop a Section control. Name the section Manager Approval.
2. Add a text area control with 3 lines and name the control Comments.
3. Select the section by clicking on its header.
4. In the properties panel, select the Security Tab.
5. In the Roles multi-select, select the roles Manager and HR. This section will only be visible to the Manager and to the subsequent HR reviewer.
6. Select Text/Signature Image from the signature dropdown. As before, check the Must Sign checkbox to require a signature and verify that the Lock checkbox is checked to prevent tampering with the signed data .

HR Review Section

This section is for the HR reviewer and is similar to the Manager approval section.

1. Drag and drop text controls for HR name and email.  We've labeled the controls Name and Email but the Name property of the control contains HFullName and HEmail. Once again, the form will fill in this control automatically. We'll use the value from this control to create a meaningful audit trail for the workflow.
2. We've also added an optional Comments field.
3. As before, in the Security Tab, select the HR role to restrict viewing of this section to HR Employees.
4. Select Text/Signature Image from the Signature dropdown and check the Must Sign checkbox to make the signature required.

Business Rules

Open the Flow Designer, edit the Leave Approval Flow, click on the form named Employee, edit the form by clicking on the icon, create a rule to initialize the form and a second one to make the Certification control visible when Sick Leave is selected as the Type of Leave. The Rule Validator can help troubleshoot any issues with rules.

Our form contains two business rules: the first one automatically initializes various fields in the form and hides irrelevant sections. This rule is shown below:

• We first get the name of the current step (activity).
• If the step name is Employee and the Employee ID is blank, we'll initialize several fields as shown below. If the Employee ID already contains a value (e.g. if the Manager sends it back to the Employee for corrections), we do not wish to overwrite the data.
• If the step name is Employee, we also want to hide the Manager Approval and HR sections. This will happen automatically if the user does not have the Manager role but remember that Managers are also Employees and might request leave that must be approved by their supervisor.
• The rule also contains initializations to be performed in the Manager and HR steps of the workflow.

Here is an example of a rule that will satisfy the four requirements listed above:

if (form.load) {
  var an = _data.getParameter ("flow.activity.name");
  if (an === 'Employee' && EId.value.length === 0) {
    // User Information
    EId.value = _data.getParameter('subject.id'); // Username
    EFullName.value = SubjectUtil.getFullName(_data.getParameter ('subject.first.name'), _data.getParameter ('subject.last.name'));
    EEmail.value = _data.getParameter('subject.email');
    MId.value = _data.getParameter('subject.reports.to');
    ManagerApproval.visible = false;
    ManagerApproval.required = false;
  } else if (an === 'HR' && MFullName.value.length === 0) {
    MFullName.value = SubjectUtil.getFullName(_data.getParameter ('subject.first.name'), _data.getParameter ('subject.last.name'));
    MEmail.value = _data.getParameter('subject.email');
  }
}

Add a second rule to make the Certification field visible when Sick Leave is selected as the Type of Leave:

if (TypeOfLeave.value === 'Sick') {
  Certification.visible = true;
  Certification.required = true;
} else {
  Certification.visible = false;
  Certification.required = false;
}

When you are satisfied with the rules, click the Finish button to save the Rules and then again to save the updates to the flow and return to the Flow Designer. We're now done with the form.

Setup roles/users for activities

1. Click the Employee activity and select the Employee role.
2. Click the Manager activity and in the User property type in the string {MId}. Remember that the control in the form for the Manager Id was named {MId}. When the workflow runs,  will resolve the string {MId} to the value of the control from the form and will forward the approval request to the specific Manager.
3. For the HR activity, select the HR role.

Set flow properties

1. Click the toolbar at the top of the flow.
2. Check the Save PDF box to generate and save a PDF in the repository.
3. In the Navigation drop down select the type of navigation toolbar you want  to generate.
4. Set the Visibility to Public in Tenant.
5. Set the Deployment to Production.

[Optional] Set button labels

By default, the flow buttons are labeled Continue or Finish but you can customize these labels.

1. Click the Employee Step and in the Button Label property type the desired label e.g. Submit Request.
2. Click the Manager Step and in the Button Label property type the desired label e.g. Send to HR.
   
   

[Optional] Set pending message

When a workflow step must be performed by someone else e.g. the Manager, a default message is displayed on the screen. In most cases, you will want to customize this message.

1. Click the Manager Step and in the Pending Msg property type the desired message e.g. Your request has been forwarded to your Manager for approval. Note that the property is set on the Manager step and will be displayed when the Employee from the prior step clicks the Submit Request button.
2. Similarly, click the HR Step and set the Pending Msg that will be displayed to the Manager. 

If you prefer, you can click the toolbar at the top of the Flow Designer and set the Pending Msg property for the flow as a whole. This will be used if there is no activity-specific Pending Msg.

[Optional] Set history message

Every workflow has an audit trail built-in. When a workflow step is either manually saved by the user or is placed in the pending state for a different user, you can customize a message that is saved in the audit trail. This is extremely useful when viewing the status of a workflow.

1. Click the Employee Step and in the History Msg property type the desired message e.g. {EFullName} requested leave starting {StartDate} for {NumberOfDays}days.  At runtime,  will resolve this message using the data from the form and save it in the audit trail. As before, the names in the {} must exactly match the names of the respective controls.
2. Click the Manager Step and in the History Msg property type the desired message e.g. Manager: Signed by {MId}. 
3. Similarly, for the HR Step, set the History Msg to HR: Signed by {HFullName}.

[Optional] Setup Quick View

The Manager can quickly accept/reject tasks by clicking the  Quick View icon for a task when accessing the Task List. Set up this feature for the Manager Approval form in this flow. Click on the Manager form and then click the Setup Quick View link on the form Property pane. Be sure to check the Enable box and then compose a Summery of the task that will be seen on the Manager's Task List. The Approval Control dropdown will provide a list of all the sections in your form that meet the Approval Control criteria. Refer to this documentation for more information on this feature.

[Optional] Customize notification emails

When a workflow step must be performed by someone else e.g. the Manager, a notification email is sent. The notification email can be turned off by each user in his/her profile. The content of the email can be customized for each step in the workflow.

1. Click the Manager Step and click the Setup Task Notification Email link. In the wizard that appears, you can set the Subject and Message for the email.
   1. For example, in the Subject field, enter ''Leave approval for {EFullName}''. You can use the drop downs at right to select the desired controls.
   2. In the Message field, enter ''{EFullName} has requested {NumberOfDays} days leave starting {StartDate}. To approve or deny this request, please click this link: {task.list.url}." Note the special template {task.list.url}. This generates a link that can be clicked to directly access a user's task list.
2. You may setup the Task Notification Email for the HR step in a similar fashion.
   
   

[Optional] Setup Task Info

When a workflow step must be performed by someone else e.g. the Manager, a task is generated and placed on one or more users' task lists. You can customize the name of the task that is displayed either for each activity individually or for the flow as a whole.

1. Click the toolbar at the top of the flow.
2. In the Task Info property, type Leave Approval for {EFullName}. As before, the control names must be exact.

When you are done, click Finish to complete the workflow.

Connecting the workflow to Google Apps

We'll setup the workflow so that the Leave Approval documents - a PDF and other data - will be stored in your online Google Apps account.

Create a Collection

The first step is to create a Collection (effectively a folder). All leave approval documents will be stored in this parent collection. We'll create a Collection called Leave Approvals.

Use the Google Documents wizard

1. Click the Doc Action button in the toolbar at the top of the form.
2. In the wizard that pops up, select the Save to Google Documents button.
3. Enter your login credentials.
4. After your login has succeeded, the wizard will show the list of Folders (Collections) available.
5. Select the collection you created earlier (Leave Approvals).
6. Choose a name for the Submission Folder. This name should be unique for each submission. The best approach is to choose a combination of controls in the form that will generate a unique name. In our case, we have chosen the name: {EFullName}_{StartDate}. As you remember, there are controls in the form EFullName for the Employee's full name and StartDate for the start date of the leave. Combining the values of these controls creates a unique name.
7. Click the Finish button.
8. Your workflow is now configured to save submissions to your Google Apps account.
   
   

Connecting the workflow to Digitech ImageSilo/PVE

We'll setup the workflow so that a Leave Approval PDF document is stored in your online ImageSilo/PVE project.

Create a Project

The first step is to create a Project in ImageSilo/PVE. All leave approval documents will be stored in this project. We've created a project called Leave Approvals and setup index fields Name, Leave Start Date, and Number of Days.

Use the ImageSilo/PVE wizard

1. In the wizard that pops up, select the Save to ImageSilo or PaperVision Enterprise button.
2. Enter your login credentials.
3. After your login has succeeded, the wizard will show the list of Projects available.
4. Select the project you created earlier (Leave Approvals).
5. In the Send Snapshot drop down, select PDF (or any of the other available options if you prefer).
6. Click the Next button.
   
   

1. On the next screen, the index fields from the project are displayed.
2. For each index field, you may select a form field to map it to. At runtime, the index fields will be populated from the values in the form.
3. Your workflow is now configured to save your document to ImageSilo/PVE.
   
   

[Optional] Setup Additional Email

In most cases, you want to notify the original Employee that requested the leave that the leave was approved in addition to storing the data in Google Apps.

1. Click the Doc Action button in the toolbar at the top of the form.
2. In the wizard that pops up, click the Additional Email Tab.
3. Click the Email data to a specified address button.
4. In the To: field, enter a template using the drop down to the right. Select the Employee's email address via the control EEmail. The To: field should look like {EEmail}.
5. In the Send Snapshot: drop down, select PDF.
6. Uncheck the Send Data: checkbox.
7. Click Next.
8. In the Subject: field enter Leave approval for {StartDate}. Once again, you can use the drop down at right to select controls.
9. In the Message: field you can enter anything you want including dynamic content using the drop down at right. For example, Your leave approval request was successfully processed by {MFullName}. This field can also contain HTML for rich content.

[Optional] Setup a Form Action

You can setup any form action that you choose. For example, to display a message:

1. Click the Form Action button in the toolbar at the top of the form.
2. Select the Display message when users submit your form button.
3. Enter a message.
4. The message can be dynamic. For example, Leave approval successfully processed for: {EFullName}.
5. At run time,  will resolve this message using the actual values of the two controls.

Testing the Workflow

1. On the Flows page, click the Test button for your workflow.  will display the first step in the workflow. This is the Leave Approval Request form to be filled in by the Employee. The Employee Information section should be automatically populated.
2. Fill in the form and click the 'Submit Request' button.
3. Since the second step in the flow was assigned to the user identified by the {MId} field,  will create a new task and put it on that user's task list.
4.  will also notify that user that there is a new pending vacation request (these notifications can be turned on/off by individual users). The email address for the user is obtained from that user's profile.
5. Finally,  will display the Pending Msg that was configured 'Your request has been forwarded to your Manager for approval.' on your screen. 

Task List

 includes a built-in Task List for every user. This task list displays all pending tasks (in our example, pending leave approval requests) for the user. To access the task list:

• Logout and login as the Manager user ('jerry' in the Figure above).
• You should see your Task List similar to the Figure above.
• Click the  icon to open the Quick View of the task that we set up earlier. Jerry, the Manager, can comment, sign the Manager Approval section then quickly accept or reject the request. The Quick View feature makes it very easy for the managers to perform this step of the flow from a mobile device (iPad or iPhone). Refer to the Employee On Boarding Tutorial for information about designing  running on mobile devices.
• If you choose to forego the Quick View, the appropriate sections of the Leave Approval request form (the Manager Approval section, in this case) can be viewed by clicking the detail button. Clicking on the on the perform this task icon  instead of the Quick View displays the the Manager Approval section of the form.

• Notice that the Task List displays the message "Leave Approval for Tom Cat" which is obtained from resolving the Summary field in the Quick View wizard. If you left the Summary field blank, whatever was entered into the Task Info field for this step in the flow will display.
• You can view an audit trail or modify the task by clicking the appropriate icon.
• Approve the task via the Quick View screen by clicking on the Approve button. You can run the workflow a second time to verify what happens if you reject it. If you chose not to use the Quick View, click the  perform this task icon. Jerry, the Manager, reviews the information, fill out the fields in the Manager Approval section and clicks the 'Sign this section' button to digitally sign the form.
• Click Send to HR to send the request to HR for approval.
  
  

1. Login as a user with the HR role ('hanna' in our Org Chart above).
2. Navigate to the Task list and expand the Leave Approvals task.
3. The audit trail now contains information for steps performed by both Tom and Jerry visible at a glance assuming you setup the History Msg as described above. If you did not setup the History Msg, it will be omitted.
4. Click the Perform button (left most icon).
5. The Leave Approval form will be displayed in a popup window.
6. The parts that were filled out by the Employee (Tom Cat) and Manager (Jerry) will be visible but cannot be changed since they are signed.
7. After reviewing the information and filling out any needed fields, Hanna must click the 'Sign this section' button to digitally sign the form.
8. Click the Finish button to complete the workflow.
9. The Form and Doc actions will now be performed: a PDF will be saved to Google Apps or to ImageSilo/PVE as configured, an email will be generated and sent to the original requester (Tom) and a confirmation message will be displayed on the screen.

Sharing/Embedding the Workflow

The workflow can be easily shared or embedded in your web site. There are many flexible options for doing so. You can find instructions in the tutorial on embedding forms and workflows.