Formio Plugin for Camunda Tasklist

Hey all.

cc @camunda

Been working on a little but I would say valuable plugin for Tasklist: Simple, easy to use, straight to the point; Formio Integration!

This gives us Formio forms within tasklist (start forms and User Task Forms) without having to write new HTML. You can build your formio JSON and import the JSON file.

It provides multiple options and does not require any modifications to camunda modeler.

Features:

  1. Configure the use of the formio form using regular Form Key syntax:
     embedded:/forms/formio.html?deployment=MyUT1.json
    
  2. Deploy .json (form schemas) through the regular deployment API along with your BPMN
  3. Re-use forms by placing the JSON files in the file system / webapp folder of tasklist:
     embedded:/forms/formio.html?path=/forms/MyUT1.json
    
  4. Pre-populate fields based on Process Variables / Task Variables: You can define and manipulate which variables to fetch (inlcuding JSON variables). See the Readme.
  5. Submissions are saved as a json variable (including metadata about the browser that made the submission) See Readme.
  6. Customize the submission variable name:
     embedded:/forms/formio.html?deployment=MyUT1.json&var=MyCustomVarName
    
  7. Set a submission as Transient Variable so you can manipulate the submission within the BPMN/transaction before saving as a process variable.
     embedded:/forms/formio.html?deployment=MyUT1.json&transient=true
    

This should give the community a MUCH NEEDED upgrade to the embedded angular forms which have really shown their age and hardships with lack of features over the years…

Feedback is always welcome!

Enjoy!!

9 Likes

Hey all, I have added Server-side validation! https://github.com/StephenOTT/camunda-formio-plugin#server-validation-validating-submissions-against-the-schema-on-the-server

You can now set a validation constraint, and if you have the form-validation-server running it will validate. You can even define “server-side only” validations.

Enjoy!

3 Likes

I have just released a update for this plugin.

There is now samples and quickstarts for Springboot and Docker:

  1. Deploy your own springboot instance with: https://github.com/StephenOTT/camunda-formio-plugin/tree/master/springboot
  2. Deploy your own docker image: https://github.com/StephenOTT/camunda-formio-plugin/tree/master/docker

Enjoy!

You can also check out the field pre-population using variables (including json variables) with: https://github.com/StephenOTT/camunda-formio-plugin#simple-configuration

If you check out the latest code, I have added file upload/download support, as well as sub forms/nested forms.

Sub forms/nested forms enable you to quickly reuse forms such as: display a readOnly version of a start form in a user task, and populate the fields with the values from the start form submission.

1 Like

I have added support for BPMN-Error and BPMN-Escalations.

It also supports variations for interrupting and non-interrupting events.

1 Like

Stephen, I am trying to deploy with spring boot using deployment option
embedded:app:forms/formio.html?deployment=MyUT1.json,
I placed bpmn and json files next to each other in src/main/resources but the forms are not being rendered in the engine when I start a process instance. I tried with path parameter as well by placing json files in src/main/webapp, same issue, it doesn’t render in the engine. Your help is really appreciated on this.

!

Does it work if you use the deployment method instead of using path? You deploy your files through the rest API.

See the readme. You are mixing file system and rest API deployments. You need to deploy your files through the rest API.

Update made today to better support Tasklist bootstrap 3. Forms should be rendering very closely or the same as the rest of tasklist’s implementation of bootstrap3

See release 1.3

Stephen, you are right, it works fine when I deployed all files through REST API and I used parameter as deployment= in the form key
I am trying to use file system option with spring boot app.

  1. I changed all the formkeys in the modelto use path variable in the model
    example: embedded:app:forms/formio.html?path=/forms/ChoicesEnumExample.json&var=choice
  2. I kept .bpmn file under src/main/resources
  3. I tried placing json files in src/main/webapp/forms and src/main/resouces/static/forms.

then, I am able to start the process but when I tried to load the user task for I see the JSON file not found an error on the browser. Really appreciate if you can help with the spring boot specific file structure

What does the console say?

I just tested and it is working as expected. I updated the BPMN in the ./bpmn folder with a path example. You still require to deploy the BPMN through the rest api. But then there will be a user task:
“Typical Form with Server Validation (path loaded)” embedded:/forms/formio.html?path=/forms/MyUT1.json&var=subWithServerValidationPathLoaded

Released a new feature today that provides variable security using extension properties: https://github.com/StephenOTT/camunda-formio-plugin/tree/master#get-form-variables-command-security-plugin

The plugin provides two types of variable security:

  1. allowed-variables : a comma separated list of variable names that can be accessed using the endpoint GET /task/{id}/form-variables or the java api (getFormVariables).
  2. restricted-variables : a comma separated list of variable names that cannot be accessed using the endpoint GET /task/{id}/form-variables or the java api (getFormVariables).

allowed-variables is used to control the exact list of variables that can be accessed. Any variables that are not part of this list will be removed from the result. No error will be thrown.

restricted-variables is used to control which variables cannot be accessed. Any variables that are part of this will be removed from the result. No error will be thrown.

Using this ensures that you can control variable access at runtime (assuming that you have locked down other endpoints on the Rest API and WebApps REST API, so only task/id/form-variables can be used.

To control variable modification it is assumed that you will use a Formio Form and the Formio server side validation.

If you try and request a variable using the formio pre-population feature and the variable is not returned from /form-variables, then an error notification will be provided in the task list UI.

Enjoy!

@StephenOTT, love this plugin; adds so much usability to Camunda’s Tasklist UX that it may just be the thing I needed transition my company!

One issue I’m running into; I cannot seem to access the submitted variable (transient or not) via a start even execution listener (neither start nor end) unless the start-event is flagged as Asynchronous Before.

This might be fine, except ultimately I’m wanting to use transients variables and have my listener parse things out as appropriate. Of course, because of the seemingly async-before dependency, the transient data is no longer available :frowning:

Have you experienced this at all? Any ideas where I’m going wrong?

1 Like

It is a bug in 7.13. Bug? Transitory Variable created through form submission is only available after the start event?

The temp solution is use a script task after your start event to do the same work that your listener would have done

Bug in 7.13 was certainly the culprit. Thanks for the heads up!

For my use case, I’ve moving 7.14 and have confirmed that this particular scenario appears to be resolved; but thanks for the heads up on a Script task workaround. I may be forced to leverage that before I get to Prod.

Thanks for all the hard work you do throughout the community here!

1 Like

Update that makes configuration much easier!

See the 1.6 release

@Niall

Use Extension Properties to set which json and validation:

You can use all of the same properties :slight_smile:

When you use the extension properties, you do not need to configure the formKey or form fields (for the server validation). All of that is taken care of! :slight_smile:

Enjoy!

1 Like

Is there any interest in having the ability to store the Formio JSON in a extension property in the BPMN? This would mean you no longer have to upload multiple files (such as json files for each form).

Thoughts?