What are we going to build?

By the end of this tutorial, we will have a fully functional Expense Report Workflow, containing the following features:

• A role system, assigning different parts of the flow to different users
• Signatures, which will lock the information in place for security
• Fully customizable options, such as buttons, email notifications, and displayed messages
• Synchronization with Google Docs, sending a .pdf into a pre-made folder for later access

We will also be using Business Rules, which require some knowledge of programming. For help on Business Rules, go to the Business Rules documentation.

Example Forms

Example forms are available for download through our site.

Step 1: Build a form

First, we'll put together a form to collect the employee and manager information.

Auto-filling

The first step in our form is to create an Identification area, which will collect the Id, the Name, and the Email Address of both the employee and the assigned manager. In our tenant, the two employees used are named Jack and Tom. The managers are named, respectively, Jill and Jerry.

Using a simple business rule, we can autofill not only the employee text boxes, but also the corresponding manager boxes. The employee information is automatically filled in using the credentials of the user who is logged in. In the rule below, we are simply hard-coding the manager information but in practice, the manager information would be retrieved from a back end system such as a database or an LDAP server.

if (form.load) {
    var sid = _data.getParameter('subject.id')
    if (EmployeeId.value.length == 0) {
        EmployeeId.value = sid;
        EmployeeName.value = _data.getParameter('subject.first.name') + ' ' + _data.getParameter('subject.last.name');
        EmployeeEmail.value = _data.getParameter('subject.email');
    } else {
        sid = EmployeeId.value;
    }
    if (sid == 'jack') {
        ManagerId.value = 'jill';
        ManagerName.value = 'Jill Burns';
        ManagerEmail.value = 'jill@frevvo.org';
    } else if (sid == 'tom') {
        ManagerId.value = 'jerry';
        ManagerName.value = 'Jerry Mouse';
        ManagerEmail.value = 'jerry@frevvo.org';
    }
}

Expense Report Section (to be filled in by Employee)

Create a section called Expense Report as shown above. Employees will fill in this section to calculate their expenses.

Approval Section (to be filled in by Manager)

Create a section called Manager Approval as shown above. Managers will approve or reject expenses using this part of the form.

Roles on Sections

When an employee is using the form, we do not want the Manager Approval section to be visible.  includes the ability to assign Roles to certain sections. If a section has a Role, only authorized users (who have that Role) will be able to view the section. In our example form, the Expense Report section has not been assigned a role. This means that all users will be able to view it. In contrast, the Manager Approval section has been assigned the role Manager.  This means that only users with the role Manager will be able to view that section. This is similar to the common "For Office Use Only" sections of paper forms.

To assign a section to a role, select the section in question and go to the tab labeled Security in the properties panel. In the scrolling menu, select one or more roles.

Signatures

 supports the ability to digitally sign sections. To enable signatures, select the section (by clicking on its header) and in the properties panel, select the Security tab. Select Text/Signature Image or Wet Signature from the Signature dropdown to enable a digital signature for the section. Refer to Electronic Signatures for more information. If you also check Must Sign, then the form cannot be submitted unless the section is signed. The Lock Signed checkbox is checked by default - if checked, a signed section cannot be edited by a different user once the form is submitted. In this example, once the employee fills in expenses and forwards them to the manager for approval, the manager will not be able to edit the expenses. The digital signature guarantees that the data has not been tampered with. If you uncheck this box, then the signature can be removed by the manager who can then edit the Expenses section.

When you sign a section,  displays your name (from your profile) and the current date.

Step 2: Create the Flow

In this next step, we will create our workflow. To begin creating your flow, click Flows in the left menu, and press the green plus button to add a new one.

Drag/Drop

Begin editing your flow. In the palette in the upper-left, you will see available forms in that application.

]

Simply drag the Expense Report form into the main flows window. For our expense report, which already has roles assigned within the form, we will simply drag and drop the same form twice. This means that the workflow consists of two steps: both steps are using the same form but it will look different depending on who is filling out the form as we will see in the next step.

Assign Roles

Select the first activity (first Expense Report form in this example), and view the properties window on the left. A scrolling menu listis the available roles. For the first form select the Employee role. This assignment makes the first step accessible only to logged in users with the Employee role.

