Client Applications

HOWTO: Customize Nuxeo Mobile Workflow Tasks Layout

Updated: November 30, 2018 Page Information Edit on GitHub

Since the version 1.13.0 on iOS and 1.11.0 on Android, workflows defined in Nuxeo Studio can be processed by users from the mobile application.

To enable the processing of tasks on mobile devices, the tasks mobile layout need to be defined.

Prerequisites

Before you start, please follow this how-to to create a complete workflow.

mobile_workflows_WebUI_start
mobile_workflows_WebUI_start

Define the Task Layout

The format of the layout is a JSON object with the list of task fields and properties to display.

On the Studio Designer side:

  1. Go to Resources tab
  2. Under Workflow section, go to contractvalidation
  3. click on CREATE
    A pop-up window appears, select an Empty File with the name of the related task and the JSON format.

HOW_TO_workflows_studio_create_json
HOW_TO_workflows_studio_create_json

The name of this file should match the filename of the .html task file.

Add the following content to this file to allow selecting the contract type in the task:

{
  "name": "nuxeo-task879",
  "layout": [
    {
      "metadata": [
        {
          "label": "Type of contract",
          "field": "type",
          "type": "directory",
          "properties": {
            "multivalued": false,
            "required": true,
            "placeholder": "Select the contract type...",
            "directoryName": "type",
            "type":"select"
          }
        }
      ]
    }
  ]
}

Save and deploy your package.

Test Your Configuration

Open your Nuxeo Mobile application and set your local URL.
It can be found on IP tools according to your OS, ex: http://172.16.32.75:8080.

it will work only on Android as iOS will block any http connection except localhost. For iOS, there are third party tools such as https://serveo.net/ and https://ngrok.com/ to easily have a https server.

On your Nuxeo Platform instance:

  1. Create a document type Contract
  2. Start a workflow contractValidation
  3. Assign the review to Administrator.

Once it's done, on your mobile application:

  1. Log in as Administrator
    On the first page you can see your pending tasks.
  2. Go to your task on the contract document and click on the overflow button > Start Process.

A task is assigned to the Administrator. When opening this task, it should look like this:

HOW_TO_workflows_task_result
HOW_TO_workflows_task_result

Task Layout Example

Here is an example of an exhaustive task layout.

{
   "name": "nuxeo-task879",
   "layout": [
       {
           "metadata": [
               {
                   "label": "Text field",
                   "field": "contract_name",
                   "type": "text"
               },
               {
                   "label": "Text area",
                   "field": "contract_comment",
                   "type": "textarea"
               },
               {
                   "label": "Integer input",
                   "field": "contract_priority",
                   "type": "integer"
               },
               {
                   "label": "Double input",
                   "field": "contract_rating",
                   "type": "double"
               },
               {
                   "label": "Boolean (switch)",
                   "field": "contract_confidential",
                   "type": "boolean"
               },
               {
                   "label": "Html text",
                   "field": "type",
                   "type": "htmltext"
               },
               {
                   "label": "Date",
                   "field": "contract_expiration_date",
                   "type": "date",
                   "properties":{
                       "required":true
                   }
               },
               {
                   "label": "User picker",
                   "field": "contract_reviewers",
                   "type": "user",
                   "properties": {
                       "multivalued": true,
                       "required": true,
                       "placeholder": "Select reviewers",
                       "type": "suggest"
                   }
               },
               {
                   "label": "Group picker",
                   "field": "contract_reviewGroups",
                   "type": "group",
                   "properties": {
                       "multivalued": true,
                       "required": true,
                       "placeholder": "Select reviewers groups",
                       "type": "suggest"
                   }
               },
               {
                   "label": "User/Group picker",
                   "field": "contract_reviewUserGroups",
                   "type": "usergroup",
                   "properties": {
                       "multivalued": true,
                       "required": true,
                       "placeholder": "Select reviewers groups",
                       "type": "suggest"
                   }
               },
               {
                   "label": "Directory with selectable vocabulary",
                   "field": "contract_type",
                   "type": "directory",
                   "properties": {
                       "multivalued": false,
                       "required": true,
                       "placeholder": "Select the contract type...",
                       "directoryName": "type",
                       "type": "select"
                   }
               },
               {
                   "label": "Directory with search & suggestion",
                   "field": "contract_type",
                   "type": "directory",
                   "properties": {
                       "multivalued": false,
                       "type": "suggest",
                       "suggestionPlaceholder": "this is a suggestion",
                       "required": true,
                       "placeholder": "Select the contract type...",
                       "directoryName": "type"
                   }
               },
               {
                   "label": "Document suggestion (add 1 or more)",
                   "field": "contract_type",
                   "type": "directory",
                   "properties": {
                       "multivalued": true,
                       "type": "suggestAll",
                       "suggestionPlaceholder": "Add 1 or more documents",
                       "required": true,
                       "placeholder": "Add a document to the task"
                   }
               }
           ]
       }
   ]
}

For development purposes, you can directly edit the JSON files on your Nuxeo Server. The task layout is retrieved each time you view a document.


Related Documentation
 
15 days ago manonlumeau first draft
15 days ago manonlumeau update with screenshots and Antoine's feedbacks
15 days ago manonlumeau formatting
15 days ago manonlumeau Review content and format
History: Created by manonlumeau

We'd love to hear your thoughts!

All fields required