Workflow Actions

You can access the plugin's list of workflow actions by:

  1. Opening the workflow tab (make sure you've already added the Canvas-Main element to your page

  2. Add your Trigger event (e.g. when a button is clicked)

  3. Add a workflow action

  4. Navigate to the "Element Actions" section

Below is a list of all of the workflow actions associated with the Canvas-Main element along with a description of what it does and how to use it:

Workflow Actions (Workflow Tab)

Action Name
Fields
Description

Save (as PNG to URL)

  • Image Height (px)

  • Image Width (px)

  • PNG File Name

Use this workflow action to save a .png image of your canvas to your database. Full instructions here.

Save (as Serialization)

N/A

Use this workflow action to save a JSON that represents your Canvas. You can then load it to continue editing in another session. Full instructions here.

Download Canvas (sets link to download)

HTML id Attribute, Name of file

Due to some Bubble and JavaScript limitations, you'll need to add a link to your Bubble page and closely follow the instructions here.

Load Serialized Canvas

  • Serialized Canvas

  • Undo/Redo Reset

Load a serialized canvas JSON onto the Canvas. Setting Undo/Redo Reset to "yes" makes it so that the furthest a user can undo is to the point where this canvas was loaded.

Undo

N/A

Undo's the user's last action on the Canvas

Redo

N/A

Redo's the user's last action on the Canvas

Bring Forward an Element

N/A

Brings the selected element(s) forward in the canvas relative to the unselected element(s)

Send Backwards an Element

N/A

Sends the selected element(s) backwards in the canvas relative to the unselected element(s)

Copy Elements on Canvas

N/A

Copies the selected element(s) on the Canvas

Paste Elements on Canvas

N/A

Pastes any copied element(s) on the Canvas

Add Text to Canvas

  • Text to Add

  • X Location

  • Y Location

  • Font Size

  • Text Color

Add Text Elements to the Canvas programmatically using this action and specify the text, location, font size, and color with the action's properties.

Add Shape to Canvas

  • Shape (Rectangle, Ellipse, Triangle)

  • X Location

  • Y Location

  • Height

  • Width

  • Shape Color (Fill)

  • Shape Color (Outline)

  • Outline Width

  • Corner Roundness

Add Shape Elements to the Canvas programmatically using this action and specify the location, size, and color with the action's properties.

Add Image to Canvas

  • Image (static)

  • Image (dynamic link) if not using static image

  • X Location

  • Y Location

  • Image Width

  • Image Height

  • Selectable?

  • Unique ID

Add Image Elements to the Canvas programmatically using this action and specify the image, location, size with the action's properties.

Modify Element

Drawing

  • Color

  • Stroke Width

Shape

  • Fill Color

  • Outline Color

  • Outline Width

Text

  • Font Family

  • Font Color

  • Font Size

  • Text Value

Modify the selected element(s) based on their type. For instance, if a Triangle Shape element is selected, you can modify the fill color, outline color, and outline width using this workflow action.

Scale All Elements

  • Multiple (number)

Scale all elements on the canvas (e.g. setting to 2 would double element sizes, setting to 0.5 would half the sizes)

Clear Canvas

N/A

Clears the Canvas of all the Elements

Vertically Flip Selected Element(s)

N/A

Vertically flips selected element(s) on Canvas

Horizontally Flip Selected Element(s)

N/A

Horizontally flips selected element(s) on Canvas

Remove Selected Element(s) from Canvas

N/A

Removes the selected Elements from the Canvas

Set Cursor Click Mode

Click Mode ("Free Draw/Paint", "Draw Shape", "Select Elements", "Add Text"

Set what happens when users click and drag on the Canvas. Note: This overrides the Element Properties (set for the Canvas on the Design Tab).

Toggle Selector Mode

Can select? (yes/no field)

Setting "Can select?" to "no" disables the ability for users to select Elements on the Canvas

Last updated