Caracal_polaris NPM

node GitHub package.json version GitHub CircleCI Website

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 --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: