Page Comparison

...

The file structure of the BPMN Explorer is as follows:

folder structure

File/Directory	Usage
`assets/`	Contains resource files that are used for general purposes such as form generation and encoding.
`config/`	Contains files to support i18n of the web app.
`controller/`	Contains the controllers of the web app.
css`/`	Contains CSS files of the web app. It includes the bootstrap-theme.min.css and bootstrap.min.css files by default. Also, includes the style.css file for customizations.
`error404.html`	The HTML file that is displayed when an HTTP 404 error occurs.
`error500.html`	The HTML file that is displayed when an HTTP 500 error occurs.
`fonts/`	Contains fonts and bootstrap related resources.
`images/`	Stores resources (such as images) of the web app.
`js/`	Contains JavaScript library files that are used for various purposes.
`model/`	Contains all the models of the web app.
`template/`	Contains Jaggery scripts that construct the HTML main body content. Also, this contains a subdirectory named `partials/`, which holds common HTML content such as header, footer, pagination and navigation.
`jaggery.conf`	Includes all Jaggery configurations.

Architecture components

The architecture of the BPMN Explorer consists of the following main Model View Controller (MVC) components.

Anchor
models
models
Models

Following model Jaggery scripts located in the <EI_HOME>wso2HOME>/wso2/business-process/repository/deployemnt/server/jaggeryapps//bpmn-explorer/controller/ directory retrieve data from the BPMN REST API to display. It sends AdminServices requests to the back-end and retrieves data to render data in the HTML page.

Model	Purpose
`common.jag`	Relates to all the controllers. It retrieves and updates data that are common to all the pages and all the actions performed by the back-end implementation of the BPMN Explorer.
`loginModel.jag`	Creates a login failure message if previous logging activity failed.
`myTasksModel.jag`	Retrieves all the tasks assigned to the logged-in user.
`taskModel.jag`	Retrieves task details of a specific task using the task ID.
`claimModel.jag`	Generates the UI form for viewing claimable tasks.
`claimableTaskModel.jag`	Retrieves the list of tasks that the logged-in user can claim.
`completedTaskModel.jag`	Retrieves information (including attachments) of a selected completed task instance.
`historicTasksModel.jag`	Lists the completed tasks list in the Completed Tasks tab.
`processModel.jag`	Retrieves all deployed BPMN processes.
`reportModel.jag`	Retrieves necessary information(i.e., tasks list, users list etc.) to generate reports.
`searchModel.jag`	Retrieves instances based on search queries.
`taskModel.jag`	Retrieves information on deployed BPMN tasks (e.g., attachments, meta data etc.)
`statsModel.jag`	Generates statistical charts for reports.

Views

View Jaggery files with respect to each page of the web app are located in the <EI_HOME>wso2HOME>/wso2/business-process/repository/deployemnt/server/jaggeryapps//bpmn-explorer/template/ directory. They contain information on rendering the HTML body of the information retrieved in the associated Model.

Controllers

Controller files are used to connect the Jaggery scripts that generate subparts of each page. Controller Jaggery files with respect to each page of the web app are located in the <EI_HOME>wso2HOME>/wso2/business-process/repository/deployemnt/server/jaggeryapps//bpmn-explorer/controller/ directory. When the server receives a request, it maps it to a particular controller via URL mappings as follows.

Info

Following controllers are special purpose controllers that do not provide HTML pages. Instead, they perform actions on behalf of the user.

taskController - performs control actions related to tasks.
authenticator - performs authentication of the user by logging in to the server through the AuthenticationAdmin service.
logout - performs logging out from the back-end server on behalf of the user.
communication - performs control actions related to communication among components.
startProcessController - performs control actions related to the starting process of tasks.
statsController - performs control actions related to statistics.

