Creating Popups and Modal Dialogs in OutSystems

Open your screen in the Screen Editor (Interface tab → UI Flows → MainFlow → double-click your screen). In the Toolbox (left panel), search for **Popup**. The built-in Popup widget appears in the widget list. Drag it onto the screen canvas. The Popup widget appears as a bordered box in the Screen Editor. Everything inside the Popup is its content — it will appear in a centered overlay when opened at runtime. **Configure the Popup properties (Properties panel with Popup selected):** - **Name:** PopupDeleteConfirm - **TriggerWidget:** Leave empty — you will control this programmatically - **IsOpen:** Click the expression editor → select your local variable `ShowDeleteConfirm` **Add content to the Popup:** 1. Inside the Popup, drag a Container → Style Classes: `"popup-content padding-m"` 2. Inside the Container, add: - Text widget: `"Are you sure you want to delete this item?"` - Button: Label 'Delete', Style 'Danger' - Button: Label 'Cancel', Style 'Neutral' The Popup is invisible by default (IsOpen = False). It becomes visible when ShowDeleteConfirm = True.

Add two Client Actions to the screen to open and close the popup: **OpenDeleteConfirm action:** 1. Right-click the screen node (in the Interface tab) → **Add Client Action** 2. Name it `OpenDeleteConfirm` 3. In the Action Flow Editor: Start → Assign → End 4. In the Assign node, set: `ShowDeleteConfirm` = `True` **CloseDeleteConfirm action:** 1. Right-click the screen → **Add Client Action** → Name: `CloseDeleteConfirm` 2. Action flow: Start → Assign → End 3. In the Assign node, set: `ShowDeleteConfirm` = `False` **Wire up the buttons:** For the Cancel button inside the Popup: - Select it → Properties → Events → OnClick → CloseDeleteConfirm For the Delete button inside the Popup: - Select it → Events → OnClick → New Client Action → Name: `ConfirmDelete` - Action flow: Start → [call your delete Server Action] → Assign (ShowDeleteConfirm = False) → Refresh Aggregate → End For the trigger button on the main screen (the 'Delete' button next to each record): - Events → OnClick → OpenDeleteConfirm

1/* OpenDeleteConfirm Client Action flow:
2   Start
3   → Assign: ShowDeleteConfirm = True
4   → End
5
6   CloseDeleteConfirm Client Action flow:
7   Start
8   → Assign: ShowDeleteConfirm = False
9   → End
10
11   ConfirmDelete Client Action flow:
12   Start
13   → DeleteTask(TaskId: SelectedTaskId)  [Server Action]
14   → Assign: ShowDeleteConfirm = False
15   → Refresh Data: GetTasks
16   → End
17*/

When a list has multiple rows and each row has a Delete button, you need to pass the specific record's Id to the confirmation popup before the user confirms deletion. **Pattern — store the selected record ID before opening the popup:** 1. Add a second local variable to the screen: `SelectedTaskId` (Type: Task Identifier, Default: NullIdentifier()) 2. Modify the OpenDeleteConfirm Client Action to accept the task ID: - Right-click OpenDeleteConfirm → Add Input Parameter → Name: `TaskId`, Type: Task Identifier - In the Assign node, add: `SelectedTaskId` = `TaskId` (store for later use) - Keep `ShowDeleteConfirm` = `True` 3. Update the Delete button in the List widget: - The List widget iterates over GetTasks.List. Each row's Delete button should call OpenDeleteConfirm. - Select the Delete button → Events → OnClick → OpenDeleteConfirm - Set the TaskId input parameter to: `GetTasks.List.Current.Task.Id` 4. In the ConfirmDelete action, use `SelectedTaskId` when calling the Server Action: - DeleteTask(TaskId: SelectedTaskId) This pattern — store selection in a local variable, open popup, use stored variable on confirm — is the standard way to pass context to popups in OutSystems.

