Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3
Section
Column

Image RemovedImage Added

Column
width300px

On This Page:

Table of Contents
maxLevel12

What are we going to build?

...

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

We will need tHRee 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 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.

...

Create the Leave Approval

...

form

Tip
Read the general documentation on designing flowsforms for a detailed discussion of workflows and their features

Setup the steps in your workflow

Image Removed

  • Create a new flow by clicking on the Flows menu item and clicking the New Image Removed 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 Image Removed 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

Tip
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

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.
Control Label Control Name Description
IdEldThe login id of the currently logged in Employee (user)
Manager IdMIdThe login id of the current user's Manager
NameEFullNameThe current user's full name
EmailEEmailThe current user's email address

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

It is very important to ensure that the Names of the controls in the form exactly match the names used in the rule below and that the names used in a rule are unique across the form.

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

Code Block
if (form.load) { var an = _data.getParameter ("flow.activity.name"); if (an === 'Employee' && EId.value.length === 0) { // User Information EId. 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

Image Added

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.
Control Label Control Name Description
IdEldThe login id of the currently logged in Employee (user)
Manager IdMIdThe login id of the current user's Manager
NameEFullNameThe current user's full name
EmailEEmailThe current user's email address

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

It is very important to ensure that the Names of the controls in the form exactly match the names used in the rule below and that the names used in a rule are unique across the form.

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

Code Block
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.reports.to');
    } else if (an === 'HR') {
        HFullName.value = SubjectUtil.getFullName(_data.getParameter('subject.first.name'), _data.getParameter('subject.last.name'));
        HEmail.value = _data.getParameter('subject.idemail');
// 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} 

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

Code Block
if (TypeOfLeave.value === 'Sick') {
  Certification.visible = true;
  Certification.required = true;
} else {
  Certification.visible = false;
    ManagerApprovalCertification.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:

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

Creating the Leave Approval Workflow

Tip

Read the general documentation on designing flows for a detailed discussion of workflows and their features

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

...

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.

Image RemovedImage Added

[Optional] Customize notification emails

...

  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

...

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

Info

This tutorial assumes you have already copied the google.war file from <frevvo-home>/ext/connectors to c:\frevvo\tomcat\webapps.

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

Image Removed

 

  1. Google Apps account.

Image Added

Warning

Do not use spaces or special characters when creating submission folder names.

Connecting the workflow to Digitech ImageSilo/PVE

Info

Skip this step and go to Setup Additional Email if you are not using Digitech ImageSilo/PVE.

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

Info

This tutorial assumes you have already copied the pve.war file from <frevvo-home>/ext/connectors to c:\frevvo\tomcat\webapps.


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 RemovedImage Added

[Optional] Setup Additional Email

...

  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 {MFullNameHFullName}. 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 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 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. 

...

 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 more 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 The same display can be seen by clicking on the on the  perform this task icon  instead of the Quick View displays the the Manager Approval section of the form.

...

  • 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  perform this task icon. As Jerry, the Manager, reviews you will review the information, fill out the fields in the Manager Approval section and clicks click the '"Sign this section' " button to digitally sign the form.
  • Click Send to HR to send the request to HR for approval.

 

...

  • 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

...