What are we going to build?

A common example of a workflow is a leave approval workflow, where an employee Employee requests vacation and the manager Manager must either approve it, reject it or send it back to the employee Employee for corrections. Typically, the process is paper or email-based. The employee Employee fills out a paper form and hands it to the manager 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.

...

The steps are as shown in the figure:

1. The employee 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 Employee only sees the relevant portion of the form, i.e. the employee Employee does not see the Manager approval section or the HR Review section. The employee Employee information and manager Manager id are automatically populated by .
3. The employee Employee fills in the form, digitally signs it and clicks a Submit Request button.
4. puts the leave approval request on the specific managerManager's task list, [optionally] notifies the manager Manager by email and displays a confirmation message to the employeeEmployee.
5. When the manager 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 Manager clicks to perform an approval. The managerManager-specific portions of the form are now visible. The data entered by the employee Employee is automatically populated for the manager Manager to review.
8. If the manager Manager requires corrections, she can send the form back to the employee 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 Employee is notified by email.

Setup users and roles

...

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

...

Create the Leave Approval

...

form

Setup the steps in your workflow

Image Removed

...

The form consists of four sections as described below.

Employee Information Section

Image Added

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

1. Drag and drop

...

Create the Leave Approval form

The form consists of four sections as described below.

Employee Information Section

Image Removed

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

Image Removed

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

Image Removed

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 reviewercontrols as shown in the image above.
6. We have created a section with Employee information containing controls Id, Manager Id, Name, and Email.
7. 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.
8. 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

Image Added

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

Image Added

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

Image Added

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. As before, check Signature dropdown and 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

Image Removed

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 Image Removed 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:

...

1. 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 Image Added 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 = _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.id'); // Usernamereports.to');
    } else if (an === 'HR') {
        EFullNameHFullName.value = SubjectUtil.getFullName(_data.getParameter ('subject.first.name'), _data.getParameter ('subject.last.name'));
    EEmail    HEmail.value = _data.getParameter('subject.email');
     MId}
} 

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

if (TypeOfLeave.value === _data.getParameter('subject.reports.to'Sick'); {
   ManagerApprovalCertification.visible = falsetrue;
    ManagerApprovalCertification.required = falsetrue;
 
} 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;
}

...

 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.

Creating the Leave Approval Workflow

Setup the steps in your workflow

Image Added

• Create a new flow by clicking on the Flows menu item and clicking the New Image Added button.
• Drag and drop the Leave Approval form you just created 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 Image Added 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

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 managerManager.
3. For the HR activity, select the HR role.

...

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 managerManager, 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 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. 

...

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 {MFullNameMId}. Status: {Approve}. 
3. Similarly, for the HR Step and , 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.Image RemovedImage Removeda 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.

Image Added

[Optional] Customize notification emails

When a workflow step must be performed by someone else e.g. the managerManager, 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 managerManager, 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.

...

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 Folder

The first step is to create a Collection (effectively a folder)sign into your Premier Google Account and create a folder. All leave approval documents will be stored in this parent collectionfolder. We'll create a Collection folder called Leave Approvals.

Image Removed Image Added

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) availableFolders available.
5. Select the collection the folder 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 employeeEmployee'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 projectstored 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

Image RemovedImage Added

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.
   
   

Image RemovedImage Added

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.
   

Image Removed

 Image Added

[Optional] Setup Additional Email

In most cases, you want to notify the original employee 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 employeeEmployee'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 {MFullNameHFullName}. The status is: {Approve}. This This field can also contain HTML for rich content.

...

1. On the Flows page, click the Test button for your workflow.  will display the first step in the workflow. This is the Vacation Leave Approval Request form to be filled in by the employeeEmployee. 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 Leave Approval 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. The templatized string {MId} will be replaced by the value of that control in the form.Manager for approval.' on your screen. 

Task List

Image Removed

 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: 

...

Image Added

 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 Image Added icon to open the Quick View of the task that we set up earlier. Jerry, the Manager, can comment, 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 more information.
• 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. The same display can be seen by clicking on the perform this task icon Image Added instead of the Quick View icon. 

Image Added

• 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. A "Task sucessfully approved" message will display.You can run the workflow a second time to verify what happens if you reject it.

Image Added

• If you chose not to use the Quick View, click the Image Added perform this task icon. As Jerry, the Manager, you will review the information, fill out the fields in the Manager Approval section and click the '"Sign this section" button to digitally sign the form.

...

Image Removed

...

• Click Send to HR to send the request to HR for approval. 

Image Added

• Logout as Jerry the Manager and Login as a user with the HR role ('hanna' in our Org Chart above). The Quick View feature is not configured for this activity of the flow so only the Manager Approval and HR sections of the Leave Approval request form will display based on the roles assigned earlier.
• Hanna must review the information and filling out any needed fields,

...

• then click the 'Sign this section' button to digitally sign the form.
• Click the Finish button to complete the workflow. 
• 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.

Image Added 

• Click the  Image Added icon to view the Audit trail for the flow
• The audit trail now contains information for steps performed by both Tom, Jerry and Hanna 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.
  
  

Sharing/Embedding the Workflow

...