@brixx/process-script
v1.2.1
Published
A free JavaScript brixx process script library for Web and Node.js Applications with full integration into HTML without coding.
Downloads
264
Maintainers
brixxReadme
Brixx-Process-Script
Process Driven Development for everyone
Brixx-Process-Script is a free JavaScript library to create process applications for the Brixx-Process-Engine and fill in a gap to enterprise process orchestration systems such as Camunda or X4 BPMS as a lean workflow management system for automation and digitization of business processes and industrial processes. For processes in web applications, to control multiple web applications up to IoT control. With minimal development, integration and costs, Brixx Process Engine can serve as the basis for applications or be integrated into existing applications as an extension for sub-processes. With our Brixx-Process-Script, the programming can be reduced to a minimum. Fast integration into any HTML document is possible, especially with the integrated Brixx-Script (smart web components) as Brixx HTML elements or as Brixx script components in JavaScript applications and frameworks and also support JavaScript environments such as Node.js® (cross-platform JavaScript runtime environment).
Model processes and workflows
With our workflow management system, all types of processes and workflows can be mapped with the Brixx BPMN-Editor for process modeling with Business Process Model and Notation (BPMN) and made available in the Brixx Process Engine with one click.
Installation
You can install the package with npm.
npm i @brixx/process-scriptImport
You can import the package as module.
import { BrixxProcessDefinition } from '@bprocess-script'Usage
Web
HTML based
Brixx web component in the Brixx script component file brixx-login-process.js
// Get search param
const pid = BrixxProcessDefinition.getSearchParam("pid");
// Message task action callback function
const addMessageElement = (data, message = `${data.mid} is running.`) => {
const { tid } = data;
const element = (
<div>
<h2>{message}</h2>
<p />
<input type="button" id={"btn_" + tid} value={"Next"} />
</div>
);
new Brixx().render({ element });
document.getElementById("btn_" + tid).addEventListener("click", () => {
// Set process done
BrixxProcessDefinition.process.done({ tid });
});
};
// Login task action callback function
const addLoginElement = (data) => {
const { tid } = data;
const element = (
<div>
<h2>Authentication</h2>
<p>
User: <input type="text" id={"user"} />
</p>
<p>
Password: <input type="text" id={"password"} />
</p>
<input type="button" id={"btn_login"} value={"Login"} />
</div>
);
new Brixx().render({ element });
document.getElementById("btn_login").addEventListener("click", () => {
// Set next process with store data
const store = { user: document.getElementById("user").value, password: document.getElementById("password").value };
BrixxProcessDefinition.process.task.next({ tid, store });
});
};
// Brixx process definition
Brixx.element = (
<ProcessDefinition mid="Process_nehz6cn" pid={pid}>
<Task mid="Task_0r94slz" action={(data) => addLoginElement(data)}>
<Gateway mid="Gateway_0r8twz8" action={(data) => BrixxProcessDefinition.process.done({ gid: data.gid }) } >
<Task mid="Task_1m8u5ed" action={(data) => addMessageElement( data, "You have entered the user area.") } />
<Task mid="Task_0zs24yh" action={(data) => addMessageElement( data, "You have entered the public area.") } />
</Gateway>
</Task>
</ProcessDefinition>
);
// Register a Brixx HTML-Element <brixx-login-process>
Brixx.registerElement({ name: "login-process" });Brixx HTML element in the HTML file index.html
<!DOCTYPE html>
<html>
<head>
<!-- Load Brixx-Process-Script standalone for development-->
<script src="https://brixx.it/@brixx/standalone/brixx-process.min.js"></script>
<!-- Include the Brixx script component files for development -->
<script type="text/babel" src="./brixx-login-process.js"data-type="module" data-presets="brixx"></script>
</head>
<body>
<!-- Add the Brixx HTML element -->
<brixx-login-process></brixx-login-process>
</body>
</html>JavaScript based
Brixx JavaScript element in the HTML file index.html
<!DOCTYPE html>
<html>
<head>
<!-- Load Brixx-Process-Script standalone for development-->
<script src="https://brixx.it/@brixx/standalone/brixx-process.min.js"></script>
</head>
<body>
<h1>Brixx Process Script Sample</h1>
<script type="text/babel" data-presets="brixx">
// Get search param
const pid = BrixxProcessDefinition.getSearchParam('pid')
// Message task action callback function
const addMessageElement = (data, message = `${data.mid} is running.`) => {
const { tid } = data;
const element = (
<div>
<h2>{message}</h2>
<p />
<input type="button" id={"btn_" + tid} value={"Next"} />
</div>
);
new Brixx().render({ element });
document.getElementById("btn_" + tid).addEventListener("click", () => {
// Set process done
BrixxProcessDefinition.process.done({ tid });
});
};
// Login task action callback function
const addLoginElement = (data) => {
const { tid } = data;
const element = (
<div>
<h2>Authentication</h2>
<p>
User: <input type="text" id={"user"} />
</p>
<p>
Password: <input type="text" id={"password"} />
</p>
<input type="button" id={"btn_login"} value={"Login"} />
</div>
);
new Brixx().render({ element });
document.getElementById("btn_login").addEventListener("click", () => {
// Set next process with store data
const store = { user: document.getElementById("user").value, password: document.getElementById("password").value };
BrixxProcessDefinition.process.task.next({ tid, store });
});
};
// Set process definition iterator
BrixxProcessDefinition.process.iterator = (data) => {
switch (data.mid) {
case 'Gateway_0r8twz8':
BrixxProcessDefinition.process.done({ gid: data.gid })
break
case 'Task_0r94slz':
addLoginElement(data)
break
case 'Task_1m8u5ed':
addMessageElement(data, 'You have entered the user area.')
break
case 'Task_0zs24yh':
addMessageElement(data)
break
}
}
// Start process definition
BrixxProcessDefinition.process.start({ pid })
</script>
</body>
</html>Node.js (preview)
Install the Brixx-Process-Script package e.g. in a Visual Studio Code terminal window (see documentation below).
> npm i @brixx/process-scriptNode.js app in the JavaScript file ./brixx-login-process.js
// Imports
const BrixxProcessDefinition = require("@brixx/process-script/node").default;
// Get command-line argument
const pid = process.argv[2]
// Set process definition iterator
BrixxProcessDefinition.process.iterator = (data) => {
switch (data.mid) {
case 'Gateway_0r8twz8':
// Your code ...
// BrixxProcessDefinition.process.done({ gid: data.gid })
break
case 'Task_0r94slz':
// Your code ...
// BrixxProcessDefinition.process.done({ tid: data.tid })
break
case 'Task_1m8u5ed':
// Your code ...
// BrixxProcessDefinition.process.done({ tid: data.tid })
break
case 'Task_0zs24yh':
// Your code ...
// BrixxProcessDefinition.process.done({ tid: data.tid })
break
}
};
// Start process definition
BrixxProcessDefinition.process.start({ pid });Start Brixx process application in terminal
> node brixx-login-process.js {pid}