ExamFinch.com My Study

Study guide

Themes, CSS Styling, OutSystems UI, and UI Patterns (Popup/Modal)

Practice this exam

OutSystems Certified Associate Developer Reactive Web Apps

Track your progress as you read

Finished sections get a check mark.

1 Introduction & Exam Overview

Exam Overview, Logistics, and Study Strategy

2 Chapter 2 — OutSystems Platform and Reactive App Fundamentals

OutSystems Platform Architecture, Service Studio, and Development Tools Client Variables and State Management Screen Lifecycle Events: OnInitialize, OnReady, OnParametersChanged Debugging and Monitoring with the Service Studio Debugger and Service Center

3 Data Modeling

Entities, Attributes, Data Types, and Identifiers Static Entities and Structures Data Relationships, Foreign Keys, and Referential Integrity

4 Chapter 4: Fetching Data

4.1 Aggregates: Filters, Sorting, and Max Records 4.2 Aggregates: Joins, Group By, and Computed Attributes 4.3 Fetching Data on Screens with Data Actions, Caching, and RefreshData 4.4 SQL Queries and External Integrations: REST and SOAP Consumption

5 Logic Flows and Actions

Client Actions, Server Actions, and Action Parameters Logic Flow Control: If, Switch, For Each, and Assign Form Validations: Mandatory, Email Type, and Form.Valid

6 Chapter 6: Error Handling and Advanced Logic

Exception Handling: Exception Handlers, Raise Exception, System vs User Exceptions, AbortTransaction Timers, BPT Processes, Human Activities, and Built-in Functions

7 UI Design: Screen Widgets

Core Screen Widgets: Screen, Container, Expression, If, Link, and Button Forms, Input Widgets, Data Binding, and Feedback Messages List Widget, Pagination, and Screen Navigation Themes, CSS Styling, OutSystems UI, and UI Patterns (Popup/Modal)

8 UI Design: Blocks and Events

Blocks: Creating Reusable UI Components with Input Parameters and Local Variables Block Events and Parent-Screen Communication

9 Architecture, Security, and Lifecycle

Modular Dependencies, Public/Private Elements, and Layered Architecture Role-based Security: Roles, Accessible By, CheckRole, GrantRole, Anonymous Application Lifecycle: 1-Click Publish, LifeTime, Environments, and Versioning

Themes, CSS Styling, OutSystems UI, and UI Patterns (Popup/Modal)

Key Takeaways Explain This Topic AI

A Theme is a CSS-based module that defines the visual style of a module's Screens; set the Theme on the module or Screen and it cascades CSS rules to all widgets.

StyleClasses property applies one or more CSS class names (space-separated) to any widget; OutSystems UI provides a library of predefined classes (e.g., btn-primary, card, padding-m) you use before writing custom CSS.

OutSystems UI is the built-in framework of widgets, templates, and UI patterns shipped with the platform — the default building blocks for responsive apps.

UI Patterns are reusable design solutions packaged in OutSystems UI — Popup Editor, Modal, Tabs, Accordion, Carousel; they are composed of Blocks and CSS, not custom code you write from scratch.

The responsive layout grid uses a 12-column system with breakpoints (phone, tablet, desktop) controlled by OutSystems UI grid classes; Columns stack on phone and spread horizontally on larger screens automatically.

Last updated: July 2026

Quick Answer: A Theme is a CSS-based module that styles all Screens in a module. StyleClasses applies CSS class names to any widget. OutSystems UI is the built-in framework of widgets, templates, and UI patterns (Popup, Modal, Tabs, Accordion). The responsive layout grid is a 12-column system with phone/tablet/desktop breakpoints. You use OutSystems UI classes before writing custom CSS.

Themes

A Theme in OutSystems is a CSS-based module defining the visual identity of Screens. A Theme contains CSS files (and optionally CSS variables, images, JavaScript) cascading to all widgets on Screens using that Theme. You set it at the module level; it applies to all Screens unless a Screen overrides it.

  • Concept Detail
  • Theme module A module of type Theme containing CSS and assets
  • Module Theme property Set on a UI module to reference which Theme styles its Screens
  • Screen Theme override A Screen can override the module-level Theme
  • CSS cascade Theme CSS applies to all widgets on Screens using that Theme

