Rikupekka Oksanen

Creating a full-featured workflow application through-the-web using Plone 5

By using Collective.Flow add on, in addition to multiple out-of-the-box features of Plone, we were able to create a customized workflow application to digitalize our travel expense process in a couple of days.

July 2nd, 2020

The problem: error-prone and slow paper process

Our University's financial department tackles with thousands of certain kind of visitor travel expenses per year. In this case, a visitor comes to the University of Jyväskylä, holds a couple of lessons or demos, or something else that occurs only once in a while, and then the university needs to pay them accordingly.

Traditionally, there has been

  1. a paper form to print,
  2. and to fill and to sign
  3. that is then posted to a certain faculty or department,
  4. then a departmental person approves it and
  5. sends it to financial services
  6. which goes through it, calls the person in case there is missing data or unreadable text
  7. and so on.

During this archaic way of doing things there are so many places for errors, starting with missing data and unreadable handwriting and slow posting process, combined with the fact that the user does not know how his or her process is going. 

 

Defining the case and finding a solution

A major hurdle was that we needed a way to identify so-called outsiders or visitors. But we found out when discussing the case, that over 80% of the visiting lecturers actually have a university ID. So we decided, that our solution only caters to them, and we could use our normal LDAP authentication. The rest could still use the old solution at first. This simplified the process and allowed us to use "digital signature" just by saving the user's name and time when they submit the form.

Also, the product owner (financial department) wasn't quite sure about the perfect new process, so we needed a way to incrementally develop both the process and solution so that it would fit their needs.

The new process looks more or less like this. In the end, users don't case about process graphs, they care about easy-to-use end product.

Everything starts with a form, and then some

Has there ever been a workflow solution without a form? Probably not. When building a workflow solution, you will usually need these components:

  1. Workflow modeling tool
  2. Flexible form generator
  3. Workflow engine for the actual process
  4. RPA-tool for automating manual tasks
  5. Electronic signature
  6. Integrations

But in this case, and some others, a major improvement over paper process just

  1. Needs a form
  2. Has a review process
  3. Email happens --> Profit!

But in the real world, these requirements were also needed:

  1. Easy to use, both for visitors and staff members at departments and financial services
  2. No need for training - just short instructions, if necessary
  3. Email notifications with direct links to document
  4. Many levels of permissions, way to pinpoint the person in a department
  5. Workflow state shown clearly
  6. Integrations (LDAP)
  7. Secure and robust
  8. Flexible to change, if needed

Sounds expensive and hard, doesn't it?

Well after creating a couple of previous successful workflow solutions using Plone in this kind of case, without the need to worry about license costs (with Plone's Open Source license), we decided to create yet another one.

But with a plot twist - no need to burden our already busy programmers?

 

Building the solution using Plone

Ok, so we already have this site that already has a couple of workflow solutions in production. They use add on called collective.flow, created by Asko Soukka back in 2018. Collective Flow is, as Asko puts it "Opinionated approach for building form workflow apps with Plone".

In truth, Collective Flow a full-featured add on that allows web editors to:

  • Create form using Dexterity TTW editor
  • Enable field level commenting and versioning when need
  • Select workflows for the submissions and attachments
  • Add custom css, custom js and custom Python validator
  • Apply additional behaviors for submissions
  • Change site language and translate in-place
  • Enable advanced features with Dexterity XML editor...
  • And more

More information about the solutions and collective flow in my Plone Conference 2018 presentation.

Building the solution in the browser

By using the aforementioned tools, I could:

  1. Go to the Plone site
  2. Add a new Flow folder
  3. Add suitable dexterity fields to the flow, which is shown as a form.
  4. Add a new workflow (usually by copying an old one), and customize it to my needs.
  5. Customize, if needed, the custom CSS and javascript and validation straight in the settings.

Adding and editing form fields is super easy with dexterity:

 

In a matter of minutes, we had the first version of the workflow app ready to use.

After that it was easy to discuss with the product owner about the solution, and what needs to be changed.

For the users, it's easier to say what they do NOT want than what they do. Show and listen.

We could omit some of the questions in the old form, making the process even simpler. We could empower the product owner to think about suitable texts for each part of the form.

Here are some highlights of the trough-the-web editing experience:

Editing the custom workflow in Plone is easy: you can add and delete states, customize any transition and set initial state.

Do you need to change permissions in a certain state or transition? Sure, it's all clickable in the browser. 

 

Polishing the diamond

Later, users might want more,

  • Email notifications - use Plone Content Rules
  • Lists of applications to review - use Plone Collections
  • Customizations in some fields in the form - can be done with the XML view of dexterity objects
  • Customizing CSS for better readability - no Plone-specific knowledge needed
  • Visible workflow states - collective.flow has this one
  • Custom validators

I'm not that much of a programmer, but I could just copypaste validation code from older flows and customize it to work in this case :)

 

Editing content rules and pointing them to a certain state change - all too easy:

There's more, but basically after a couple of meetings with the product owner, couple of hours of pointing and clicking, we had a working solution to be used. Of course it needed more to make it production-ready, but days, not weeks.

Alas, the COVID-19 stopped every travel for months, so we could not take this into production. That will happen when its safe to move around again.

Summary

So we managed to create a solution, without programming, in the browser, using out-of-the-box features of Plone and of course the awesome add on Collective Flow. Here are the highlights yet again:

  1. Get a general idea of the new process
  2. Create a form
  3. Customize workflow and permissions
  4. Customize the form for better usability
  5. Add content rules when needed
  6. Show and listen to the users, let them test it
  7. Improve iteratively, both the product and process
  8. Test and pilot and release
  9. Be prepared to change something when wider usage begins. Notice that collective flow (and Plone) smoothly supports different versions of the same base form - we could have slightly different versions of the form for e.g. different faculties.

 

 Overall, I'm quite happy with the product and can't wait to see this in action!