IFS Workflow Training Lab

Chapter 1 Lab: Modeling a Process

1. From the Designer Tab, click on the New button at the top left side of the screen.

2. The New BPMN Project pop-up window will display for you to enter information about your new process.

3. Define the Invoice Approval Process:

Title: #Initials# Invoice Approval Process e.g. DE Invoice Approval Process
Description: This process allows a company to route received invoices to the appropriate employee for approval.
Category: Finance

4. The blank process map screen is displayed. Right click on the Start event and delete.

5. Drag a new Pool onto the process design and label as Invoice Approval Process .

6. Drag and drop 3 Lanes to your design.

7. Label the Lanes as Employee, Supervisor and Finance and Treasury.

8. Drag and drop the Start Event and a Task onto the Employee lane. Label the task as Receive Invoice.

9. Define the task type by right clicking on the task and then hovering over the Task Type option and then selecting User Task from the sub-menu.

10. Add an Approve Invoice task to the Supervisor Lane; and a Pay Invoice task to the Finance and Treasury Lane.

11. Define where the workflow will end by adding an End Event to the process after the Pay Invoice task. Double-click on the End Event and enter the text Invoice Paid.

12. Select the Exclusive Gateway icon and drag it onto the right side of the Approve Invoice task. Double-click on the Gateway icon and enter Execute Payment? as the text label.

13. Connecting Process Elements – In order to connect two process elements:

Select any element and click on the connector of its Quick Toolbar.
Drag this connector to the next task or object.
Drop it when finished.

Connect the rest of the process elements as below and add the connection labels Yes and No to the gateways by double clicking on the arrow heads.

This is the final design of the Invoice Approval Process.

IFS Workflow will periodically save your process while you are working, but save your process now by clicking on Save process on the top menu bar.

Chapter 2 Lab: Variables and Dynaforms

Creating Variables for the Process

1. Create the necessary variables for the Invoice Approval Process. Click on the Create button next to Variables.

2. The Create Variable pop up window will display. Create the first variable by entering the following characteristics below:

Variable Name: name
Variable Type: String

Click on Save when finished.

3. The variable list will be updated. Here, you can create new variables, as well as edit or delete existing ones.

4. Now, create the following variables and your variable list should look like below. Please note that all variables are written in the lower camel case naming convention and the complete variable list is 2 pages.

5. For the invoiceApproved variable, click Edit.

6. Select the Define accepted variable values checkbox and enter the below defined variable options:

7. The defined variable list should display as below. Click Save when complete.

8. Click Edit for the terms variable.

10. Enter the below defined accepted variable options and click Save when complete.

Creating a Dynaform

1. Create a Dynaform for the Invoice Approval Process. Click on the Create button next to Dynaforms.

2. The Create Blank Dynaform popup window is displayed. Enter the following information about the form:

Title: Report Form
Description: This form will allow users to submit personal information, invoice details, and a description of each item included in the invoice.

3. Click Save & Open.

4. The Responsive/HTML5 Dynaform Designer is displayed.

5. Divide the Dynaform design into three subsections:

User Details (will contain three web controls)
Invoice Details (will contain four web controls)
Line Items (will contain a grid control)

User Details

1. Start by adding a title to the Report Form. Expand the Web Controls section, drag a title web control and drop it onto the Dynaform design.

2. Select the recently added title by clicking on it to see its properties in the sidebar. Then, change its label to Invoice Information.

3. Drag a subtitle web control from the Web Controls panel, and drop it on the empty row below the Dynaform title. Change its label to User Details.

4. Click on the next blank row to access its properties. Remove the number 12 in the col-span field and set it to 6 6.

5. The row is divided into two 6-column wide sections.

6. Drag and drop a textbox control on the left column. After the textbox has been added, the Create/Select Variable pop up window will be displayed allowing you to assign a variable to this web control.

7. Click on the Select variable radio button and assign the name variable to the field by selecting it from the list.

8. Select the textbox, change its label to Name, and mark it as a required field.

9. Follow the same procedure for the right column. Add a textbox web control labeled Email Address to your form and associate it with the emailAddress variable. Also, mark the field as required.

10. Add a textarea web control to the row below and assign the address variable to it.

11. Use the properties section to change its label to Address and set the following hint: Please enter your full address.

12. At this point, your Dynaform should look like this:

Invoice De tails

1. Add a subtitle web control. Change the label to Invoice Details.

2. Click on the next blank row to access its properties. Remove the number 12 in the col-span field and set it to 6 6 to divide the row into two columns.

3. On the left column, add a dropdown control and associate it with the invoiceType variable. Label this new control as Invoice Type. On the right column, add a datetime control and associate it with the invoiceDate variable. Label this new control as Invoice Date.

4. On the next row, divide it into two parts using the col-span property and add two new controls with the specifications below:

5. The Invoice Details sub-section should look like this:

Line Items

1. Add a grid control to list the line items included in the reported invoice. A grid presents data in a format of a table consisting of columns and rows.

Drag a grid control to the empty row at the bottom of your dynaform.

2. Associate the grid with the grid variable, and change its title to Items:

3. To add columns to the grid, drag a textbox control onto the grid.

4. Using the properties section, change its id to quantity and label to Quantity.

5. Add the following three columns by dragging and dropping the following web controls onto the grid. Update the id and label accordingly:

When done, your grid display.

6. Select each control and update the column width to 25.

7. Select the Total web control in the grid and under properties, click edit for formula. Type in the formula: quantity * unitCost and click Save.

8. After saving, click on the function dropdown field and set to sum for the Total column.

9. Add a subtitle labeled Line Items to the empty row at the bottom of the Dynaform. Select the row by clicking on its white frame and use the crossed arrows to drag and drop the subtitle to its desired position above the grid.

10. Finally, add a Submit button from the web controls section to the bottom of your Dynaform. Change its id to submit and its label to Submit, as shown below.

11. Click Save. To view your completed form, click on the preview icon on the menu bar.

Using PM Tables to Populate Dropdown Fields in a Dynaform

1. From the Designer Tab, open your Invoice Approval Process.

2. Select Dynaforms to view the list of created forms in this process.

3. Click Edit for the Report Form Dynaform.

4. Click on the Invoice Type dropdown field and click on the ellipsis (…) beside the sql property field.

5. Include the following script to populate the Invoice Type dropdown: SELECT ID, DESCRIPTION FROM PMT_INV_TYPE. Click Save when complete.

6. Follow the same procedure to add the below SQL query to the Invoice Subtype dropdown field:

SELECT ID, DESCRIPTION FROM PMT_INV_SUBTYPE WHERE TYPE_ID = @@invoiceType.

7. Click Save on the SQL Editor pop up window.

8. Click on the preview icon on the Dynaform menu bar to test both controls.

Notice how the group of available Invoice Subtype options, directly depends on the Invoice Type selected.

Exporting and Importing a Dynaform

1. Open the Report Form and click on the Export icon on the menu bar.

2. A JSON file of the Report Form will be generated. This file contains the complete Dynaform design and configuration.

3. Close the Report Form and create a new Dynaform with the following characteristics:

Title: Approve Report Form
Description: A supervisor reviews the invoice details and a description of each item included in the invoice in order to approve or reject the reported invoice.

4. Click on the Import icon on the menu bar.

5. Look for the JSON file of the Report Form recently generated and select it.

6. This action will add the same set of fields from the Report Form into the Approve Report Form.

7. Since this form will be used only for supervisor approval purposes, we will set the entire form in disabled display mode.

To do so, click on the gray border of the entire form and select disabled for the display mode property.

8. Update the form by adding in a new subtitle web control labeled Response above the Submit button.

9. Add a dropdown control after the Response subtitle and label it as Invoiced Approved. Assign the “invoiceApproved” variable to this field.

10. Select this field and under properties, select edit for the display mode.

11. Save the Dynaform.

12. To view your completed form, click on the preview icon on the menu bar.

Note that all fields are in a disabled display mode except for the Invoice Approved dropdown.

Chapter 3 Lab: Assigning Users to a Group

1. Select the Admin tab from the main menu.

2. Click on the Users tab.

3. Click on Groups and select the first group Employee.

4. Click on Users.

5. Click on Assign Users.

6. Two columns will be displayed:

On the left, all of the users available to be assigned to the group
On the right, all of the users currently assigned to the "Employee" group.

7. To assign yourself to the group, select your user name on the left column and move it to the right column by drag and drop or using the “>” button.

8. When complete, click on the Back button and assign yourself to the remaining groups: Finance and Treasury and Supervisor.

Chapter 4 Lab: Input and Output Documents

Setting up a New Input Document

1. From the Designer tab, double click your Invoice Approval Process.

2. Click on create Input Documents.

3. On the Create Input Document popup window, enter the following information below and click Save:

4. Go to the main process and click on Dynaforms.

5. Click on the Edit button for the Report Form.

6. In the Dynaform designer, drag and drop a title web control above the Submit button. Label this web control as Attached Files.

7. Add a fileupload control after the Attached File title and assign the invoiceCopy variable to this field.

8. Label the file upload web control as Attach Invoice Copy and click on the Input Document property.

9. Select the Copy of Invoice input document recently created.

10. Save and Close out of the Report Form.

Creating a New Output Document

1. From your process map, click on create Output Documents.

2. On the Create Output Document popup window, enter the following information below and Save:

Notes about the configuration:

Filename generated: “@#USR_USERNAME” will be used to generate the file name e.g. if the current user's name is "John", the file will be generated as "Proof_of_payment_John".
Destination Path: ProcessMaker will store all of the "Proof of payment" generated files into a folder called "Proof_of_payment".

