Conditional Logic: If Widget, Switch Widget, and Expression Patterns

The If widget is a layout element that renders either its True branch or False branch based on a Boolean expression. It does NOT hide the element with CSS — it removes it from the DOM when False. In the Screen Editor, search the Toolbox for 'If' and drag it onto the canvas. In the Properties Panel: - Condition: enter your Boolean expression, e.g. User.IsLoggedIn The Widget Tree shows two branches inside the If widget: True Branch and False Branch. Drag UI elements into each branch. Only the branch matching the condition is rendered. Common use cases: - Show 'Admin' menu only if CheckAdminRole() = True - Show loading spinner while data fetches: GetEmployees.IsLoading - Hide empty state message: not GetEmployees.List.Empty - Conditional form sections: SelectedCountry = Entities.Country.US

1/* If widget condition examples */
2User.IsLoggedIn
3CheckAdminRole()
4not GetEmployees.List.Empty
5CurrentStep = 3
6Order.Status = Entities.OrderStatus.Pending
7SelectedCountryId <> NullIdentifier()
8GetOrders.IsLoading

In the Action Flow Editor (for both Client and Server Actions), the If node creates a binary branch. Drag 'If' from the Toolbox onto the flow between two nodes. The If node has: - Condition (Boolean expression): set in Properties Panel - True connector (right side): flow when condition is True - False connector (bottom): flow when condition is False Example — save or navigate based on form validity: Start → If: Form.Valid → [True] SaveEmployee Server Action → Destination → [False] End Nesting: connect multiple If nodes in sequence. The False branch of one If can connect to the next If node for an else-if chain: Start → If: Status = 'Active' → [True] ... → [False] → If: Status = 'Pending' → [True] ... → [False] → end default case

1/* Action flow with nested If nodes */
2Start
3  --> If: Order.TotalAmount > 1000
4       [True]  --> Assign: DiscountRate = 0.15
5       [False] --> If: Order.TotalAmount > 500
6                    [True]  --> Assign: DiscountRate = 0.10
7                    [False] --> Assign: DiscountRate = 0.05
8  --> Assign: FinalAmount = Order.TotalAmount * (1 - DiscountRate)
9  --> End

The If() function returns one of two values based on a condition. Use it anywhere an expression is expected — widget properties, Assign node values, Aggregate filter conditions, FormatDate arguments. Syntax: If(BooleanCondition, TrueValue, FalseValue) Critical rule: TrueValue and FalseValue MUST be the same data type. OutSystems does not auto-cast — passing a Text True value and an Integer False value causes a TrueChange type error. Examples: - If(Employee.IsActive, "Active", "Inactive") → Text - If(Order.Amount > 100, Order.Amount * 0.9, Order.Amount) → Decimal - If(User.Age >= 18, True, False) → same as just User.Age >= 18 - If(GetOrder.IsLoading, "Loading...", IntegerToText(GetOrder.List.Length) + " orders") → Text

1/* If() expression examples */
2
3/* Text conditional */
4If(Employee.IsActive, "Active", "Inactive")
5
6/* Decimal conditional */
7If(Order.Amount > 100, Order.Amount * 0.9, Order.Amount)
8
9/* Nested If() - equivalent to else-if */
10If(Age >= 65, "Senior", If(Age >= 18, "Adult", "Minor"))
11
12/* Used in FormatDate */
13FormatDate(If(Order.ShippedDate = NullDate(), CurrDate(), Order.ShippedDate), "dd/MM/yyyy")
14
15/* Used in Aggregate filter */
16Order.Status = If(ShowAllOrders, Entities.OrderStatus.All, Entities.OrderStatus.Pending)
17
18/* Conditional CSS class */
19If(IsSelected, "selected active", "")

The Switch node is the OutSystems equivalent of a switch/case statement. Use it when you have three or more branches based on the same value. Drag 'Switch' from the Toolbox into an action flow. In the Properties Panel, add cases: - Click '+' for each case - Case 1: Expression = Order.Status = Entities.OrderStatus.Pending, connect to 'Send pending reminder' logic - Case 2: Expression = Order.Status = Entities.OrderStatus.Shipped, connect to 'Send tracking email' logic - Case 3: Expression = Order.Status = Entities.OrderStatus.Cancelled, connect to 'Send cancellation notice' logic - Otherwise (default): connect to logging or no-op End Switch evaluates cases top-to-bottom and takes the FIRST match. Unlike some languages, there is no fallthrough — only one branch executes. When to use Switch over nested Ifs: - 3+ branches on the same variable → Switch - 2 branches or unrelated conditions → If node chain

1/* Switch node cases - evaluates top to bottom, first match wins */
2Case 1: Order.Status = Entities.OrderStatus.Pending
3        --> Send pending reminder email
4Case 2: Order.Status = Entities.OrderStatus.Shipped
5        --> Send tracking number SMS
6Case 3: Order.Status = Entities.OrderStatus.Cancelled
7        --> Send cancellation refund notice
8Otherwise:
9        --> LogMessage: "Unhandled order status: " + Order.Status

The If widget handles conditional rendering, but you can also apply conditional logic to any widget property that accepts an expression: - Style Classes: If(IsHighlighted, "highlight-row", "") — applies a CSS class conditionally - Enabled: SelectedCountryId <> NullIdentifier() — disables a button until a precondition is met - Mandatory: If(RequiresPhone, True, False) — makes a field mandatory based on context - Value in Expression widget: If(Employee.IsActive, "Active", "Inactive") — text content For Button Enabled, set the Enabled expression in the Button's Properties Panel: Enabled = Form.Valid and SelectedCountryId <> NullIdentifier() This creates a reactive UI where the button only becomes clickable when the form is valid and a country is selected — no Client Action needed.

1/* Widget property conditional expressions */
2
3/* Button Enabled */
4Form.Valid and SelectedCountryId <> NullIdentifier()
5
6/* Input Mandatory */
7If(DeliveryMethod = Entities.DeliveryMethod.Home, True, False)
8
9/* Dynamic CSS class */
10If(Row.IsOverdue, "row-overdue text-danger", "")
11
12/* List item background color via Style Class */
13If(Mod(GetEmployees.List.CurrentRowNumber, 2) = 0, "row-even", "row-odd")