OutSystems UI Patterns: Accordion, Tabs, Cards, and More

OutSystems UI is pre-installed in the OutSystems environment, but your module must reference it to use its patterns in the Toolbox. **Verify the reference:** 1. Press Ctrl+Q to open Manage Dependencies 2. Search for 'OutSystemsUI' in the producer modules list 3. If it appears with elements checked, you are set. If not checked, check the Blocks you need and click Apply. **Finding patterns in the Toolbox:** Open a screen in the Screen Editor (double-click a screen in Interface tab). The Toolbox on the left shows widgets and blocks grouped by category. With OutSystems UI referenced, new categories appear: - **Content:** Accordion, Alert, Badge, BlankSlate, Card, CardSectioned, Section, Tag, Tooltip - **Data:** Gallery, DataGrid, ProgressBar, Rating, Timeline, Counter - **Interaction:** Carousel, DatePicker, Dropdown ServerSide, RangeSlider, Tabs, Search, ToggleButton, Video - **Navigation:** Breadcrumbs, Pagination, Sidebar, Steps, Wizard - **Utilities:** Animate, MasterDetail, Spinner Search the Toolbox by typing the pattern name (e.g., 'Accordion') in the Toolbox search field.

The Accordion pattern creates expandable/collapsible sections — ideal for FAQs, settings panels, and grouped data. **Adding the Accordion:** 1. In the Toolbox, find and drag **AccordionItem** (not the full Accordion wrapper — each item is added individually) onto the screen canvas 2. Drag multiple AccordionItems and stack them vertically, or use the Accordion block wrapper that manages a group of items **AccordionItem Input Parameters:** - **Title** — the header text displayed at all times (Text expression) - **StartsOpen** — `True` to expand by default, `False` to start collapsed (Boolean) - **IsOpen** — bind to a local Boolean variable if you need programmatic control - **ExtendedClass** — additional CSS classes for customization **AccordionItem Event:** - **OnToggle** — fires when user expands or collapses. Wire to a Client Action to run logic when toggle happens. **Dynamic AccordionItem titles from data:** Place AccordionItem blocks inside a List widget bound to an Aggregate, then set Title to `List.Current.FAQ.Question` and the Content placeholder content to match. **Widget tree for an FAQ section:**

1/* Widget tree:
2   List (Source: GetFAQs.List)
3     └─ AccordionItem
4           Title: GetFAQs.List.Current.FAQ.Question
5           StartsOpen: False
6           ExtendedClass: "faq-item"
7           └─ [Content placeholder]
8               └─ Text: GetFAQs.List.Current.FAQ.Answer
9*/
10
11/* AccordionItem OnToggle Client Action (optional):
12   Input: IsOpen (Boolean)
13
14   Use to track which section is open:
15   Start → Assign: LastOpenedQuestion = Title → End
16*/

Tabs organize related content into switchable panels without page navigation. **Adding Tabs:** 1. Drag the **Tabs** block from the Toolbox onto the screen 2. By default it contains TabsHeaderItem and TabsContentItem placeholders **Tabs Input Parameters:** - **ActiveTab** — bind to a local Integer variable (`ActiveTabIndex`, Default: 1). Tab 1 is active when value = 1. - **JustifyHeaders** — `True` to make tabs equal width and fill container - **Position** — `Position.Top`, `Position.Bottom`, `Position.Left`, `Position.Right` - **ExtendedClass** — additional CSS classes **Tabs Event:** - **OnTabChange** — fires with the new tab index. Wire to a Client Action. **Setting up tab content:** 1. Inside the Tabs block, the TabsHeaderItem contains the tab label 2. The TabsContentItem contains the tab's content 3. Duplicate these placeholder groups for each tab you need 4. Set each TabsHeaderItem's Label to the tab name **Wiring OnTabChange:** Create `OnTabChange` Client Action with Input `TabIndex` (Integer): Start → Assign: ActiveTabIndex = TabIndex → [optional: refresh Aggregate for new tab] → End

1/* Local variable:
2   ActiveTabIndex: Integer = 1
3
4   Tabs block properties:
5   ActiveTab: ActiveTabIndex
6   Position: Position.Top
7   JustifyHeaders: True
8   OnTabChange → OnTabChange(TabIndex: NewTabIndex)
9
10   Widget tree:
11   Tabs (ActiveTab: ActiveTabIndex)
12     ├─ TabsHeaderItem (Label: "Overview")
13     ├─ TabsContentItem
14     │   └─ [Overview content]
15     ├─ TabsHeaderItem (Label: "Details")
16     ├─ TabsContentItem
17     │   └─ [Details content]
18     └─ TabsHeaderItem (Label: "History")
19         [third content item]
20
21   OnTabChange Client Action:
22   Start → Assign: ActiveTabIndex = TabIndex → End
23*/

