3.7.1. React

You can add your own React Components to display on the web page.
You will need to add a Web Component wrapper.
You can the use your component in the process definition.

Specification

You can the use your component in the process definition.

{
    "name" : "react",
    "activities": [
        {
            "name": "start",
            "type": "page-activity",        
            "controls": [
                {"tag": "moon-header", "id": "pageHeader", "caption": "React Components" },
                {"tag": "polaris-react", "component": "ProcessButton", "caption": "Login", "process": "login"}
            ]
        }
    ]
}

NOTE : you can add any property that is available on your React Components

You can add the following properties.

ctx: Context

This property will give you access to the context.
You will be able to access all the Services from the context.

id

The value property will be set to a value in the model if the id is the path to an value in the model.
This property is required for input elements.
Make sure you don't store values in the root i.e. there should be a period in the id property.

value

This property is required for input elements.
The value will be added to the model with the path specified in the is property.
Make sure you don't store values in the root i.e. there should be a period in the id field.

caption, textContent and innerHtml

The workflow engine will do string interpolation on these fields.
Add double curly brackets to get values from the model, i.e. {{user.firstname}}.

Components

Web Component Wrapper
Note: You need to register your components in the wrapper.

class PolarisReact extends HTMLElement {    
    constructor() {
        super();
        this.shadow = this.attachShadow({mode: 'open'});

        this.components = {
            "ProcessButton": ProcessButton,
        };
    }

    connectedCallback() {
        const Component = this.components[this.component];
        ReactDOM.render(React.createElement(Component, this), this.shadowRoot);        
    }
}

customElements.define('polaris-react', PolarisReact);

React Component

function ProcessButton(props) {    
    ctx = props.ctx; 
    
    clickHandler = () => {
        ctx.wf.setProcess(props.process);
    }
    
    const style = {
        cursor: "pointer",
        color: "white",
        backgroundColor: "hotpink",
        minWidth: "9rem",
        border: "1px solid #757575",
        borderRadius: "5px",
        padding: ".5rem",
        margin: "0 .1rem",
        font: "inherit",
        fontSize: "1rem"
    };

    const element = React.createElement(
        'button',
        { style: style, onClick: () => clickHandler()},
        props.caption
    );

    return element;
}

You can also use classes

import React from 'react';
import { Context } from 'caracal_polaris/dist/types/model/context.model';

export class ProcessButton extends React.Component {
    props: any;
    get ctx(): Context { return this.props.ctx; }

    clickHandler() {
        this.ctx.wf.setProcess(this.props.process);
    }

    render() {
        const style = {
            cursor: "pointer",
            color: "white",
            backgroundColor: "green",
            minWidth: "9rem",
            border: "1px solid #757575",
            borderRadius: "5px",
            padding: ".5rem",
            margin: "0 .1rem",
            font: "inherit",
            fontSize: "1rem"
        };

        return <button style={style} onClick={this.clickHandler.bind(this)}>{this.props.caption}</button>;
    }
}