Activiti Review and Email Process Tutorial

Welcome to Activiti!Screen Shot 2016-08-31 at 8.42.13 AM

In this tutorial we will be going through the creation of a new process. It is important to note that this tutorial will require that you have Email enabled.

Let’s get started, and click on the button labeled “Kickstart App”.Screen Shot 2016-08-31 at 8.42.23 AMTo get started, we’ll need a form to start from. At the top of your screen click on the “Forms” tab, and you’ll be taken to this page.Screen Shot 2016-08-31 at 8.42.46 AMClick on the “Create new form now!” button and you’ll be presented with this.Screen Shot 2016-08-31 at 8.42.58 AMIn this tutorial we gave the name “Start Form”, but you can call it whatever you want. On the next screen you’ll be given a lot of options to add to your form on the left. Creating the form uses a drag and drop method, so go ahead and drag a Text item onto your form.Screen Shot 2016-08-31 at 8.43.43 AM

Hover your mouse over the label and you’ll see two “Edit or Delete” option popups (denoted by the pencil or ‘x’), you’ll want to click on the far right one, as that will allow you to edit how many columns are in that row of the form.Screen Shot 2016-08-31 at 8.43.58 AMThe window you should see will match the one above. For this tutorial all the row’s we’ll add will have 4 columns.  Now we’ll edit the text field we placed earlier.

Screen Shot 2016-08-31 at 8.44.22 AM

For the tutorial we gave the text field the label of Title, which automatically gives it the ID of ‘title’. Then, on a new row (again, with 4 columns) we’ll add a multiline text field below the Title and give it the label of Description, but span it over 3 columns, shown below.Screen Shot 2016-08-31 at 8.44.53 AM

And now you’ll add two Date fields labeled Start Date and Due Date, on the same row. You’ll add a Person field and label it Reviewer, and you’ll add an Attach field and label it Attachment. At the end your form should look as it does below.Screen Shot 2016-08-31 at 8.47.29 AM

Save that form, and exit the editor. Now we’ll make a Business Process Model.Screen Shot 2016-08-31 at 8.47.48 AM

Click the Create Process button, and  make sure your Editor type  is BPMN editor, and the Stencil for this tutorial is the Default BPMN.Screen Shot 2016-08-31 at 8.48.21 AM

On the main screen you’ll want to drag a User Task next to the Start Event. and then connect it using the arrow icon from the Start Event to the User Task.Screen Shot 2016-08-31 at 8.48.54 AMScreen Shot 2016-08-31 at 8.49.06 AM

Now click on the Start Event, and notice there’s a field called Referenced Form.Screen Shot 2016-08-31 at 8.51.13 AMScreen Shot 2016-08-31 at 8.49.21 AM

When you click you’ll be given the option to use the Start form you made earlier. Do so and click Save.Screen Shot 2016-08-31 at 8.51.21 AM

Now click on the User Task you made, and Name it Review Task. In the Referenced form section, you’ll want to create a New Form. We’ll name this form Review Form. Click on the Outcomes tab and add the outcomes of Approve and Reject.Screen Shot 2016-08-31 at 8.49.54 AMScreen Shot 2016-08-31 at 8.50.15 AM

When you’re done with the outcomes it will look like the screenshots above. Now click the Design tab and you’ll want to recreate the layout of the Start form with Display Value fields.Screen Shot 2016-08-31 at 8.50.27 AMScreen Shot 2016-08-31 at 8.56.13 AMYou don’t need to change the labels, as using the Form field to populate the fields will create the label for you. At the bottom of the form you’ll add a new multiline field labeled Comments.Screen Shot 2016-08-31 at 8.57.34 AM

Once you’re done, the form will look like the screenshot below.Screen Shot 2016-08-31 at 8.57.47 AM

When you’re done, save the form and exit the editor to go back to the Process model builder. From the User task add an exclusive gateway (the diamond with an X in it) connected with the arrow. Then add two Mail Tasks both connected from the exclusive gateway like shown below. Name one Approve, and the other Reject. Screen Shot 2016-08-31 at 9.00.46 AM

Now select one of the Arrows from the exclusive Gateway to the Mail Task, as shown below.Screen Shot 2016-08-31 at 9.00.22 AM

