This documentation is for WSO2 Enterprise Integrator version 6.5.0 . View documentation for the latest release in the 6.x.x family and the latest release in the 7.x.x family.

All docs This doc
Skip to end of metadata
Go to start of metadata

HumanTask-Explorer: jaggery based web-app provides user interface for end users to integrate them to service oriented applications. This is a lightweight web application that can be customized and deployed in a web server.

Basic Structure of UI construction

Each page of the web-app is constructed by set of jaggery scripts as shown in the below diagram.


Controller is the main jaggery script which combines jaggery scripts which generating sub parts of each web page. <page>Controller.jag is located in /humantask-explorer/controller/ directory.  When the server receives a request, it is mapped to particular controller, by url mappings as follows:



Constructed html page



Login page



User Inbox



Inbox task



Task pool



Advance search for all tasks



General Task














Controllers specified in blue text in the above table are special purpose controllers that do not provide an html. Instead they perform actions on behalf of the user as follows:

  • authenticator - Perform authentication of the user by logging-in to the server through AuthenticationAdmin service

  • actionController - Performs actions (such as claim task, start task, add comment, assign task, …. etc.) related to tasks. It handles ajax requests from the browser side for tasks state transitions, commenting, etc..

  • updateController - Performs providing updated content of comments, history and attachments for ajax requests made from browser side.

  • logout - Performs logging out from the back-end server on behalf of the user.


Model scripts retrieve data to be displayed to the user. It make AdminServices (in this case retrieve data from HumanTaskClientAPIAdmin service) requests to the back-end and retrieve and prepare data to render data in the html page.




common.jag is included to all the controllers. It retrieves and update data common to all the pages and all actions performed by back end implementation of humantask-explorer.

Currently it performs retrieving or/and constructing back-end EI Business Process url


Create loggin failure message if previous logging failed


Retrieve all the tasks assigned to the logged-in user


Retrieve task details of specified task by task id


Retrieve task list which is claimable to logged-in user


Retrieve task list according to the parameters passed to the advance search by the user


Header jaggery script (located in humantask-explorer/template/partials/) construct html header which is common to all the web pages.


Contains modals used in the webpage.


Provide user interface to add comment to a task


Provide user interface to assign task to assignable user


<page>View.jag scripts (located in humantask-explorer/template/) contains html body rendering the information retrieved in associate Model.

File Structure

The file structure of the ws-humantask-explorer UI is shown below:


File / Directory



Jaggery configuration file


html files to display error http 404. Set in jaggery.conf


html files to display error http 500. Set in jaggery.conf


Directory to store any resources (such as images) used in the webapp


Controller jaggery script which append multiple jaggery scripts to form html response to requests


Directory to contain css files

By default bootstrap-theme.min.css, bootstrap.min.css included. for customization style.css is also included custom css


Directory to include fonts and bootstrap related resources


Directory to include javascript .js files

By default it contain bootstrap.min.js, jquery.min.js, actions.js (contains set of ajax calls for UI front-end) and WSHTRequest.js (jaggery module to perform HumanTaskClientAPIAdmin core operations for UI back-end).


Directory containing model jaggery scripts


template directory contains jaggery scripts that construct html main body content

template directory contains two sub directories:

modals - contains jaggery scripts containing implementation of modals. Include custom modals in this directory

partials - contains scripts to implement html header, navigation and footer. Include partial html content implementations other than major body content

WSHTRequest module

WSHTRequest.js can be used as a jaggery module that provide support to make HumanTaskClientAPIAdmin core requests from the UI back-end to EI Business Process when customising the ws-humantask-explorer UI.

Following operations are supported by the WSHTRequest module:


Initialize HT server information

url - back end url

sessionCookie - session cookie of the session


Function to make WS-HT simplequery request in HumanTaskClientAPIAdmin with basic limited parameters

provide only status, pageSize, pageNumber, queryCategory, queryOrder, queryOrderBy parameter suport


Function to make WS-HT simplequery request Advance parameters.

Provide support for all simpleQuery parameters in HumanTaskClientAPIAdmin

status - task status

pageSize - response task list batch size

pageNumber - task list batch number

queryCategory - task category


queryOrder - how response needed to get ordered


queryOrderBy - response needed to order by


createdDate - Task created date

taskName - Task name


Function to make WS-HT loadTask request

id - Task id


Function to make WS-HT getComments request

id - Task id


Function to claim task to logged-in user

id - Task id


Function to make start tasks service request

id - Task id


Function to make stop tasks service request

id - Task id


Function to make release tasks service request

id - Task id


Function to make suspend tasks service request

id - Task id


Function to make resume suspended tasks service request

id - Task id


Function to make fail tasks service request

id - Task id


Function to make add comment service request

id - Task id

text - The comment should be wrapped by '<![CDATA[' and ']]>'


Function to make delete comment service request

id - Task id

commentId - Comment id


Skip an active task

id - id of the task to skip

WSHTRequest usage

Before making service requests the module, user must be initialized by initHTServerInfo().

Adding internationalization and localization

The following steps show an example of how to localize the Human Task Explorer.

Changing the Web Browser settings

  1. Set the language of your Web Browser to the preferred one. For example, in Google Chrome, click Settings -> Advanced -> Languages menu.
    Google Chrome Settings
  2. Click Language, and then click Add Language.
    add language
  3. Search and select Bulgarian, and click ADD.

    You view the Bulgarian language added to the list of lanuguages. 
  4. If you have the locale_en.json file also in the <EI_HOME>/wso2/business-process/repository/deployment/server/jaggeryapps/humantask-explorer/config/locales directory, then click Bulgarian and then click Move to the top to give the highest priority to the Bulgarian language. 
  5. Set the encoding type of your Web Browser to UTF-8.

    You might not want to do this based on your Web Browser and its version. For example, the Encoding menu has been removed from Google Chrome version 55 and above, and Chrome will do auto-encoding detection now.

Localizing strings in the resource file

The resource files in the  <EI_HOME>/wso2/business-process/repository/deployment/server/jaggeryapps/humantask-explorer/config/locales directory store the localization strings defined in .jag files according to the Web Browser locale (e.g., locale_en.json).

To localize the Human Task Explorer, you need to localize the strings defined in these resource files as follows.

  1. Create a new file by the name locale_{lolcaleCode}.json inside the <EI_HOME>/wso2/business-process/repository/deployment/server/jaggeryapps/humantask-explorer/config/locales directory. 

    For example, if the language you set as the highest priority in the Browser is Bulgarian, the locale code is 'bg' and the file name should be locale_bg.json.

  2. Create the key-value pairs in the <EI_HOME>/wso2/business-process/repository/deployment/server/jaggeryapps/humantask-explorer/config/locales/ locale_bg.json file, and change the values of the key-value pairs to match the language.

    You can copy the required key-value pairs from the <EI_HOME>/wso2/business-process/repository/deployment/server/jaggeryapps/humantask-explorer/config/locales/ locale_en.json file, which is the defualt resource file for Jaggery, and change the values to match the Bulgarian language accordingly.

    For example, a section of a sample locale_bg.json file is shown below.

    "my.tasks.title":"моите задачи",
    "claimable.tasks":"изпълними задачи",
    "logout":"излез от профила си",
    "id":"документ за самоличност",
    "name":"Име на задачата",
    "failed":"Се провали",
  3. Start the Business Process profile of WSO2 EI and open the Human Task Explorer web application in your Browser (https://<HOST-NAME>:9445/humantask-explorer), and log in to it. You view the UI of the Human Task Explorer is now changed to Bulgarian.
  • No labels