Canvas

Overview

The Workflow container. The Canvas is used for accessing properties and functions related to visualization and rendering.

  • From version: 2020.20

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