URL	Mapping	Corresponding HTML Page
`/login/*`	`loginController.jag`	Login page
`/myTasks/*`	`myTasksController.jag`	My tasks
`/task/*`	`taskController.jag`	-
`/auth/*`	`authenticator.jag`	-
`/logout/*`	`logout.jag`	-
`/send/*`	`communication.jag`	-
`/process/*`	`processController.jag`	Processes
`/claimableTask/*`	`claimableTaskController.jag`	Claim tasks
`/claimTask/*`	`claimTaskController.jag`	Claimable task view
`/startProcess/*`	`startProcessController.jag`	-
`/historicTasks/*`	`historicTasksController.jag`	Completed tasks
`/stats/*`	`statsController.jag`	-
`/completedTask/*`	`completedTaskController.jag`	Completed task view
`/search/*`	`searchController.jag`	Search
`/reports/*`	`reportController.jag`	Reports

Loading the process diagram

The <EI_HOME>wso2HOME>/wso2/business-process/repository/deployemnt/server/jaggeryapps//bpmn-explorer/assets/ wsRequest.js file loads the BPMN process diagram for the corresponding process instance in the BPMN Explorer. This avoids the need to authenticate again when viewing the process diagram. It contains following methods.

Method	Purpose
`requestBPS`	Creates a SOAP request to the backend server.
`getBPMNProcessDiagram`	Creates the SOAP payload to retrieve the process diagram.

Deploying in an external server

You can deploy the BPMN Explorer in an external server other than WSO2 EI. Herein, you need to configure the WSO2 EI server location in the config.json file located in the <EI_HOME>/wso2/business-process/repository/deployment/server/jaggeryapps/bpmn-explorer/config/config.json file. Also, you need to configure the tenant domain in this file if you use the tenant mode of the server.

Adding internationalization and localization

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

Changing the Web Browser settings

Set the language of your Web Browser to the preferred one. For example, in Google Chrome, click Settings -> Advanced -> Languages menu.
Image Added
Click Language, and then click Add Language.
Image Added
Search and select Bulgarian, and click ADD.
Image Added
You view the Bulgarian language added to the list of lanuguages.
If you have the locale_en.json file also in the <EI_HOME>/wso2/business-process/repository/deployment/server/jaggeryapps/bpmn-explorer/config/locales directory, then click Bulgarian and then click Move to the top to give the highest priority to the Bulgarian language.
Image Added

Set the encoding type of your Web Browser to UTF-8.

Tip
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 files

The resource files in the <EI_HOME>/wso2/business-process/repository/deployment/server/jaggeryapps/bpmn-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 BPMN Explorer, you need to localize the strings defined in these resource files as follows.

Create a new file by the name locale_{lolcaleCode}.json inside the <EI_HOME>/wso2/business-process/repository/deployment/server/jaggeryapps/bpmn-explorer/config/locales directory.
Tip
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.

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

Tip
You can copy the required key-value pairs from the `<EI_HOME>/wso2/business-process/repository/deployment/server/jaggeryapps/bpmn-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.

Code Block

language	text
title	locale_bg.json

{
...
"dashboard":"Табло",
"my.tasks.title":"Моите задачи",
"tasks":"Задачи",
"welcome.msg":"Добре дошли в статистическия изглед на BPMN Explorer. Моля, инсталирайте процесите от администраторския изглед и създайте задачи, за да генерирате статистически данни.",
"processes":"процеси",
"monitoring":"мониторинг",
"reports":"доклади",
"search":"Търсене",
 "logout":"излез от профила си",
...
}

Start the Business Process profile of WSO2 EI and open the BPMN Explorer web application in your Browser (https://<HOST-NAME>:9445/bpmn-explorer), and log in to it. You view the UI of the BPMN Explorer is now changed to Bulgarian.
Image Added

Versions Compared

Old Version 14

New Version Current

Key

Architecture components

Anchor
models
models
Models

Views

Controllers

Loading the process diagram

Deploying in an external server

Adding internationalization and localization

Changing the Web Browser settings

Localizing strings in the resource files

Page Comparison

Versions Compared

Old Version 14

New Version Current

Key

Architecture components

AnchormodelsmodelsModels

Views

Controllers

Loading the process diagram

Deploying in an external server

Adding internationalization and localization

Changing the Web Browser settings

Localizing strings in the resource files

Anchor
models
models
Models