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
• Quick View feature so the manager/reviewer can quickly approve/reject the Expense Reports from their Task List
• 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.

Step 1: Build a form

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

Auto-filling

The first step in our form is to create an Identification area, which will collect the the Name, and the Email Address of  the employee and the name of the assigned Reviewer for that employee. In our tenant, the two employees used are named Jack and Tom. The managers (Reviewers) are named, respectively, Jill and Jerry.

Using  Business Rules, we can autofill not only the employee text boxes, but also the corresponding Reviewer box and Report Date. The employee information and the Reviewer name are automatically filled in using the credentials of the user who is logged in. The Report date will be filled in using a separate ruIe. The IRS Mileage Rate is a default value for that field.

Here is an example of a rule to fill in the current date using the frevvo.currentdate function. Refer to the Rule Validator documentation for help troubleshooting your rules.

if (form.load ){ 
ReportDate.value = frevvo.currentDate(form);
}

This rule will autofill the Employee Name, email and reviewer name from the user's credentials.

if (form.load && EmployeeName.value === '') {
  EmployeeName.value = _data.getParameter('subject.first.name') + ' ' +
                      _data.getParameter('subject.last.name');
  EmployeeEmail.value = _data.getParameter ('subject.email');
  Reviewer.value = _data.getParameter("subject.reports.to");
}

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. Use the Table control to make your grid. You will find information about adding, removing and moving columns in a table here,

Add these rules to perform the calculations in the Expense Report::

To compute the Mileage Expense:

for (var i = 0; i < MilesTraveled.value.length; i++) {
  if (MilesTraveled[i].value > 0) {
    MileageExpense[i].value = MilesTraveled[i].value * IRSMileageRate.value;
  }
}

To calculate the Day's Total:

for (var i = 0; i < Misc.value.length; i++)
{
    DaysTotal[i].value = Misc[i].value + Meals[i].value + Travel[i].value + MileageExpense[i].value;
}

And finally, to compute the Grand Total:

var tot = 0;

for (var i = 0; i < DaysTotal.value.length; i++) {
  tot = tot + DaysTotal[i].value;
}
 
GrandTotal.value = tot;

if (ExpenseRepeat.itemRemoved) {var x;}

Approval Section (to be filled in by the Reviewer)

Create a section called Manager Approval as shown above. Reviewers 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. Assign the Manager role to the Manager Approval section in the Expense Report form.

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 from the Signature dropdown to enable a digital signature for the section. You can select the Wet Signature type, if you prefer. 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 reviewer 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 reviewer 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. Rename the second form Manager Review.

Assign Roles

Select the first activity (first Expense Report form in this example), and view the properties window on the left. A scrolling menu lists 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 Manager, 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 "Reviewer." The Reviewer 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 reviewer. 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:

{Reviewer}

This is a template. At runtime,  will evaluate the value of the data item (Reviewer), 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.

Quick View Setup

The Reviewer 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 Review 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.

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 reviewer 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 "Submit Expenses." 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 reviewer'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 reviewer'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 {Reviewer} 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, the employee can submit it to the reviewer. The expense report information cannot be edited by the reviewer. After pressing the Continue button (which is labeled Submit Expenses 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. It cannot be edited. However, because of the Role settings described earlier, the manager will also see the Approval section. He/She can approve or reject the expense report, enter any comments and Approve 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.