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.
Prerequisites
- 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
Understand the Four Application Layer Tabs
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.
Use the Center Editor Area
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.
Work with the Toolbox and Properties Panel
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.
Master the TrueChange Tab
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.
Use the 1-Click Publish Workflow
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.
Use the Debugger Tab
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.
Learn the Essential Keyboard Shortcuts
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 working example
1=== SERVICE STUDIO QUICK REFERENCE ===23RIGHT PANEL TABS:4 Interface → Screens, Blocks, Themes, Scripts5 Logic → Client/Server Actions, Roles, REST APIs, Exceptions6 Data → Entities, Structures, Site Properties, Client Variables7 Processes → Timers, BPT Flows (O11 only)89CENTER EDITOR MODES:10 Screen Editor → double-click a Screen11 Action Flow Editor → double-click an Action12 Entity Diagram → double-click an Entity Diagram1314BOTTOM PANE TABS:15 TrueChange → real-time errors (red) and warnings (orange)16 Debugger → step-through execution with breakpoints17 1-Click Pub → Upload → Compile → Deploy progress18 Search → Find results1920COMMON SHORTCUTS:21 Ctrl+F5 1-Click Publish22 Ctrl+Q Manage Dependencies23 Ctrl+F Find24 F5 Start Debugging25 F12 Go to Definition26 Ctrl+S Save2728PUBLISH BUTTON COLORS:29 Green = No errors, ready to publish30 Red = Errors exist, fix TrueChange first31 Blue = Just published, click to open browser3233CREATING COMMON ELEMENTS:34 Entity: Data tab → Entities → Database → right-click → Add Entity35 Server Action: Logic tab → Server Actions → right-click → Add Server Action36 Screen: Interface tab → UI Flows → right-click flow → Add Screen37 Client Action: Right-click any Screen → Add Client Action38 Site Property: Data tab → Site Properties → right-click → Add Site Property3940ODC STUDIO DIFFERENCES:41 - No Processes tab (Timers are inline, no BPT)42 - No Module concept (app = module)43 - Cloud-based IDE (browser, no install)44 - ODC Portal replaces Service Center + LifeTimeCommon mistakes
Why it's a problem: Looking for action logic in the Interface tab instead of the Logic tab
How to avoid: 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.
Why it's a problem: Ignoring orange TrueChange warnings because 'the app still publishes'
How to avoid: 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.
Why it's a problem: Closing the TrueChange tab and losing visibility of the error count
How to avoid: 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.
Why it's a problem: Trying to find Entity Diagrams under the Data tab root instead of the Entity Diagrams subfolder
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I am learning Service Studio, the OutSystems desktop IDE. Explain the purpose of each of the four right-side tabs (Interface, Logic, Data, Processes) and give one concrete example of something you would create in each tab. Also explain what TrueChange is and why it matters for productivity.
In Service Studio, I want to find all places in my module that reference a specific entity attribute called 'CustomerEmail'. What is the fastest way to do this using the built-in search and navigation tools? Also, how do I rename the attribute safely so all references update automatically?
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation