OutSystems Front-End Developer Specialist flashcards

32 cards. Read the term and the definition here. The deck at the top of this page is optional.

Layout block

A reusable Block that defines the page shell (header, menu, footer, content placeholders). Screens reference it, so editing the Layout restyles every Screen that uses it.

Placeholder content

A named area inside a Layout (for example MainContent or Title) that a Screen fills with its own widgets. Placeholders let one Layout serve many Screens without duplication.

Style Sheet Editor

The OutSystems IDE editor for CSS attached to a Screen, Block, or theme. Rules placed at Screen level are scoped to that element and its children.

CSS specificity order

Inline Style attribute wins over Screen/Block stylesheet rules, which win over module theme CSS, which wins over OutSystems UI framework CSS. Equal specificity is resolved by source order.

OutSystems UI patterns

Prebuilt UI compositions such as Cards, Tabs, Gallery, and Master Detail, delivered in the OutSystems UI framework. They provide markup plus responsive behavior you customize with CSS variables.

Responsive Grid breakpoints

OutSystems Columns use device breakpoints: phone below 768px, tablet 768 to 1023px, desktop 1024px and above. Column widths are configured separately per device tab.

Reactive Web App

An OutSystems app type that renders in the browser with client-side reactivity. It targets desktop and mobile browsers and uses the same Reactive UI widgets as Mobile Apps.

Mobile App (MABS)

A native mobile app generated by the OutSystems platform, wrapping a Reactive UI. Interactions must be touch-first: no hover-only affordances, larger tap targets, native-style navigation patterns.

Theme vs Screen CSS

Theme CSS applies module-wide and belongs in a shared style module; Screen CSS applies only to that Screen and its children. Choose the narrowest scope that satisfies the requirement.

Built-in Validations

Input widget property enabling client-side checks such as Required, Integer, Decimal, Email, and Phone. They render as HTML5 attributes but must be paired with server-side validation.

Input Type property

Sets the rendered HTML input type (text, number, email, date, password). It controls mobile keyboard layout and native date pickers, so it affects usability and validation.

Image Alt Text

The accessibility text set on the Image widget. Screen readers announce it, and empty alt marks decorative images so assistive technology skips them.

Icon widget sizing

OutSystems UI icons come from an icon font and are sized with the widget's Size property. Prefer the property over ad-hoc font-size CSS so theme updates stay consistent.

CSS variable theming

OutSystems UI exposes design tokens as CSS custom properties such as --color-primary and spacing variables. Overriding them restyles components globally without editing framework stylesheets.

Avoiding !important

Use a scoped selector with higher specificity instead of !important. Overuse blocks later theme overrides, breaks encapsulation, and makes upgrades of the UI framework risky.

DevTools specificity check

Browser developer tools show which CSS rule wins and where it is defined. Use the Styles panel to find the winning theme rule before writing a scoped override.

Block encapsulation

A Block owns its own widgets and stylesheet. Styles defined inside it do not leak out, and outside CSS reaches its internals only through exposed class names or style parameters.

Style Guide module

A shared module holding themes, style sheets, and reusable UI blocks. Referencing it from multiple apps gives consistent branding and one place to change global styles.

Columns widget

The OutSystems responsive grid container. It holds Column children whose widths are set per device tab (Phone, Tablet, Desktop) to build responsive layouts.

Container widget

A layout-neutral wrapper that groups widgets and applies styles or classes. Use it to scope CSS selectors around a component without adding semantic markup.

List vs Table choice

Use List (or Gallery) for touch and mobile layouts where rows stack vertically; use Table for dense tabular data on desktop. Tables scroll poorly on narrow phone screens.

Screen lifecycle events

OnInitialize runs once when the Screen is created; OnReady runs after the DOM renders. DOM-manipulating JavaScript belongs in OnReady, because elements do not exist during OnInitialize.

JavaScript in Screens

Client-side JavaScript can be attached at Screen or Block level and runs in the browser after render. Keep DOM work in OnReady and avoid depending on internal framework markup.

Exposed class names

Widgets accept a Style Classes property that adds CSS classes to the rendered element. This is the supported hook for styling from an outer stylesheet.

Extended properties

Per-widget extra attributes such as accessibility labels, roles, and data attributes. They let you add ARIA semantics without writing custom HTML.

Accessibility roles

ARIA role and label attributes set through extended properties tell assistive technology what a widget does. Required for custom interactive components like clickable cards.

Pixel-perfect iteration loop

Render the Screen, inspect the DOM in DevTools, identify the winning rule, write a scoped override in the Screen stylesheet, then re-render and compare against the design.

ODC versus O11 styling

Both use the same CSS, themes, and OutSystems UI concepts. ODC delivers OutSystems UI through the ODC asset library; O11 installs it as a Forge dependency per module.

Feedback messages

OutSystems UI Feedback Message patterns display validation and success states. Style them via theme tokens so error, warning, and success colors stay consistent app-wide.

Popup and Modal sizing

Modal dialogs are sized with width and height properties or CSS classes, not fixed pixel CSS on inner elements. On phones, prefer full-screen modals for readability.

Font Awesome icons

The icon font bundled with OutSystems UI. Icons are referenced by name in the Icon widget; changing the icon means changing the Name property, not editing CSS content.

Style Classes property

The widget property that appends one or more CSS class names to the rendered HTML element. It is the primary, upgrade-safe way to target a widget from your stylesheet.