# Service Studio Interface Guide: Every Panel, Tab, and Shortcut

- Tool: OutSystems
- Difficulty: Beginner
- Time required: 20-30 min
- Compatibility: OutSystems 11 and ODC
- Last updated: March 2026

## TL;DR

Service Studio is OutSystems' desktop IDE. The interface has four right-side tabs (Interface, Logic, Data, Processes), a center editor area that switches between screen, action flow, and entity diagram views, a left-side Toolbox, a right-side Properties panel, and a bottom pane with TrueChange, Debugger, and Publish tabs. Learning the layout unlocks all other OutSystems skills.

## Your Complete Service Studio Reference

Service Studio is the desktop IDE for OutSystems 11, available for Windows (with a Mac beta). Unlike browser-based tools, it is a full desktop application that compiles your visual definitions into .NET C# and SQL. Every panel serves a specific role — understanding where things live prevents frustration and speeds up development significantly. This guide tours every area of the IDE without building a specific feature, so you can return to it as a reference at any point.

## Before you start

- Service Studio installed from outsystems.com/downloads/
- Connected to a Personal Environment or enterprise OutSystems environment
- An existing application module opened in Service Studio (or create a blank Reactive Web App to follow along)

## Step-by-step guide

### 1. Understand the Four Application Layer Tabs

The right side panel in Service Studio has four tabs that organize everything in your module by layer:

**Interface tab** — all UI artifacts: UI Flows (screen containers), Screens (individual pages), Blocks (reusable UI components), Images, Themes (CSS/design system), Scripts (JavaScript files). This is where you spend most of your visual design time.

**Logic tab** — all behavior: Client Actions (browser-side), Server Actions (server-side), Service Actions (public cross-module), Roles (authorization), Exceptions (custom error types), Integrations (REST consume/expose, SOAP, SAP). All business logic lives here.

**Data tab** — all data: Entities (database tables), Structures (non-persisted types), Site Properties (server-side config), Client Variables (localStorage-persisted), Entity Diagrams, Resources. Your data model lives here.

**Processes tab** — background work: Timers (scheduled batch jobs), Business Processes (BPT workflow flows). Background automation lives here.

**Expected result:** You can locate any element in your module by navigating to the correct tab and expanding the tree. Tab icons on the right side panel make switching fast.

### 2. Use the Center Editor Area

The large center area is a multi-mode editor that changes based on what you double-click:

**Screen Editor** — appears when you double-click a Screen. Shows a WYSIWYG canvas. Drag widgets from the Toolbox (left panel) onto the canvas. Widget Tree (lower-left of Toolbox) shows the hierarchical layout of all widgets on the current screen.

**Action Flow Editor** — appears when you double-click a Client Action, Server Action, or any action node. Shows a flowchart view with connectors. Logic elements (If, For Each, Assign, Switch, Raise Exception) are dragged from the Toolbox. Arrow notation: Start → Aggregate → If → [True branch] → Assign → End.

**Entity Diagram Editor** — appears when you double-click an Entity Diagram (Data tab → Entity Diagrams). Shows boxes for entities with lines for relationships.

You can have multiple editor tabs open simultaneously. Click the tab headers along the top of the center area to switch between open editors.

**Expected result:** Double-clicking a Screen opens the Screen Editor, double-clicking a Server Action opens the Action Flow Editor. You can switch between open editors using the tab bar at the top of the center area.

### 3. Work with the Toolbox and Properties Panel

The **Toolbox** on the left side is context-sensitive — its contents change based on what is open in the center editor:
- Screen Editor open → shows UI widgets (Button, Input, Container, Table, List, Image, Text, Form, Popup, If Widget, etc.) grouped by category
- Action Flow Editor open → shows logic elements (Start, If, Assign, For Each, Switch, Aggregate, SQL, JavaScript, Raise Exception, etc.) plus any Server Actions available to call

The **Widget Tree** at the bottom of the Toolbox panel shows a hierarchical list of all elements currently on the screen canvas. Click any item in the Widget Tree to select it on the canvas.

The **Properties Panel** on the right side (below the tab bar) shows all editable properties for the currently selected widget or element. Key sections:
- General properties (Name, Label, Visible, Enabled)
- Styles tab (CSS classes, inline styles, Styles Editor for visual CSS editing)
- Events section (OnClick, OnChange, OnMouseOver, etc.)
- Validation section (for Input widgets: Mandatory, InputType, Valid, ValidationMessage)

**Expected result:** When a Button is selected on the canvas, the Properties panel shows its Label, Style Classes, Enabled, Visible, and Events properties. Clicking the Styles tab shows CSS-related settings.

### 4. Master the TrueChange Tab

The **TrueChange tab** in the bottom pane is Service Studio's real-time validation engine — arguably the most important panel for productivity. It shows:

