Process Editor

UI for creating Processes and Subprocesses.

The Process Editor is the visual design environment within the Frends Control Panel where you build, configure, and manage integration Processes. It uses a subset of BPMN 2.0 notation enhanced with C# to represent integration flows as diagrams that are both executable and human-readable. This article covers the layout of the Process Editor, its toolbar commands, canvas controls, and available keyboard shortcuts.

Process Editor Layout

The Process Editor is divided into four main areas that work together during Process design.

Process editor can be divided into approximately three sections.

The Process Canvas is the central workspace where you build your Process by placing and connecting shapes. You can pan around the canvas and zoom in and out to navigate larger Processes.

The Process Toolbar is a floating panel on the left side of the canvas. It contains all available shapes that can be dragged onto the canvas, organized by category.

The Parameter Editor is the panel on the right side. When a Task is selected on the canvas, its parameters appear here. Alongside the Task parameters, a second tab can be opened separately, showing one of the following: the Process Settings, the Process Variables tab for managing Process-level variables, the Snippets tab for storing and reusing C# code fragments, or the Task Unit Testing tab for writing and running unit tests against individual Tasks. When open, this second tab appears next to the Task parameters so both are visible at the same time.

The Canvas Navigation Bar is docked to the canvas and contains controls for navigating the Process diagram. The Reset view button centers the canvas and resets the zoom level to the default, which is useful when you have panned or zoomed far from the main flow. The Minimap provides a thumbnail overview of the entire Process in the corner of the canvas, letting you quickly see the full structure and jump to different areas. The Keyboard Shortcuts button opens a reference panel listing all available shortcuts and commands. The editor also automatically restores the last viewed canvas position and zoom level when you reopen a Process, so you return to where you left off.

The Context Pad (Quick Actions Toolbar) appears directly on the canvas when you select a shape. It offers quick actions such as connecting to a new shape or deleting the selected element, reducing the need to navigate back to the toolbar for common operations.

Context pad appears when a shape is selected in the editor.

Parameter Editor

The Parameter Editor on the right side of the Process Editor is where you configure individual shapes and manage Process-level settings. It can show the selected Task's parameters alongside one of the Process-level tabs at the same time, making it possible to reference variables or snippets while editing a Task.

It's possible to view Task Parameters and Process Settings or other tabs at the same time.

Process Settings

The Process Settings tab contains the configuration that defines how the Process behaves: its name, description, execution settings, error handling, and Trigger configuration. For a full reference of all available settings for Processes, see the Process reference documentation. For subprocess-specific settings, see the Subprocess reference documentation.

Process Variables

The Process Variables tab is where you define variables that are available throughout the entire Process execution. Variables are initialized after the Trigger fires and before any other shapes execute, so they are not accessible within the Trigger itself.

Each variable has a Name, a Type expressed as a C# type, an initial Value which can be a static value or an Environment Variable, and an optional Description. Process Variables are referenced in expressions using the #var prefix, for example #var.MyVariable.

Process Variable being initialized with Environment Variable.

Process Variables initiated from this tab cannot contain C# expressions or Handlebars. Environment Variables are translated directly into their value, while Handlebars and C# expressions are not evaluated.

After creating a Process Variable through the Parameter Editor tab for the Process, it's possible to edit the variable values from the Processes view. Simply select Edit Process Variables from the Process Actions menu to access the values outside the Process Editor.

Process Variables are used also with Templates, to provide initial or default values to variables within the Process. When creating Templates, it can be useful to replace Environment Variables within the Process with Process Variables, in order to allow Template users to configure the values without requiring the exact same Environment Variables to be available.

Task Unit Testing

The Task Unit Testing tab lets you run a selected Task shape in isolation without executing the full Process. To create a test, select a Task on the canvas and open the Task Unit Testing tab. The same input fields as the Task's parameters are shown, and you can enter static test values independent of the actual Process configuration.

Task Unit Test tab in Frends Process Editor displays the same Task Parameters.

Running a test executes the Task against the selected Agent Group and displays the result directly in the tab. If the Task completes successfully, the full result object is shown. If it fails, the error message and details are displayed. Because tests run in isolation, inputs must be static values or Environment Variables — references to preceding values such as #result or #var are not available. The Call Subprocess shape cannot be tested using this feature.

