Canvas
Overview
The Workflow container. The Canvas is used for accessing properties and functions related to visualization and rendering.
- From version: 2020.20
Properties
Events
Methods
Properties
height
height: number
The height of the Workflow's container. Use this to design your workflow UI.
const height = workflowApi.canvas.height;
width
width: number
The width of the Workflow's container. Use this to design your workflow UI.
const width = workflowApi.canvas.width;
Events
onSizeChanged
onSizeChanged ( newSize : { height : number; width : number }): void
This method will be triggered from the Workflow infrastructure when the window dimensions was changed. You should implement this function if you need to change and fit DOM Elements based on the window's dimensions .
workflowApi.canvas.onSizeChanged = (size) => {
console.log("You can change your view to new size according to the canvas new size");
};
Parameters
-
newSize:{ height: number; width: number }
-
height:number
-
width:number
-
Returns void
Methods
addExternalStyleSheets
addExternalStyleSheets ( paths : string[]): void
Set external style sheets for the styling of the workflow. Used to add entire custom style sheet documents.
workflowApi.canvas.addExternalStyleSheets(['https://kendo.cdn.telerik.com/2021.1.119/styles/kendo.default-v2.min.css']);
Parameters
-
paths:string[]
Each string represent the address for the style sheet document.
Returns void
closeWindow
closeWindow (): void
this function closes the workflow window. You should use this function when you have a process that requires the window to be closed.
const removeThreadButton = document.createElement("button");
removeThreadButton.addEventListener('click', () => {
workflowApi.currentThread.removeThread().then(() => {
workflowApi.canvas.closeWindow();
});
});
Returns void
hideSpinner
hideSpinner (): void
This function hides the spinner animation in the UI.
const currentEntry = workflowApi.currentThread.entries[0];
workflowApi.canvas.showSpinner();
currentEntry.save().then(() => {
console.log("The Entry has been saved");
}).finally(() => {
workflowApi.canvas.hideSpinner();
});
Returns void
refresh
refresh (): void
Refreshes the Workflow's window. The refresh function will retrigger all the flow's events and refetch the Workflow's data. Use this function when you need to retrieve the latest data or when you want to recall the flow's triggered events.
const currentEntry = workflowApi.currentThread.entries[0];
workflowApi.canvas.showSpinner();
currentEntry.save().then(() => {
console.log("The Entry has been saved");
}).finally(() => {
workflowApi.canvas.hideSpinner();
workflowApi.canvas.refresh();
});
Returns void
showSpinner
showSpinner (): void
The function displays the UI spinner animation in the middle of the window and blocks all other user access to the UI elements. Call it when you have an asynchronous process and you want to force the user to wait.
const currentEntry = workflowApi.currentThread.entries[0];
workflowApi.canvas.showSpinner();
currentEntry.save().then(() => {
console.log("The Entry has been saved");
}).finally(() => {
workflowApi.canvas.hideSpinner();
});
Returns void