- **Red items (Errors)** — block publishing. The 1-Click Publish button turns red when errors exist. Must fix all errors before deploying.
- **Orange items (Warnings)** — do not block publishing but indicate potential issues: unused variables, aggregates with no Max Records set, missing descriptions.

**How to use TrueChange:**
1. The counter in the bottom-left of the Service Studio window shows the total error/warning count at all times.
2. Click the TrueChange tab to see the full list.
3. Double-click any item to navigate directly to the element causing the issue — Service Studio opens the correct editor and selects the problematic node.
4. After fixing an error, TrueChange automatically re-validates within seconds.

**TrueChange also powers auto-rename propagation:** If you rename an Entity attribute, TrueChange finds every place that attribute is used and updates all references automatically. A dialog shows you all affected locations before applying.

**Expected result:** You can click any TrueChange error to jump to the problem location. After fixing an error, it disappears from the list automatically. The 1-Click Publish button turns green when errors reach zero.

### 5. Use the 1-Click Publish Workflow

The **1-Click Publish button** at the top center is the primary deployment action. Its color indicates status:
- **Green** = No errors. Ready to publish.
- **Red** = Errors exist. Publishing is blocked. Fix TrueChange errors first.
- **Blue 'Open in Browser'** = Module was just successfully published. Click to open the running app.

When you click 1-Click Publish:
1. Service Studio saves the module and uploads it to the Platform Server
2. The Platform Server compiles it from .OML format to .NET C# and SQL
3. The app is deployed and the running version is updated

The **1-Click Publish tab** in the bottom pane shows a progress bar with three stages: Upload → Compile → Deploy. Each stage shows a green checkmark on success or a red X with an error message on failure.

After publishing, the **'Open in Browser'** button (top center) opens the app at your environment URL. Each time you make changes in Service Studio, those changes are NOT live until you click 1-Click Publish again.

**Expected result:** The 1-Click Publish tab shows Upload → Compile → Deploy, all with green checkmarks. The button becomes blue 'Open in Browser'. The running app reflects your latest changes.

### 6. Use the Debugger Tab

The **Debugger tab** in the bottom pane lets you trace action flows step by step.

**Setting breakpoints:** Click any node in an Action Flow (If, Assign, Server Action call, etc.) — a red dot appears on the node indicating a breakpoint.

**Starting a debug session:** Click the 'Debug in Public Area' button (green bug icon, top toolbar) or go to Debugger menu → Debug in Public Area. Service Studio opens the running app in a special debug URL. When execution hits a breakpoint, the IDE comes to front and highlights the current node.

**Debugger toolbar buttons:**
- **Continue Request (F8)** — run until next breakpoint
- **Step Over (F6)** — execute current node and move to next
- **Step Into (F7)** — enter a called action
- **Step Out (Shift+F7)** — return from current action
- **Suspend** — pause without a breakpoint
- **Abort** — stop the request

**Scope tabs in the Debugger panel:**
- **In Use** — variables in the current action's scope
- **Locals** — all local variables
- **Widgets** — screen widget runtime values
- **Session Variables** — (O11 Traditional Web only)
- **Site Properties** — current Site Property values

Values that changed since the last step appear in **red**, making it easy to spot unexpected changes.

**Expected result:** When a breakpoint is hit, the Debugger tab shows all variable values in the current scope. Stepping through an action flow reveals the exact path execution takes, including which branch of an If node was chosen.

### 7. Learn the Essential Keyboard Shortcuts

These shortcuts work in Service Studio O11 and are essential for productive development:

**Navigation:**
- **Ctrl+Q** — Manage Dependencies (add/remove references to other modules)
- **Ctrl+F** — Find (search across module)
- **Ctrl+H** — Replace
- **Ctrl+Tab** — Switch between open editor tabs
- **F12 / Ctrl+Click** — Navigate to definition of selected element

**Building:**
- **Ctrl+F5** — 1-Click Publish
- **F5** — Debug (start debug session)
- **Ctrl+Z / Ctrl+Y** — Undo / Redo
- **Ctrl+S** — Save module without publishing
- **Ctrl+D** — Duplicate selected element

**Action Flows:**
- **Ctrl+Click + Drag** — create a connection between nodes
- **Delete** — remove selected node (connections remain, rewire manually)
- **Double-click** — open/edit element properties inline

**Screen Editor:**
- **Ctrl+Click** — select multiple widgets
- **Arrow keys** — nudge selected widget
- **Ctrl+G** — group selected widgets into a Container

**Expected result:** You can navigate to definitions, publish, and manage dependencies without leaving the keyboard. The shortcuts match standard IDE conventions, making the learning curve shorter for developers with prior IDE experience.

## Complete code example

File: `service_studio_quick_reference.txt`

