Building apps from without coding. We will be using configuration to build our apps.
See the Wiki for more information.
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.
You can try Polaris Workflow online at Stackblits
Add polaris to your application
npm install caracal_polaris --save
Add 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