You’ll notice the arrows have settings available. Specifically the setting of Flow Condition.Screen Shot 2016-08-31 at 9.00.57 AM

It will bring up a menu, and you’ll want to set the sequence flow condition for the Approve arrow like the screenshot shown below.Screen Shot 2016-08-31 at 9.01.14 AM

Now for the Mail Tasks, you’ll choose the “To” settings will be populated, for this tutorial it will be to the initiator of the process, shown below.Screen Shot 2016-08-31 at 9.03.42 AM

For the subject we used Task Approved and Task Rejected, for the respective Mail Tasks. now, for the mail Message you’ll modify the Html setting, as shown below.Screen Shot 2016-08-31 at 9.08.10 AM

You’ll notice that the fields are being referenced by their ID from the forms we created earlier. Line breaks have to be made using the <br> method, as we are modifying the message in HTML so line breaks need to be included that way, otherwise it’ll display the information on one line. The message above is for the Approve mail task, and the reject mail task would need the word “approved” changed to “rejected”. Save the messages, and format the model, you can use bend points  to bend the arrows to look cleaner. You’ll add another exclusive gateway and an end task, and at the end your model will look as it does below.Screen Shot 2016-08-31 at 9.08.59 AM

You’ll want to validate the model before saving, by click the Checkmark next to the save button. You should see a green banner that should allow you to save and exit the process model editor. If not go back and check your steps.

Next we will create the App definition in order to use and test the process model we created.Screen Shot 2016-08-31 at 9.09.30 AM

We’ll name this App, Review App.Screen Shot 2016-08-31 at 9.18.11 AM

Next you’ll include the model you created earlier.Screen Shot 2016-08-31 at 9.18.21 AM

Then you’ll add the people/groups you want to be able to use this App and have it displayed on their dashboard.Screen Shot 2016-08-31 at 9.18.38 AM

Now we’ll save and publish the App definition, this will allow you to use and test the App and process we created.Screen Shot 2016-08-31 at 9.19.07 AM

No go to your dashboard and go to the newly created App’s processes tab so we can start testing.Screen Shot 2016-08-31 at 9.19.46 AM

Start a process, fill out the start form and hit complete. You’ll then see a screen like this one.Screen Shot 2016-08-31 at 9.21.15 AM

You’ll see the Active Tasks section has the Review Task we made. Click on that, and you’ll be taken to the Review Form we made earlier.Screen Shot 2016-08-31 at 9.21.37 AM

Fill out the comments section and hit Approve or Reject.Screen Shot 2016-08-31 at 9.21.59 AMNow check your email to see how it worked.Screen Shot 2016-08-31 at 9.22.27 AMScreen Shot 2016-08-31 at 9.23.00 AM

You’ll notice that instead of the Reviewer’s name, there’s a number instead! Oh No!

This is because when referencing a person objected, the user ID is returned and not the name. To fix this, we’ll edit the html portion where the reviewer name goes you’ll want to putScreen Shot 2016-08-31 at 10.31.59 AM

And that will give you the reviewer’s first and last name, as it uses the user ID in conjunction with the userInfoBean, to find the reviewer from before and the getFirstName and getLastName methods to get the first and last names, respectively.

We hope this tutorial has been helpful for you. Please leave your feedback, questions, or issues in the comments below. Happy workflowing!

Leave a Reply

Your email address will not be published. Required fields are marked *

From our Blog...

Alfresco SDK 3.0 Walkthrough, Part 2

If you missed our first part of this walkthrough series, you’ll want to check that out first, as it will inform this one. In the last post we talked about setting up the base project and discussed the pom files. Now, we’ll dive a little deeper into the folder structures and other files, and how they’ll… Read more »

Read More

It’s here! Alfresco to Dropbox Connector

As mentioned in a previous post we’ve been working on a way to synchronize content from Alfresco to Dropbox. Where do I get it? You can get the project as well as installation instructions right here at our github. What can we expect? Since this is just a beta release, there will still be bugs and issues… Read more »

Read More

Coming soon: Alfresco Connector for Dropbox

Lately here at Fika we’ve been thinking of a fun new Community project for Alfresco that will provide users a way to connect to their content. In that regard, we noticed an Alfresco integration for Dropbox[1] that was mostly finished, but needed to be updated. The API it used is being retired by Dropbox at… Read more »

Read More