-
-
Notifications
You must be signed in to change notification settings - Fork 1
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.
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
This property will give you access to the context.
You will be able to access all the Services from the context.
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.
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.
The workflow engine will do string interpolation on these fields.
Add double curly brackets to get values from the model, i.e. {{user.firstname}}.
Web Component 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
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>;
}
}
-
3.1.Introduction
3.2. Core
3.3. Services
3.3.1. Workflow
3.3.2. Analytics
3.3.3. Config
3.3.4. Model
3.3.5. Validator
3.3.6. Http3.4. Validators
3.5. Pipes
3.5.1. Currency
3.6. Activities
3.6.1. Page
3.6.2. Api
3.6.3. Assign
3.6.4. Decision
3.6.5. Code
3.6.6. IPC
3.6.7. Finish
3.6.8. Redirect
3.6.9. Switch
3.6.10. Custom3.7. Web Components
3.7.1. React