3. From the Output Documents list, click on Open Editor on the right-hand side of your new Output Document.

4. This action will open the Output Document designer. Here, you will find all of the necessary tools to design the content of the Output document.

5. Using the following tools from the toolbar, design the Proof of Payment template:

a. To add a logo, click on the Insert/Edit Image Icon

Under the General Tab, insert the link to a logo and type in the Image Description. Sample P2 Logo: http://info2.p2energysolutions.com/rs/p2energysolutions/images/logo.png
The size of the logo image can be adjusted in the Appearance Tab.
Click Insert to add the logo to the Output Document.

b. Type in the Company Address under the logo and add an underlined title Proof of Payment. The font type and font size can be adjusted from the toolbar.

c. To insert variables from the current case into your Output Document:

Click on the “pmVariablePicker” button from the toolbar

Change the prefix from @@ to @# - to get the value without quotation marks. Double click to add the variable to the Output Document.

Insert the following 4 variables into the Output Document: @#name; @#emailAddress, @#address and @#invoiceDate.
Type the Status: Approved into the Output Document.

6. Your Proof of Payment Output Document template is ready and will displayed as below:

7. Click Save.

Chapter 5 Lab: Triggers

1. Click on Triggers on the main process in the Designer.

2. Click on Create from the pop up window.

3. Enter the following properties for the trigger:

Title: Obtain User Details
Description: Obtain the current user's name, address and email address.

4. Copy and paste the following PHP code:

$user_info = userInfo(@@USER_LOGGED);
@@name = $user_info['firstname'].' 
'.$user_info['lastname'];
@@address = $user_info['address'];
@@emailAddress = $user_info['mail'];
@@requester = @@USER_LOGGED;

5. Click Save.

6. The Obtain User Details is now displayed in the Triggers window.

Chapter 6 Lab: Process Configuration

Creating Assignment Rules for Tasks

1. In the Designer tab, double click on your Invoice Approval Process.

2. Right click on the Receive Invoice task and select Assignment Rules.

3. The Assignment Rules window is displayed for the task.

In this interface, you will be able to define an assignment rule and assign users to this task. The user who starts the case will automatically be assigned to work on the first task in the case. Only users in the starting task's assignment pool may start the case.

4. Select Value Based Assignment and insert @@requester as the Variable for Value Based Assignment field.

Note: The Value Based Assignment will reassign the case to the user whose ID is stored in the variable selected for this assignment rule. In this example, the ID of the user who started the case is stored in the @@requester variable.

5. In the Users tab below, click on View all and look for Employee. Drag and drop this element onto the right column under Assigned users list.

Note: For the Receive Invoice task, an employee will submit all the invoice details.

6. Click Save.

7. On the Invoice Approval Process, right click on the Approve Invoice task and select Assignment Rules.

8. Select Manual Assignment for the Assignment Rule. In the Users tab below, click on View all and look for Supervisors. Drag and drop this element onto the right column under Assigned users list.

9. Click Save.

10. On the Invoice Approval Process, right click on the Pay Invoice task and assign a Manual Assignment. Drag and drop the Finance and Treasury user group to pay the invoice.

11. Click Save.

Assigning Steps to Tasks

1. Right click on the Receive Invoice task in the process map and select Steps from the context menu.

2. The pop up window Steps for task will allow you to assign steps to this task. Each element listed on the left column represents a step option. When assigned, they will determine a sequence of events to complete this task.

3. For the Receive Invoice task, drag the Report Form Dynaform from the left column and drop it anywhere on the right column.

4. After assigning the Report Form Dynaform, let's assign the Obtain User Details trigger. To do so, click on the arrow as shown in the image below.

5. Clicking on the arrow on each element will display the available time intervals for executing triggers. These intervals have the message "No records found".

6. Drag and drop the Obtain User Details trigger onto the Before Dynaform time interval.

7. To collapse the time intervals of the Report Form Dynaform, click again on the arrow. Close out of the pop up window by clicking on the X.

8. Go back to the process map, and right click on the Approve Invoice task and select Steps from the context menu.

9. Assign the Copy of Invoice Input Document as the first step of this task. Then assign the Approve Report Form as the second step. Close out of this pop up window when complete.

10. For the Pay Invoice task, assign the Proof of Payment Output Document as the only step. Close out of this pop up window when complete.

Assigning a Case Label

1. Assign a Case Label to the Receive Invoice task by right clicking and selecting Properties from the dropdown.

2. The Activity Properties window is displayed. Select Case Labels and type in the following. You can also select the variables from the pmVariablePicker button.

Title: @#name - @#invoiceDate_label
Description: Case label

3. Click Save

Creating an Email Notification