Snippets

The Snippets tab is a personal or shared library of reusable text or code fragments scoped to the Process. Snippets are stored here and can be inserted directly into code inputs across the Process, which is useful for recurring logic or boilerplate expressions that appear in multiple shapes.

When creating a Code Snippet, you can choose whether it is available only for you, or for everyone in the Tenant. You can also select the type of content the Snippet contains, from plain text to JSON to C# expression.

Snippet editor in Frends.

Once created, the available Snippets are shown in the Snippets tab in Parameter Editor. The contents of the Snippets can be viewed and copied from the expandable list item and used where you need it. You can also edit the contents here if necessary.

Snippets can be filtered by their name and language, such as plain text, JSON or Expression.

Snippet tab allows you to change the contents of a Snippet.

Keyboard Shortcuts

The Process Editor supports keyboard shortcuts for common actions on the canvas and in code editors. The full reference is available at any time via the Keyboard Shortcuts button in the canvas navigation bar.

Canvas Shortcuts

Ctrl + Z — undo the last action on the canvas.

Ctrl + Shift + Z or Ctrl + Y — redo the last undone action.

Ctrl + S — save the Process as a draft without triggering validation or creating a new version.

Delete or Backspace — delete the selected shape or shapes.

Ctrl + A — select all shapes on the canvas.

Ctrl + F — open the search bar for finding shapes by name within the Process.

Scroll wheel — scroll the canvas vertically.

Shift + Scroll wheel scrolls horizontally.

Ctrl + Scroll up or Ctrl + + — zoom in.

Ctrl + Scroll down or Ctrl + - zooms out.

Ctrl + 0 — reset the zoom level to the default.

Ctrl + 9 — reset both the zoom level and the canvas position.

E — open the name editor for the selected shape, equivalent to double-clicking it.

C — activate the Connect tool for drawing connections between shapes.

H — activate the Hand tool for panning the canvas by clicking and dragging.

L — activate the Lasso Tool for selecting multiple shapes by drawing a selection area. Shift + drag also activates the Lasso Tool.

S — activate the Space tool, which switches the canvas into a pan mode where clicking and dragging moves the view.

For shortcuts using Ctrl on Windows and Linux, use Cmd on Mac.

Code Editor Shortcuts

Code inputs in the Parameter Editor use the Monaco Editor. The shortcuts below apply to code input fields. At least these shortcuts are tested to work in Frends. Other Monaco Editor shortcuts may also work but have not been tested, or were found to not be working.

For shortcuts that use Ctrl or Alt on Windows and Linux, use Cmd and Option on Mac.

Tab — insert indentation at the cursor position. By default, Tab inserts indentation rather than moving focus to the next field. Use Ctrl + M to toggle this behaviour.

Ctrl + M (or Ctrl + Shift + M on Mac) — toggle the tab trap. When off, Tab moves focus to the next field as expected in a browser form. This setting persists until the page is reloaded.

Ctrl + Space — trigger IntelliSense suggestions at the cursor position.

Ctrl + F — open the find widget within the code editor.

Ctrl + H — open the find and replace widget.

Ctrl + G — go to a specific line number.

Ctrl + D — select the next occurrence of the word at the cursor. Press repeatedly to add further occurrences to the selection.

Ctrl + L — select current line. Press repeatedly to add further lines to the selection.

Ctrl + Shift + L or Ctrl + F2 — select all occurrences of the word at the cursor simultaneously.

Ctrl + / or Ctrl + ' — toggle a line comment for the current line.

Shift + Alt + A — toggle a block comment for the current line or selection.

Alt + Up or Alt + Down — move the current line up or down.

Shift + Alt + Up or Shift + Alt + Down — copy the current line and insert it above or below.

Ctrl + Shift + K — delete the entire current line.

Ctrl + Enter — insert a new line below the current one regardless of cursor position.

Home / End — jump to the start or end of the current line.

Ctrl + Home / Ctrl + End — jump to the very beginning or end of the editor content.

Alt + Click — insert multiple cursors at clicked locations.

Shift + Alt + Click — insert cursors on all lines between the current location and the clicked location, moving the cursor on all lines to where it was clicked.