Add Task Forms and Use the Camunda Tasklist

Goal

In this lab you add some simple task forms to your process. Then you are able to click through the process with the Camunda Tasklist. This means our little lab process is completed and working :-)

In order to have forms displayed to the user in the web GUI you have to define what data should be displayed on that forms. The Camunda Tasklist supports four different approaches to task forms: generic forms, generated forms, embedded HTML forms and external Web pages. In this lab we will use embedded HTML forms and create simple HTML pages.

Detailed information on the use of Embedded Forms can be found in the User Guide and in the Embedded Forms Reference.

Short description

Add the HTML forms to your project.
Bind the forms in the form key to the user tasks and events.
Restart the process application.
Start a process instance in the task list and run through it.

Detailed steps

Create a folder structure named static/forms under src/main/resources.

Add an html file for both of the Review tweet task and the Start event to the src/main/resources/static/forms folder. Use this html snippet template as a starting point for each form. This snippet contains various Camunda Forms SDK directives that simplify access to variables in a process.

<form class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-md-4">My Label</label>
    <div class="col-md-8">
      <input type="text"
             cam-variable-name="variableName"
             cam-variable-type="String"
             required
             class="form-control" />
    </div>
  </div>

  <script cam-script type="text/form-script">
    // custom JavaScript goes here
  </script>
</form>

Update the html files with the process variables that you specified in the JUnit test. Ask yourself - do you really need an approved boolean in the start form? Should the tweet to be approved be editable in the approval screen? You can find additional information regarding available form-controls in the User-Guide
In the Form tab of the Properties Panel, select Type as Embedded or External Task Forms. Set the Form Key of the Start event and the Review tweet task to embedded:app:forms/your-task-form.html Make sure you change the file name to the names of your actual HTML files.
Restart the application to apply the changes in the process model.
After restarting, you can start a process instance in Camunda Tasklist by going to Start Process and selecting your process. After submitting the tweet to be approved you can go to the Tasklist and approve or reject the tweet.
You can edit the HTML files directly in the IDE and reload the page in the browser to see the changes. When you use IntelliJ Ultimate Edition, edit the Run Configuration of the CamundaApplication and select On frame deactivation: Update resources

Hints

If you deploy multiple times because of testing, you will see the versioning capabilities of Camunda Platform. Please ask your instructor for any questions on the Tasklist web application.
In Tasklist, you can see the status of a running process instance. Have a look and play around with it!

Optional

Create another user in the group management. Create filters to see their tasks only.

If you have access to the enterprise version, check the history of the process instances in Cockpit.

Options