This documentation is for WSO2 Business Process Server version 3.5.0. View documentation for the latest release.
||
Skip to end of metadata
Go to start of metadata

Introduction to WS-HumanTask-Explorer

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,

User Guide For Default UI

If WSO2 Business process server is deployed with port offset 0, WS-HumanTask-Explorer can be accessed by https://<hostIP>:9443/humantask-explorer/login url.

Login

Screen Shot 2015-09-23 at 11.45.18 AM.png

After login with valid username and password, user will be directed to the task inbox.

Inbox

Tasks assigned to logged-in user are listed in the MY TASKS tab.

Screen Shot 2015-09-23 at 11.51.16 AM.png



Click on a task list entry, the user will be directed to the task view. Tasks can be filtered based on status by clicking on the particular status in left sidebar.

Task View

Task view display the detailed description of the task. The content of the UI depends on the relationship of logged-in user and the viewed task.

Screen Shot 2015-09-23 at 11.59.35 AM.png

 

Task Abstract

List down abstract details (subject, description)

Task Operations (1)

Provide support to change state of the task (only provided to task owner)


Start : Start progress of the task

Stop : Stop progress

Release : Release assigned task (release operation will update state of the task to READY, which allowing other users to claim it to themselves)

Suspend : suspend task.

Resume : resume suspended task

Fail : fail the task

Assign : assign task to another user.

Skip: skip a task from further action


Note that allowed operations differ depending on the state of the task and user permissions.

Additional Task information (2)

Additional information related to the task. This section consists of three tabs:

  1. Comments : list down comments added by users (users can add comments to tasks, which are viewable to them)

  2. History : list down history details of state changes of the task

  3. Attachments : list down attachments related to the task including downloading (users can add/download attachments to tasks, which are viewable to them) and uploading attachments.

Summary (3)

Summary of task information

 

Claimable Tasks

All the tasks which is claimable to the logged-in user, are listed down in the claimable tasks tab.

By clicking on each entry, the user can view the task and claim it in the task view.

Screen Shot 2015-09-23 at 12.32.01 PM.png

When viewing a claimable task, which is in READY state(not assigned to a particular user), the task view is similar to above. The viewer can assign it to himself by clicking the claim button, located top left corner among task operations.

Apart from the pages explained above, Notification tab displays the notifications to the user. Search tab can be used to search tasks. Search has options to search by task status and category. Results can be ordered based on the task name, created date, updated date or priority.

Basic Structure of UI construction

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



Controllers


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:

 

URL

Mapping

Constructed html page

/login/*

/controller/loginController.jag

Login page

/inbox/*

/controller/inboxController.jag

User Inbox

/inboxtask/*

/controller/inboxTaskController.jag

Inbox task

/taskpool/*

/controller/taskPoolController.jag

Task pool

/alltasks/*

/controller/allTasksController.jag

Advance search for all tasks

/taskview/*

/controller/generalTaskController.jag

General Task

/auth/*

/controller/authenticator.jag

-

/action/*

/controller/actionController.jag

-

/update/*

/controller/updateController.jag

-

/logout/*

/controller/logout.jag

-

 

NOTE :

Controllers in blue colour in above table are special purpose controllers which does not provide html page. 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.

Models

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.



 

Model

Purpose

common

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 BPS url

loginModel

Create loggin failure message if previous logging failed

inboxModel

Retrieve all the tasks assigned to the logged-in user

taskModel

Retrieve task details of specified task by task id

taskPoolModel

Retrieve task list which is claimable to logged-in user

allTaskModel

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

 

Header

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

Modals

Contains modals used in the webpage.

 

addCommentModal

Provide user interface to add comment to a task

assignTaskModal

Provide user interface to assign task to assignable user

 

Views

<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:

filestructure.png



 

File / Directory

Usage

jaggery.conf

Jaggery configuration file

error404.html

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

error500.html

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

assets

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

controller

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

css

Directory to contain css files

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

fonts

Directory to include fonts and bootstrap related resources

js

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).

model

Directory containing model jaggery scripts

template

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 jaggery module which provide support to make HumanTaskClientAPIAdmin core requests from the UI back-end to BPS when customizing the ws-humantask-explorer UI.


Following operations are supported by the WSHTRequest module:

 

 

initHTServerInfo

Initialize HT server information

url - back end url

sessionCookie - session cookie of the session

simpleQueryBasic

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

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

simpleQueryAdvance

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

[ASSIGNED_TO_ME | ASSIGNABLE | CLAIMABLE | ALL_TASKS | NOTIFICATIONS]

queryOrder - how response needed to get ordered

[ASCENDING | DESCENDING]

queryOrderBy - response needed to order by

[TASK_NAME | CREATED_DATE | UPDATED_DATE | PRIORITY | STATUS]

createdDate - Task created date

taskName - Task name

loadTask

Function to make WS-HT loadTask request

id - Task id

getComments

Function to make WS-HT getComments request

id - Task id

claimTask

Function to claim task to logged-in user

id - Task id

startTask

Function to make start tasks service request

id - Task id

stopTask

Function to make stop tasks service request

id - Task id

releaseTask

Function to make release tasks service request

id - Task id

suspendTask

Function to make suspend tasks service request

id - Task id

resumeTask

Function to make resume suspended tasks service request

id - Task id

failTask

Function to make fail tasks service request

id - Task id

addComment

Function to make add comment service request

id - Task id

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

deleteComment

Function to make delete comment service request

id - Task id

commentId - Comment id

skipTask

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().

example :  

var log = new Log()
//BPS server url
var BPSUrl = “https://localhost:9443”;
//logged-in session cookie
var cookie = “JSESSIONID=89C82FC824F66ECD645974DFC4951A19”;
//retrieve module
var htRequest = require ('/js/WSHTRequest.js');
//initialize WSHTRequest
htRequest.initHTServerInfo(BPSUrl, cookie);
var result = htRequest.addComment(taskId, '<![CDATA' +requestPayload.text +']>');
log.info(‘response : ’ +result);

Deploying in a external server

HumanTask-Explorer can be deployed in an external server other than the BPS, such as in WSO2-AS. But then the user need to configure the BPS server location. BPS server location can be configured in config.json file located in <humanTask-Explorer root>/config/config.json.

If the server is in tenant mode, tenant domain should be configured here.

  • No labels