For the second activity, we could simply assign the role Manager. However, we want each employee's expenses to be approved/rejected by his/her manager and not by any manager. If we simply assign the role Manger, this would put a notification in every manager's inbox as soon as any employee in the company filed an expense report. Instead of assigning a role, we will assign it to a specific user.  can dynamically determine which user the notification should go to. In the Expense Report Form, there is a text control named "ManagerId." The Manager Id is simply the username of the manager in question. We can use the information entered in that control to forward a notification to the right manager. In the Properties window, just below the Role menu, there is a text control labeled User (see the figure above). In that text control, type the following:

{ManagerId}

This is a template. At runtime,  will evaluate the value of the data item (ManagerId), which is automatically filled in via a business rule above.  will then send a notification to that specific manager only which is exactly what is desired in this case.

Email Notification

You can customize/configure email notifications in .  In the properties window for an activity, there is a link at the bottom labeled Set Up Task Notification Email. When you click it, a dialog is displayed with a default email message. This default messages reads: "You can access your task list by clicking {task.list.url}." The template at the end provides a link (in the email) to the task list that the manager can use to go straight to his/her list of pending tasks.

You can customize this message, in our example, we have added the sentence "You have a new task concerning {EmployeeName}". You can also insert the employee's name in the subject of the email if desired. The template at the end tells the manager which employee has submitted a workflow for approval.

Customization Options

You can customize several items that are displayed to users of the workflow. Select any activity to view the properties for that activity.

Button Label

This allows you to customize the label of the Continue button in a workflow. For our example, we'll set it to "Report Expense." Note that this applies to the current activity. In this case, we have set the button label for the first activity.

Task Info

This allows you to customize the task description that appears in the manager's task list. Note that this applies to the current activity. We will need to set this property on the second activity (step) in the workflow since that is the step that gets put on the manager's task list. The task description can use templates. For example, we have chosen the task description:

Expense Report from {EmployeeName}

Display Message

This allows you to customize the message that appears onscreen after the employee submits the report and it is sent to the manager for approval. Once again, this applies to the current activity. In our example, we'll need to set this on the second activity (step) in the workflow since that's the step at which the employee is blocked. The display message can use templates. For example, we have chosen the message:

Your expense report has been submitted to {ManagerName} for approval.

Flow Permissions

Finally, give the workflow a name (Expense Report) and finish creating it by clicking the Finish button in the toolbar at the top. On the Flows page that is displayed, click the Lock icon for the workflow (second icon from the left in the group at right). This icon toggles the visibility (permissions) between Private (visible only to the designer), Public in Tenant (visible only to authenticated users in the current tenant) and Public (visible to all users). Click the icon once to make the workflow Public in Tenant.

Step 3: Run the Workflow

For now, we will simply use the Share URL to test the workflow. Click the Share dialog for the workflow and select the second option: Link (Email/Web page). Copy this link and paste it into a different browser.  will display an authentication dialog.

Employee Submission

Login as an employee (tom in our example).  will display the first step in the workflow. This is just the Expense Report form except that the Manager Approval section is not visible.

After completing the expense report and signing, the employee can submit it to the manager. The expense report information cannot be edited by the manager. After pressing the Continue button (which is labeled Report Expense as we customized), the employee will see the customized display message. In our example tenant, when the employee Jack Johnson submits his expense report, he sees the message "Your expense has been submitted to Jill Burns for approval." If the employee Tom Cat submits his expense report, he sees the message "Your expense has been submitted to Jerry Mouse for approval."

Task List

 includes a built-in Task List for every user. To access your Task List, login and click on the Tasks menu item on the left. This will display any Tasks that are pending in your inbox. You can perform tasks, modify them (abort or route to a different person) and view the history (audit trail) of a particular workflow.

Manager Approval

In our example, when a manager (Jill or Jerry) logs in and views the task list, he/she will see any pending Expense Report approvals for their respective employees. The manager can then click the Perform this Task button.

The manager will see the expense report information submitted and signed by the employee. It cannot be edited. However, because of the Role settings described earlier, the manager will see the Approval section. He/She can approve or reject the expense report, enter any comments and Finish the workflow.

Documents/Notifications

  provides a variety of actions that can be performed when the workflow is completed including:

• Submit the document (PDF, TIF, PNG, JPG, XML) including signatures to a document management system such as ImageSilo/PaperVision Enterprise.
• Upload the document (PDF, TIF, PNG, JPG, XML) including signatures to your Premier Google Documents account.
• Send a notification email to the employee with an attached PDF document.
• Save the data in your database.
• Save the data in '  built-in submissions repository.
• Write the data to an online Google Spreadsheet.
• For more information on these, see the documentation.