1/* OpenDeleteConfirm Client Action:
2   Input Parameter: TaskId (Task Identifier)
3
4   Flow:
5   Start
6   → Assign
7       SelectedTaskId = TaskId
8       ShowDeleteConfirm = True
9   → End
10
11   ConfirmDelete Client Action:
12   Start
13   → DeleteTask(TaskId: SelectedTaskId)  [Server Action]
14   → Assign: ShowDeleteConfirm = False
15   → Refresh Data: GetTasks
16   → If(DeleteTask.Success)
17       [True] → SetFeedbackMessage("Task deleted", Success)
18       [False] → SetFeedbackMessage("Error deleting task", Error)
19   → End
20*/

The OutSystems UI framework includes a **Popup_Editor** Block that provides a fully styled modal with: - Dark overlay behind the dialog - Accessible close (X) button and keyboard Escape support - Configurable title header - Scrollable content area - Proper focus management for accessibility **Adding the Popup_Editor Block:** 1. Ensure OutSystems UI dependency is referenced (Ctrl+Q → find 'OutSystemsUI' → add Popup_Editor Block) 2. In the Screen Editor, drag the **Popup_Editor** block from the Toolbox (find it under 'Interaction' or search 'Popup_Editor') 3. Place it anywhere on the screen canvas — its visual position on the canvas does not matter because it renders as an absolute-positioned overlay **Configuring Popup_Editor properties:** - **IsOpen** → expression: `ShowDeleteConfirm` - **Title** → `"Confirm Deletion"` - **EnterAnimation** → `EnterAnimation.EnterBottom` (or ScaleUp) - **UseSingleClickClose** → False (requires explicit close action) **Adding content inside Popup_Editor:** The Popup_Editor block has a Content placeholder. Drag your dialog content (Text, Buttons) into this placeholder. **Handling the OnClose event:** Popup_Editor exposes an `OnToggle` event. Set it to your CloseDeleteConfirm action — this fires when the user clicks the X button or Escape.

1/* Popup_Editor Block properties:
2   IsOpen:        ShowDeleteConfirm (local variable)
3   Title:         "Confirm Deletion"
4   EnterAnimation: EnterAnimation.EnterBottom
5   Events:
6     OnToggle:    CloseDeleteConfirm (Client Action)
7
8   Inside the Content placeholder:
9   ├─ Text: "Are you sure you want to delete '" + GetTask.Task.Title + "'?"
10   ├─ Container (row, margin-top-m)
11   │   ├─ Button: "Delete" → Style: Danger → OnClick: ConfirmDelete
12   │   └─ Button: "Cancel" → Style: Neutral → OnClick: CloseDeleteConfirm
13*/

A common pattern is a 'New Record' popup with a form, so users can create records without leaving the current screen. **Setup:** 1. Add a local variable: `ShowNewTaskPopup` (Boolean, Default: False) 2. Add a local variable: `NewTaskRecord` (Type: Task, for the form data) 3. Add a 'New Task' button on the screen: Events → OnClick → Client Action that sets ShowNewTaskPopup = True and resets NewTaskRecord to empty **Form inside Popup_Editor:** 1. Drag Popup_Editor onto the screen, bind IsOpen to ShowNewTaskPopup 2. Inside the Content placeholder, drag a **Form** widget 3. Inside the Form, add Input widgets: - Input: Variable → NewTaskRecord.Title, Mandatory: Yes - TextArea: Variable → NewTaskRecord.Description - Input (DateType): Variable → NewTaskRecord.DueDate 4. Add a 'Save' Button inside the Form → OnClick: SaveNewTask Client Action **SaveNewTask Client Action:** Start → If(Form.Valid) → [True] CreateTask (Server Action, passing NewTaskRecord) → Assign ShowNewTaskPopup = False → Refresh GetTasks aggregate → [False] End

1/* OpenNewTaskPopup Client Action:
2   Start
3   → Assign
4       NewTaskRecord = Default.Task
5       ShowNewTaskPopup = True
6   → End
7
8   SaveNewTask Client Action:
9   Start
10   → If(Form1.Valid)
11     [True]
12     → CreateTask(TaskRecord: NewTaskRecord)
13     → Assign: ShowNewTaskPopup = False
14     → Refresh Data: GetTasks
15     → End
16     [False]
17     → End
18*/