```text
=== SERVICE STUDIO QUICK REFERENCE ===

RIGHT PANEL TABS:
  Interface  → Screens, Blocks, Themes, Scripts
  Logic      → Client/Server Actions, Roles, REST APIs, Exceptions
  Data       → Entities, Structures, Site Properties, Client Variables
  Processes  → Timers, BPT Flows (O11 only)

CENTER EDITOR MODES:
  Screen Editor       → double-click a Screen
  Action Flow Editor  → double-click an Action
  Entity Diagram      → double-click an Entity Diagram

BOTTOM PANE TABS:
  TrueChange   → real-time errors (red) and warnings (orange)
  Debugger     → step-through execution with breakpoints
  1-Click Pub  → Upload → Compile → Deploy progress
  Search       → Find results

COMMON SHORTCUTS:
  Ctrl+F5  1-Click Publish
  Ctrl+Q   Manage Dependencies
  Ctrl+F   Find
  F5       Start Debugging
  F12      Go to Definition
  Ctrl+S   Save

PUBLISH BUTTON COLORS:
  Green  = No errors, ready to publish
  Red    = Errors exist, fix TrueChange first
  Blue   = Just published, click to open browser

CREATING COMMON ELEMENTS:
  Entity:        Data tab → Entities → Database → right-click → Add Entity
  Server Action: Logic tab → Server Actions → right-click → Add Server Action
  Screen:        Interface tab → UI Flows → right-click flow → Add Screen
  Client Action: Right-click any Screen → Add Client Action
  Site Property: Data tab → Site Properties → right-click → Add Site Property

ODC STUDIO DIFFERENCES:
  - No Processes tab (Timers are inline, no BPT)
  - No Module concept (app = module)
  - Cloud-based IDE (browser, no install)
  - ODC Portal replaces Service Center + LifeTime
```

## Common mistakes

- **Looking for action logic in the Interface tab instead of the Logic tab** — undefined Fix: Server Actions and Client Actions live under the Logic tab. The Interface tab only contains UI elements (screens, blocks, themes). Standalone reusable logic always lives under Logic tab → Client Actions or Server Actions.
- **Ignoring orange TrueChange warnings because 'the app still publishes'** — undefined Fix: Warnings like 'Aggregate has no Max Records' or 'Variable is never used' indicate real problems that cause slow performance or wasted memory. Review all warnings after each feature build and resolve or acknowledge them.
- **Closing the TrueChange tab and losing visibility of the error count** — undefined Fix: The error count is always visible in the bottom-left status bar of Service Studio, even with the TrueChange tab closed. But keeping TrueChange open makes it easy to click-to-navigate to errors. Reopen it via View menu → Development Tabs → TrueChange.
- **Trying to find Entity Diagrams under the Data tab root instead of the Entity Diagrams subfolder** — undefined Fix: Entity Diagrams are at Data tab → Entity Diagrams (its own folder). Right-click 'Entity Diagrams' → 'Add Entity Diagram' to create a new one. Drag entities from the Data tab tree onto the diagram canvas.

## Best practices

- Keep TrueChange at zero errors at all times — never accumulate a backlog of red items
- Use Ctrl+Q (Manage Dependencies) when your module needs elements from another module — never copy-paste between modules
- Name all elements clearly (Actions, Screens, Entities) — TrueChange will auto-propagate renames safely
- Use the Widget Tree to select deeply nested widgets instead of clicking on the canvas — it is much more reliable
- Keep the 1-Click Publish tab visible while publishing to catch compile errors immediately
- Use the Styles Editor (per-widget visual CSS editor) for one-off tweaks; use the Theme for consistent global styles
- Learn F12 (Go to Definition) — it is the fastest way to navigate from a function call to its implementation

## Frequently asked questions

### Is Service Studio available for Mac?

A Mac beta version of Service Studio exists but it lags behind the Windows version in features and stability. Most O11 developers use Windows. ODC Studio, however, is fully browser-based and works on any OS including Mac, Linux, and ChromeOS. If you are on a Mac, ODC is the more reliable experience.

### Where do I find the keyboard shortcut reference in Service Studio?

Go to Help menu → Keyboard Shortcuts in Service Studio. This opens a built-in reference showing all shortcuts organized by category. You can also access guided in-product tutorials from Help → Guided Introduction.

### What is the difference between a Block and a Screen in the Interface tab?

A Screen is a full page that users navigate to — it has a URL, can receive input parameters, and fills the browser window. A Block is a reusable UI component that is embedded inside screens or other blocks. Think of Blocks as custom widgets you define yourself — a header navigation bar, a product card, or a modal dialog can all be Blocks.

### How do I reference elements from another module in Service Studio?

Use Ctrl+Q to open Manage Dependencies. In the dialog, select the producer module on the left, check the elements you want to use (actions, entities, blocks, etc.), and click Apply. The elements appear in your module tree with a reference icon. Changes to the producer module propagate automatically via TrueChange when you refresh dependencies.

---

Source: https://www.rapidevelopers.com/outsystems-tutorial/outsystems-service-studio-guide
© RapidDev — https://www.rapidevelopers.com/outsystems-tutorial/outsystems-service-studio-guide