The **Card** pattern provides a styled container for displaying individual records. The **Gallery** pattern creates a responsive grid of cards. **Basic Card setup:** 1. Drag a **Card** block onto the screen 2. The Card has placeholder sections: Image, Header, Content, Footer 3. Drag widgets into each placeholder (Image widget in Image, Text in Header, etc.) **Card Input Parameters:** - **Clickable** — `True` makes the entire card a clickable surface (adds hover effect) - **ExtendedClass** — CSS classes for custom styling **Gallery for a card grid:** 1. Drag **Gallery** block onto the screen 2. Gallery Input Parameters: - **ColumnsInDesktop** — number of columns on desktop (e.g., 3) - **ColumnsInTablet** — columns on tablet (e.g., 2) - **ColumnsInPhone** — columns on phone (e.g., 1) - **GutterSize** — space between cards: `GutterSize.Base`, `GutterSize.Small`, `GutterSize.Large` 3. Inside the Gallery, place a **List** widget (Source: your Aggregate) 4. Inside the List, place a **Card** block 5. Inside the Card, fill each placeholder with data from the current List item **Handling card click navigation:** Set Card's Clickable to True → Card's OnClick → Client Action → Navigate to detail screen with the record Id as input parameter.

1/* Gallery + Card widget tree:
2   Gallery
3     ColumnsInDesktop: 3
4     ColumnsInTablet: 2
5     ColumnsInPhone: 1
6     GutterSize: GutterSize.Base
7     └─ List (Source: GetProducts.List)
8           └─ Card
9                 Clickable: True
10                 OnClick → OpenProductDetail(ProductId: GetProducts.List.Current.Product.Id)
11                 ├─ [Image placeholder]
12                 │   └─ Image (URL: GetProducts.List.Current.Product.ImageUrl)
13                 ├─ [Header placeholder]
14                 │   └─ Text: GetProducts.List.Current.Product.Name
15                 ├─ [Content placeholder]
16                 │   └─ Text: GetProducts.List.Current.Product.Description
17                 └─ [Footer placeholder]
18                     └─ Text: "$" + DecimalToText(GetProducts.List.Current.Product.Price)
19*/

Every OutSystems UI pattern block has an **ExtendedClass** input parameter. This is a Text field that accepts additional CSS class names to apply to the pattern's root element. **Common uses of ExtendedClass:** - Add custom class from your theme: `"product-card shadow-lg"` - Apply utility classes: `"margin-bottom-m background-primary"` - Multiple classes: `"card-custom margin-top-s border-none"` **The ExtendedClass pattern:** When you set ExtendedClass to `"my-custom-class"`, the pattern renders with both its own OutSystems UI class and your custom class: `<div class="osui-card my-custom-class">` **CSS overrides for patterns:** In your Theme's Style Sheet Editor, target the combined class: **Dynamic ExtendedClass expression:** ExtendedClass accepts expressions, enabling dynamic class application: `If(Product.IsNew, "card-featured", "card-standard")` **Full override of a pattern's internal styles:** Target the internal class names (inspect in browser DevTools): `.osui-tabs__tab` — individual tab item `.osui-tabs__content` — tab content panel `.osui-accordion__item.is-open` — open accordion item

1/* ExtendedClass value examples:
2
3   Static:
4   "product-card"
5
6   Multiple classes:
7   "product-card shadow-elevation-2"
8
9   Dynamic (expression editor):
10   If(Product.IsFeatured, "card-featured card-highlighted", "card-standard")
11
12   In your Application Theme CSS:
13   .product-card {
14     border: 2px solid var(--color-brand-primary);
15     transition: transform 0.2s ease;
16   }
17
18   .product-card:hover {
19     transform: translateY(-4px);
20     box-shadow: 0 8px 24px rgba(0,0,0,0.12);
21   }
22
23   .card-featured {
24     border-color: var(--color-brand-accent);
25     background: linear-gradient(135deg, #FFF 0%, #FEF3C7 100%);
26   }
27
28   /* Override OutSystems UI tab active indicator color */
29   .osui-tabs__tab.is-active {
30     border-bottom-color: var(--color-brand-primary) !important;
31     color: var(--color-brand-primary) !important;
32   }
33*/