Updated on 9/27/2019
Service Designer User's Guide
Service Designer Elements
Direct link to topic in this publication:

UI Service Designer Elements

To design client-side services, you use nodes and wires to create service flows.

Learn about the elements in more detail.


The Script node

A node is a functionality which defines an action. You connect one or more nodes, to create a flow. A single app can have many services, and each service can have multiple flows, and each flow can have multiple nodes.

Nodes can be added to the workspace by dragging them from the palette and dropping them to the editor.

Nodes are joined together by wires via their ports. A node can have at most one input port and many output ports. You specify a name for each node using its Attributes window.

Editing Node Configuration

A node’s configuration can be edited by clicking twice on the node or pressing Enter when the node has focus.

The attributes window shows the edit form specific to the node that is selected. Click  in the Attributes window to learn about the node.


Nodes are wired together by pressing the mouse button on a node’s port, dragging to the destination node, and releasing the mouse button.

To delete a wire, first select the wire by clicking on it and then press the Delete key.


A flow is a logical set of connected nodes which defines a task. It connects one or more nodes using wires. To create a flow, drag and drop one or more nodes to the service editor and connect the nodes.

Service Editor 

It is the main editor canvas where flows are developed by dragging nodes from the palette and wiring them together. 

You can use keyboard shortcuts in the editor to perform cut, paste, delete, and save operations. refer to the Reference tables below to learn about the shortcut keys.

ActionSave service
Key shortcutCtrl+S
ActionUndo last change
Key shortcutCtrl+Z
ActionCopy node
Key shortcutCtrl+C

The header of the service editor contains buttons to zoom in and out, as well as to reset to the default zoom level. It also contains a toggle button for the view navigator.

View navigator

Service Editor view navigator

ActionPaste the copied node
Key shortcutCtrl+V 

The view navigator provides a scaled-down view of the entire editor, highlighting the area currently visible. That area can be dragged around the navigator to quickly jump to other parts of the workspace. It is also useful for finding nodes that have been lost to the further edges of the editor.

NSessionStorageService                                                                                                                  Nodes Palette  >