Exam trap: a Theme is CSS-based, not JSON or XML. The chain is: UI module → Module.Theme property → Theme module → CSS → styles cascade to Screens and widgets.

When you create a new Reactive Web module, Service Studio sets a default Theme (typically OutSystems UI Theme). Custom Themes are created by forking the default and modifying CSS variables (colors, spacing, typography), not writing CSS from scratch.

StyleClasses

Every widget has a StyleClasses property accepting CSS class names, space-separated. Example: "btn btn-primary padding-m" applies three classes, resolved against the Theme's CSS and OutSystems UI CSS library.

StyleClasses is the primary styling mechanism without per-widget CSS. Use OutSystems UI predefined classes first (tested, responsive, theme-aware); add custom classes only when they don't cover your need.

  • Common class Effect
  • btn-primary Primary button color
  • btn-secondary Secondary button color
  • card Card with shadow and padding
  • padding-m , padding-l Medium / large padding
  • margin-bottom-m Medium bottom margin
  • text-bold Bold text

The ExtendedClass property appends classes without overriding defaults — useful when a widget already has a default class. StyleClasses replaces the default list; ExtendedClass augments it.

OutSystems UI Framework

OutSystems UI is the built-in framework shipped with the platform. It provides:

Widgets : UI widgets (Button, Link, Form, List, Container) pre-styled with the default Theme.

Templates : Screen templates (Empty, Dashboard, List+Detail, Login) that scaffold layout and placeholders.

UI Patterns : reusable design solutions (Blocks + CSS + JavaScript) — Popup Editor, Modal, Tabs, Accordion, Carousel, Notification.

Building Blocks : pre-composed widget combinations (e.g., "Card with Image and Action") you drag onto a Screen.

OutSystems UI is the default styling foundation — it provides the responsive grid, widget classes, and UI patterns. You build on top of it, not replace it.

UI Patterns: Popup Editor and Modal

UI Patterns are reusable design solutions in OutSystems UI — composed of Blocks and CSS, not custom code. Two high-yield patterns:

Popup Editor

The Popup Editor displays transient content (detail panel, edit form) in an overlay. It consists of:

A trigger (Button or Link) that sets a Boolean to show the popup.

The Popup widget (from OutSystems UI), with Show bound to that Boolean.

Content inside (a Form, a detail Container).

A close mechanism (X button or backdrop click) setting the Boolean to false.

Modal

The Modal is a dialog overlaying the Screen, dimming the background and centering content. It blocks interaction until dismissed. Typical use: confirmation dialogs ("Are you sure you want to delete?") and edit forms that should not navigate away.

Pattern Typical Use Dismissal

Popup Editor Detail or edit content in an overlay without navigating X button or backdrop click sets Show to false

Modal Confirmation dialog or focused edit form; dims background Confirm/Cancel buttons or close button

Exam trap: Popup Editor and Modal are OutSystems UI patterns — drag from the toolbox, not code from scratch. Driven by a Boolean Show variable; no server action needed. Set true to display, false to hide.

Responsive Layout Grid

OutSystems UI provides a responsive 12-column grid. You use Columns containers with classes specifying how many of 12 columns the content spans at each breakpoint.

  • Breakpoint class Phone Tablet Desktop
  • col (default) 12 (stacks) 12 12
  • col-xs-6 col-md-4 6 (half) 4 (third) 4
  • col-xs-12 col-md-6 col-lg-4 12 (stacked) 6 (half) 4 (third)

Key behaviors:

The grid is 12 columns wide. col-md-6 spans 6 (half) on tablet/desktop; on phone it stacks full width.

Columns stack on small screens and spread on larger ones — automatic, no media-query CSS needed.

Compose rows by placing Columns inside a Row ; columns should sum to 12 (or they wrap).

Exam trap: the grid stacks columns on phone and spreads on larger screens automatically — no media queries or conditional visibility needed. The OutSystems UI classes handle breakpoints. The exam may show columns stacking on phone and ask why — the answer is built-in responsive breakpoints, not custom CSS.

Putting It Together

The styling stack: raw CSS in the Theme → OutSystems UI classes → custom StyleClasses (add what OutSystems UI lacks) → UI Patterns (composed blocks). The exam tests the order: use OutSystems UI first; custom CSS only when necessary. Themes cascade to all Screens; StyleClasses apply per-widget; UI Patterns are drag-and-drop composites.