OutSystems Tutorial for Beginners: Build Your First App in 30 Minutes

Open Service Studio. On the home screen click 'New Application'. In the dialog select 'Reactive Web App' and click 'Next'. Enter the name 'TaskManager' and choose a color/icon. Click 'Create App'. Service Studio creates a blank application with a default module. You are now inside the Service Studio IDE with the Interface, Logic, Data, and Processes tabs visible on the right side panel.

Click the 'Data' tab in the right panel. Expand 'Entities' → 'Database'. Right-click 'Database' → 'Add Entity'. Name it 'Task' and press Enter. An 'Id' attribute is auto-created as the primary key (Long Integer, auto-increment). Now add attributes: right-click the 'Task' entity → 'Add Entity Attribute'. Name it 'Title' (Data Type: Text, Mandatory: Yes). Repeat to add 'Description' (Text, Mandatory: No), 'DueDate' (Date, Mandatory: No), and 'IsComplete' (Boolean, Mandatory: Yes, Default: False). After adding all attributes, check the TrueChange tab at the bottom — it should show zero errors.

1/* Entity: Task
2   Attributes:
3   - Id          Long Integer  (auto, PK)
4   - Title       Text          Mandatory
5   - Description Text
6   - DueDate     Date
7   - IsComplete  Boolean       Default: False
8*/

Click the 'Interface' tab in the right panel. Expand 'UI Flows' → 'MainFlow'. Now drag the 'Task' entity from the Data tab directly onto the 'MainFlow' node in the Interface tab. Service Studio displays a dialog asking which screens to generate. Select both 'Tasks' (list screen) and 'TaskDetail' (form screen for create/edit), then click 'Create Screens'. OutSystems auto-generates: a Tasks list screen with a Table widget pre-bound to a GetTasks Aggregate, and a TaskDetail screen with Input widgets pre-bound to each attribute and a Save button.

In the Interface tab, expand 'MainFlow' → 'TaskDetail'. Double-click the 'SaveTask' Client Action (shown in the screen's action list). The action flow opens in the center editor. Trace the flow: Start → If(Form.Valid) → [True] CreateOrUpdateTask (Server Action call) → If(CreateOrUpdateTask.Success) → [True] Navigate to Tasks screen → [False] Message 'Error saving'. The form validation and database write are already wired. The Server Action 'CreateOrUpdateTask' lives under Logic tab → Server Actions — double-click it to see: Start → CreateOrUpdate<Task> (Entity Action) → Assign Success = True → End.

Double-click the 'Tasks' screen to open it in the Screen Editor. In the Toolbox (left panel), drag a 'Button' widget onto the screen above the table. In the Properties panel (right side), set Label to 'New Task'. With the button selected, click the 'Events' section in Properties → 'OnClick' → 'New Client Action'. In the action flow editor that opens, drag a 'Navigate' element from the Toolbox. Set Destination to 'TaskDetail'. In the input parameter 'TaskId', set value to 'NullIdentifier()' (this tells the form to create a new record). Connect Navigate to End.

1/* Navigation action flow:
2   Start
3   → Navigate(Destination: TaskDetail, TaskId: NullIdentifier())
4   → End
5*/

Click the large '1-Click Publish' button at the top center of Service Studio. The 1-Click Publish tab at the bottom shows three stages: Upload → Compile → Deploy. Wait for all three stages to show a green checkmark (typically 20-60 seconds). When complete, the button changes to 'Open in Browser' (blue). Click 'Open in Browser'. Your Task Manager app opens in a new browser tab at your Personal Environment URL. You will see the Tasks list screen. Click 'New Task' to open the form, fill in a title, and click Save — the task appears in the list.