Introduction to Camunda’s BPMN IO:
BPMN stands
for Business Process Model
and Notation (BPMN 2.0) was developed as a graphical notation to represent
complex processes. It is maintained by the non-profit The Object Management
Group (OMG) and employed by numerous organizations globally. It provides tools
to create, view, and edit BPMN diagrams in an intuitive and developer-friendly
way.
Fig: BPMN Pizza Example
In the above figure followings are symbols/images represent specific information
Events
Describes a trigger that either
starts, modifies, or completes a process.
Activities
Represents an action (a task) that
is taken, whether by technology or humans.
Gateways
These describe a decision point in
a workflow, such as parallel (AND),
exclusive (XOR), and Inclusive
(OR) gateways.
Flows
Connecting objects like
associations, sequences, and message flows show
how elements relate.
Form Schema Response Example:
{
"form": {
"components": [
{
"components": [
{
"text": "Let's Begin",
"label": "Text view",
"type": "text",
"layout": {
"row": "Row_0d6st64",
"columns": null
},
"id": "Field_1n3wsf7",
"properties": {}
},
{
"label": "Enter your mobile number to proceed further",
"type": "textfield",
"layout": {
"row": "Row_1vwm9hk",
"columns": null
},
"id": "Field_1gj02r4",
"key": "MobileNo",
"validate": {
"required": true,
"minLength": "10",
"maxLength": 10,
"pattern": "^[6-9]\\d{9}$"
},
"readonly": false,
"disabled": false,
"properties": {
"allowOnly": "number",
"name": "mobile number"
},
"defaultValue": "Enter 10 Digit Mobile Number"
},
{
"label": "Term & Condition",
"type": "checkbox",
"layout": {
"row": "Row_1j16l0a",
"columns": null
},
"id": "Field_1vau4p2",
"key": "TermAndCondition",
"description": "I agree to the Terms and Conditions.",
"defaultValue": false,
"validate": {
"required": true
}
},
{
"action": "submit",
"label": "Continue",
"type": "button",
"layout": {
"row": "Row_1vcx3j9",
"columns": null
},
"id": "Field_0bx6vxk",
"properties": {}
}
],
"showOutline": true,
"label": "",
"type": "group",
"layout": {
"row": "Row_1kmgus1",
"columns": null
},
"id": "Field_0pz8izh",
"path": "UserRegistration"
}
],
"type": "default",
"id": "Enter_Contact",
"executionPlatform": "Camunda Cloud",
"executionPlatformVersion": "8.5.0",
"exporter": {
"name": "Camunda Modeler",
"version": "5.28.0"
},
"schemaVersion": 16
},
"var": {
"userTaskAssigneeRoles": ["ROLE_ADMIN"],
"userTaskAssignee": "iserveu",
"loanType": "Personal Loan",
"tenantId": "isu_internal",
"total_forms": 11,
"progress": "0",
"productFlowName": true,
"processStartDate": "2025-01-02",
"applicationSource": "android"
}
}
text: This represents the content or label of the form element.
label: Indicates the type of form element or how it should be interpreted.
type: Defines the type of the form element.
layout: Describes the layout configuration for the form element.
id: A unique identifier for the form element, used to reference it programmatically.
properties: A placeholder for additional metadata or configurations specific to the form element.
A typical integration allows you to:
- Start BPMN processes from Angular
- Fetch and complete user tasks
- Display task lists or forms dynamically
- Monitor process status
Camunda APIs to be consumed in Angular:
startProcessInstance:
Request Url: <baseurl>/startProcessInstance
Request Method: POST
Authorization: <--Auth Token-->
Request Body: {
"applicationSource": <--Application Source-->,
"bpmnId": <--BPMN Id-->
}
Response:
{
"status": "01",
"message": "Next task found to be completed",
"items": [
{
"processDefinitionKey": "2251799824638691",
"processInstanceKey": "2251799827343608"
}
]
}
getFormSchema:
Request Url: <baseurl>/getFormSchema/2251799827343608
Request Method: POST
Authorization: <--Auth Token-->
Request Body: {
"processDefinitionKey": “2251799824638691”
}
Response:
{
"form": {
"components": [
{
"components": [
{
"text": "Let's Begin",
"label": "Text view",
"type": "text",
"layout": {
"row": "Row_0d6st64",
"columns": null
},
"id": "Field_1n3wsf7",
"properties": {}
},
{
"label": "Enter your mobile number to proceed further",
"type": "textfield",
"layout": {
"row": "Row_1vwm9hk",
"columns": null
},
"id": "Field_1gj02r4",
"key": "MobileNo",
"validate": {
"required": true,
"minLength": "10",
"maxLength": 10,
"pattern": "^[6-9]\\d{9}$"
},
"readonly": false,
"disabled": false,
"properties": {
"allowOnly": "number",
"name": "mobile number"
},
"defaultValue": "Enter 10 Digit Mobile Number"
},
{
"label": "Term & Condition",
"type": "checkbox",
"layout": {
"row": "Row_1j16l0a",
"columns": null
},
"id": "Field_1vau4p2",
"key": "TermAndCondition",
"description": "I agree to the Terms and Conditions.",
"defaultValue": false,
"validate": {
"required": true
}
},
{
"action": "submit",
"label": "Continue",
"type": "button",
"layout": {
"row": "Row_1vcx3j9",
"columns": null
},
"id": "Field_0bx6vxk",
"properties": {}
}
],
"showOutline": true,
"label": "",
"type": "group",
"layout": {
"row": "Row_1kmgus1",
"columns": null
},
"id": "Field_0pz8izh",
"path": "UserRegistration"
}
],
"type": "default",
"id": "Enter_Contact",
"executionPlatform": "Camunda Cloud",
"executionPlatformVersion": "8.5.0",
"exporter": {
"name": "Camunda Modeler",
"version": "5.28.0"
},
"schemaVersion": 16
},
"var": {
"userTaskAssigneeRoles": [
"ROLE_ADMIN"
],
"userTaskAssignee": "iserveu",
"loanType": "Personal Loan",
"tenantId": "isu_internal",
"total_forms": 11,
"progress": "0",
"productFlowName": true,
"processStartDate": "2025-01-02",
"applicationSource": "android"
}
}
completeTask:
Request Url: <baseurl>/completeTask/2251799827723088
Request Method: POST
Authorization: <--Auth Token-->
Request Body: {
"UserRegistration": {
"MobileNo": "7008859402",
"TermAndCondition": true
}
}
Response:
[
{
"processDefinitionKey": "2251799827707495",
"processInstanceKey": "2251799827723088"
}
]
Handling the schema response in angular:
//installing bpmn-io using npm
@bpmn-io/form-js@1.12.0
In component.html file:
<div id="container">
<div id="form"></div>
</div>
In component.ts file:
//importing required modules
import { Form } from '@bpmn-io/form-js';
//initializing variables
form: Form;
//creating a new Form Instance
this.form = new Form({
container: document.querySelector('#form'),
});
//starting camunda process and getting form schemas from apis
this.service
.postAPI(<start process api url>, {
applicationSource: <application source name>,
bpmnId: <bpmn id>,
//Here BPMN ID is static or get it by calling fetchfeature api
}).subscribe({
next: (res: any) => {
this.service
.postAPI(
<get form schema api url> + <process instance key received from start process api>,
{
processDefinitionKey:<process definition key received from start process api>,
}).subscribe(
async (res: any) => {
await this.form.importSchema(res.form, res.var);
}
})
}})
//completing a task from angular and fetching next form
this.service.postAPI(
<complete task api url> + <process instance key received from start process api>, data
)
.subscribe((res: any) => {
//call the get form schema api again to fetch the next or previous schema
})
Note: the data object which is passed in the 2nd parameter in the complete task API contains a key called go_next: true/false.When set to true it will be used for getting the next form schema and vice versa.
Dependencies to be installed:
@bpmn-io/form-js - 1.12.0
Comments
Post a Comment