1. Create an Email Notification that will be sent to the Supervisor approving the invoice.

2. Right click on the Approve Invoice task and select Notifications.

3. Select Notify the assigned user to this task. Type in the following information:

Email account: No-Reply (This has already been set up in the ADMIN tab under Email Servers)
Email From Format: Email Account Settings
Subject: @#name - @#invoiceDate_label
Content Type: Plain Text
Message: Case @#name - @#invoiceDate_label has been assigned for your review

4. Click Save.

Creating an Email Notification

1. Create an Email Notification that will be sent to the Supervisor approving the invoice.

2. Right click on the Approve Invoice task and select Notifications.

3. Select Notify the assigned user to this task. Type in the following information:

Email account: No-Reply (This has already been set up in the ADMIN tab under Email Servers)
Email From Format: Email Account Settings
Subject: @#name - @#invoiceDate_label
Content Type: Plain Text
Message: Case @#name - @#invoiceDate_label has been assigned for your review

4. Click Save.

Adding Logic to the Gateway

1. Based on the variable setup for invoiceApproved, set up the proper logic conditions for routing the Execute Payment Exclusive Gateway.

2. From the process map, right-click on the Execute Payment gateway and select Properties.

3. In the Routing Rule – EXCLUSIVE window, enter the following logic conditions and click Save when complete:

Receive Invoice: @@invoiceApproved == 0
Pay Invoice: @@invoiceApproved == 1

Chapter 7 Lab: Running the Process

1. To run the Invoice Approval Process, review through your process to ensure the following minimum requirements have been met:

Process/Tasks/Steps/Gateways are built in the Designer
All Needed Dynaforms are created
All Variables are created and assigned to the Dynaforms
Users and User Groups have been created
Assignment Rules for each task have been defined

2. After confirming that the above requirements have been met, click on the Home tab and select New case from the left side menu.

3. Here, you will find all the starting tasks, which you are assigned to. Look for your Invoice Approval Process (Receive Invoice) starting task in the Finance process category, and double click on it.

4. The Report Invoice Form is displayed with the case label. As an employee, you will report an invoice with the following characteristics:

5. Click on Submit to save your data and continue to the next step.

6. On the next step, the employee is able to upload a digital copy of the invoice. Click on the Attach link, then upload any file. In this case, the file "invoice_digital_copy.pdf" was uploaded.

7. After uploading a file, click on the Next Step button.

8. The case is then routed to the next task, Approve Invoice. Select the Supervisor to approve the invoice from the Next User dropdown field. Click Continue.

9. The Email Notification previously configured is sent to the Supervisor selected and the Approve Invoice task will be routed to the Supervisor’s workflow inbox.

10. From the Home tab, select Inbox from the left side menu. Double click on the case for the Approve Invoice task.

11. As the supervisor, you are able to download the digital copy of the reported invoice previously attached (input document created).

12. Click Next Step, to review the Report Form data, in order to approve or reject the reported invoice.

13. Select Yes to approve the reported invoice and click on Submit to continue.

14. The case is then routed to the next task, Pay Invoice. Select the user from the Finance and Treasury group to pay the invoice.

15. From the Home tab, select Inbox from the left side menu. Double click on the case for the Pay Invoice task.

16. In this task, Finance and Treasury will take care of the invoice payment and generate a Proof of Payment document.

17. Click on the doc or pdf version to view the output document previously created. Note that all variables added in the Output Document have been populated with data from the case.

18. Click Next Step to continue.

19. We have reached the end of the process. Click Finish to finalize the case.

Appendix

ProcessMaker Wiki: http://wiki.processmaker.com/

System Variables List:

Variable Name	Variable Description
@@SYS_LANG	Current system language in two letter ISO 639-1 code, which by default is "en" (English).
@@SYS_SKIN	Current system skin, which by default is "neoclassic" in ProcessMaker 3.0.x.
@@SYS_SYS	Current workspace name, which by default is "workflow".
@@PROCESS	Current process UID.
@@TASK	Current task UID.
@@APPLICATION	Current case UID.
@@APP_NUMBER	Current case number. Available Version: 3.0.1.8 and later.
@@USER_LOGGED	UID of the current user.
@@USR_USERNAME	Username of the current user.
@%INDEX	The delegation index number, which is a positive integer that counts tasks in a process, starting from 1. If multiple tasks are operating in parallel, then each task will have a different index number.
@@PIN	The 4 character PIN, which can be used to access information about the case without being a registered user at: http://<IP-ADDRESS>:<PORT>/sys<WORKSPACE>/<LANG>/<SKIN>/tracker/login
@@__ERROR__	If a ProcessMaker error occurs, this system variable will be created containing the error message. Note that this system variable only exists after a ProcessMaker exception occurs. It will not be created by syntax errors in PHP or JavaScript or by errors that ProcessMaker doesn't know how to handle.