Web UI

HOWTO: Customize Workflow Tasks

Updated: September 26, 2024

Learn how to create a custom workflow tasks layout in Studio Designer. We'll be using a custom validation workflow template linked to the Contract document type.

Hyland University
Watch the related courses on Hyland University:
Course on Document type layouts.

Prerequisites

Create a Workflow Template

First, we need to create a new workflow template in Studio Modeler. This workflow will be applied to the Contract document type.

  1. Go to Workflow > Process Definitions and click on New.
    create-wf-studio.png
    create-wf-studio.png
  2. On the Activation tab, next to the field Current document has one of the types, select the Contract local type and move it from left to right.
    Now we will add a custom workflow variable called Type to specify which type of contract you are validating.
  3. On the Variables tab, add a field type as a string.
  4. On the Graph tab, select an Accept/Reject user task and drag and drop it on the graph.
  5. Click on the Edit button next to the task.
  6. Fill in the General tab as shown below:
    general-tab-custom-wf.png
    general-tab-custom-wf.png
  7. On the Variables tab, activate the type custom variable by moving it to the right box.
  8. Save your changes. You should end up with a graph like this:
    graph-custom-wf.png
    graph-custom-wf.png

We will finish our Studio Modeler configuration by creating a vocabulary for the type variable, to be able to select the type from a drop down list during the workflow process. The vocabulary will be composed of three different types of employment contract.

  1. Go to Vocabularies and click on New
    create-voc-studio.png
    create-voc-studio.png
  2. Fill in the rows like this:
    voc-created-studio.png
    voc-created-studio.png
  3. Save your modifications.

Create a Task layout

We can now configure our layout on Studio Designer.

  1. In UI, go to the Layouts > Workflows menu and click on Contract Validation task and then on CONFIGURE. The workflow layout works as the document type layout, you can browse the element catalog and switch editors between code and visual.
  2. You can start by reordering the properties on the visual editor to end up with something like this:
    workflow-process-VD.png
    workflow-process-VD.png
  3. Switch to editor from visual to code and change the line corresponding to the type field to turn it into a nuxeo-directory-suggestion to link the type property to the associated directory:
    <nuxeo-directory-suggestion role="widget" label="Type"
     placeholder="Select the contract type..."
     value="{{task.variables.type}}"
     directory-name="type"
     min-chars="0">
    </nuxeo-directory-suggestion>
    
  4. Save your changes.

You can now deploy your project on your instance and see what it looks like!

contract-validation-process-web-ui.png
contract-validation-process-web-ui.png

validation-task-process.png
validation-task-process.png

type-field-web-ui.png
type-field-web-ui.png

For more information about tasks on Web UI, read the related documentation.

Technical Overview

Workflow Tasks

Each workflow task has its own form defined by a dedicated element. This form is excluded from the vulcanization process and is therefore dynamically loaded.

In the $NUXEO_SERVER/nxserver/nuxeo.war/ui/ directory, you can see:

└── workflow
    ├── nuxeo-document-task.html
    ├── nuxeo-document-task-review-result.html
    ├── paralleldocumentreview
    │   ├── nuxeo-task2169-layout.html
    │   ├── nuxeo-task2556-layout.html
    │   └── nuxeo-task328d-layout.html
    └── serialdocumentreview
        ├── nuxeo-task38e-layout.html
        ├── nuxeo-task542-layout.html
        └── nuxeo-task6d8-layout.html

By convention, a $NUXEO_SERVER/nxserver/nuxeo.war/ui/workflow/{worfklowName}/nuxeo-{taskId}-layout.html file defines the form layout of the task with task ID {taskId} for the workflow {worfklowName}.