Build a Todo List

Mobile App
Hands-on Exercise

Revision Nov 2021 1.0

Get your
environment ready!
Start your development studio
Create Your First Mobile App

Developing mobile apps with

OutSystems is easy. If you have an Excel
file containing your data, you can import
it into a database and quickly create a
mobile app that enables you to check and
manage your data on the go.

3
Create Your First Mobile App
To create a mobile app with data that's imported from an Excel file, you need to:

1. Create a database model, and import the data from the Excel file into the database
2. Create a screen that lists the data from the database
3. Create a screen that enables you to create new records, and update existing ones
4. Implement functionality to delete records from the database
5. Test the application on your mobile device.

Let's do this! In this example we'll use a sample Excel file with to-do task information, and we'll create a
simple task management mobile app.

4
Create a Mobile App
Create a Mobile App
Let's create a new task management mobile app. Do the following in Service Studio:

Select New Application.

6
Create a Mobile App
Select From scratch and click NEXT.

7
Create a Mobile App
Choose the Phone App template and click NEXT.

8
Create a Mobile App
Name the app To Do and click CREATE APP. Service Studio opens app details for you to
add your first module.

9
Create a Mobile App
In the app detail screen, confirm the
following and click CREATE
MODULE:

The name of the module is ToDo

The module type is Phone App.

An application contains one or more modules,

different parts of the application can be
encapsulated in a module. A module is where you
design the data model, implement the logic, and
design the UI of your application.

10
Create a database
table from an Excel
file
Create a database table from an Excel file
OutSystems stores your application data in a relational database. This means that the
first step in creating an application is defining the data model.

To do this, we are going to use an Excel file that already contains the following task
information:

● Description
● Due Date
● Is Active

12
Create a database table from an Excel file
1. In the ToDo module,
open the Data tab on
the top right-hand
corner.
2. Right-click the Entities
folder, choose Import
New Entities from
Excel.
3. Select the sample file
Tasks.xlsx

13
Create a database table from an Excel file
When importing an Excel file, OutSystems creates a database table (called an Entity in
OutSystems) with the necessary columns (called Attributes in OutSystems) to store the
data in the database.

Behind the scenes, OutSystems also creates logic to import each row in the Excel file
into a corresponding database record. After publishing your application, the background
logic populates your database with the data from the Excel file.

In this tutorial we're only storing the data in the server database, but for offline usage,
it's also possible to store the data locally and offline in mobile devices using Local
Storage.
14
Create a screen to
list tasks
Now we can create a screen that lists all of the
tasks.
Create a screen to list tasks
1. Open the Interface tab
on the top right-hand
corner, and double-click
MainFlow under UI
Flows.
2. Then, drag a Screen
from the Toolbox to an
empty area in the Main
Editor window.
3. Choose the Empty
template, name your
screen Tasks and click
Create Screen.

16
Create a screen to list tasks
Drag the Task entity from the Data tab to the Content placeholder of the mobile screen that is displayed in
the Main Editor window.

17
Create a screen to list tasks
This updates the Tasks to include a list that initially displays 20 tasks and automatically loads more tasks
when the user scrolls to the end of the list.

18
Create a screen to
edit tasks
Creating a screen to edit the records is as fast as
creating a list screen.
Create a screen to edit tasks
Right-click the title of the first task in the list, click Link to > (New Screen), choose the Empty template,
name your screen TaskDetail and click Create Screen.

20
Create a screen to edit tasks
This links the title of the tasks to a newly created screen. We will use this new screen to edit the tasks, but
for that we will need a form:

Drag a Form widget from

the Toolbox to the
Content placeholder in
the TaskDetail mobile
screen.

21
Create a screen to edit tasks

Drag the Task entity from

the Data tab to the
previously created Form
Widget.

22
Create a screen to edit tasks
Now we will define the logic that runs when the end users press the Save button:

1. Double-click an empty area of the

Save button to define the logic
associated with the button. This will
create a new screen action named
SaveOnClick.

2. In the Data tab, expand the Task

entity and drag the
CreateOrUpdateTask entity action to
the True branch of the If.

3. Set the Source property to

GetTaskById.List.Current.

4. Drag the screen Tasks from the

Interface tab to the End node so
that the user is redirected back to the
main screen after saving a task. 23
Allow adding tasks
Allow adding tasks
We want to enable the end users to add new tasks from the list screen by linking to the screen that is
already used to edit tasks:

In the Interface tab,

double-click the Tasks to open
the list screen.

Drag an Icon widget from the

Toolbox to the Actions
placeholder in the top
right-hand corner of the screen
and select the plus icon.

25
Allow adding tasks

Right-click the plus icon and

choose Link >
MainFlow\TaskDetail.

26
Allow completing
tasks
Allow completing tasks
Now let's add the functionality to mark tasks as complete. Let's implement that by deleting the completed
tasks:

Click the item of the list and

then, on the Toolbar, click
Swipe Left Action.

In the newly created List

Action, replace the text
"Action" with "Done".

28
Allow completing tasks
Double-click an empty area of
the List Action to define the
logic associated with the Swipe
Left Action.

In the Data tab, expand the

Task entity and drag
DeleteTask entity action
available under the entity Task
in the Data tab to the flow of
the Swipe Left Action.

Set the Id property to

GetTasks.List.Current.Task.Id.
29
Allow completing tasks

Drag Refresh Data from the

Toolbox to the action Flow,
after the DeleteTask action,
and select the aggregate
GetTasks to refresh the
available tasks in the screen.

30
Test your Mobile
App
Test your Mobile App
At this stage we test the mobile app. Click the 1-Click Publish button to publish the application to your
environment.

32
Test your Mobile App
When the application is deployed, click the Open in Browser button to test your application in a browser
(Chrome and Safari are supported).

33
Test your Mobile App on your device
1. Navigate to the Distribute tab in Service Studio. 3. Scan QR Code from using your mobile phone
2. Enable Distribute as PWA 4. Add App to homescreen (See next screen)

1
3

34
Congratulations
You have successfully built a mobile app!
OutSystems Jump
Start Workshop
This material is owned by OutSystems and may only be used in the ways described in this Copyright Notice:
You may take temporary copies necessary to read this document
You may print a single copy of this material for personal use
You must not change any of this material or remove any part of any copyright notice
You must not distribute this material in any shape or form