caracal_polaris
v5.0.0
Published
Polaris Workflow
Readme
Polaris: A workflow engine to build web pages.
Building apps from without coding. We will be using configuration to build our apps.
See the Wiki for more information.
Why Polaris?
Why not write just the html page? Polaris will enable non programmers to build their own forms using a GUI builder. The GUI builder will enable the user to specify the flow of the page by settings. You will be able to give the audiences different flows by using LaunchDarkly for example.
You'll get data binding, form validation, the ability to call api's and the abitity for different codepaths based on user interactions out of the box.
An demo can be seen on our Demo page
Please refere to the Wiki for more information.
Getting Started
You can try Polaris Workflow online at Stackblits
Local
Add polaris to your application
npm install caracal_polaris --saveAdd the scripts to your page.
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Polaris Workflow</title>
<link rel="stylesheet" href="style.css" />
<script type="module" src="node_modules/caracal_polaris/dist/polaris/polaris.esm.js"></script>
<script nomodule src="node_modules/caracal_polaris/dist/polaris/polaris.js"></script>
</head>Add the element to your page.
<polaris-analytics></polaris-analytics>
<polaris-workflow></polaris-workflow>Load the process, refere to the wiki to setup the remote server to provide the process definitions.
<script>
const process = {
"name" : "demo",
"activities": [
{
"name": "start",
"type": "page-activity",
"controls": [
{"tag" : "h1", "innerHTML": "Polaris" },
{"tag" : "span", "innerHTML": "Welcome to polaris workflow" }
]
}
]
};
customElements
.whenDefined("polaris-workflow")
.then(() => {
const wf = document.querySelector("polaris-workflow");
wf.load(process);
});
</script>Listen to messages, refere to the wiki for a complete list of events.
<script>
customElements
.whenDefined("polaris-workflow")
.then(() => {
const wf = document.querySelector("polaris-workflow");
wf.addEventListener("wfMessage", (event) => {
switch(event.detail.type) {
case "ERROR": console.log(event); break;
case "VALIDATION_ERROR": console.log(event); break;
...
...
default: console.log("Unknown Event"); break;
}
});
});
</script>To start developing your new Polaris project, run:
npm start