It's easy to start developing mobile apps with OutSystems. If you have an Excel file with your data, you can import it into a database and quickly create a mobile app to consult and manage your data on the go.
To create a mobile app with data imported from an Excel file, you need to:
- Create a database model, and import the data from the Excel file into the database;
- Create a screen that lists the data from the database;
- Create a screen that allows creating new records, and updating existing ones;
- Implement functionality to delete records from the database;
- Test the application on your mobile device.
Let's do this! In this example we'll use an Excel file with to-do task information, and create a simple task management mobile app.
Create a Mobile App
We are going to create a new mobile app to manage tasks. An application contains one or more modules that can be used to encapsulate different parts of the application. A module is where you design the data model, implement the logic, and design the UI of your applications.
In the Development Environment, create a new mobile app called ToDo with the Phone template and create a new module for the application.
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:
- Due Date;
- Is Active.
In the Development Environment, open the Data tab on the top right-hand corner, right-click the Entities folder, choose 'Import Entities from Excel...', and select the sample file
Todos.xlsx available by default in the directory
C:\Program Files\OutSystems\Development Environment 10.0\Service Studio\TutorialResources.
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 database record. After publishing your application that logic runs automatically, and you get your database populated with the data that is in the Excel file.
In this tutorial we're only storing the data in the server database, but it's also possible to store the data locally in mobile devices using Local Storage for offline usage.
Create a Screen to List Tasks
Now that we have to-do tasks stored on the database, we can create a screen that lists all the tasks.
Drag and drop the entity Todo from the Data tab to the Content placeholder of the mobile screen displayed in the Main Editor window.
This updates the HomeScreen to include a list that initially displays 20 tasks and automatically loads more tasks when the user scrolls to the end of the list.
Create a Screen to Edit Tasks
Creating a screen to edit records is as fast as creating a list screen.
Right-click the title of the first task in the list and choose Link to (New Screen).
This links the title of the tasks to a newly created screen. We will use this new screen to edit the tasks, but we need a form to do it:
- Drag and drop a Form widget from the toolbox to the empty area of the new mobile screen;
- Drag and drop the entity Todo from the Data tab to the form.
Now we will define the logic that runs when the end users press the Save button:
- Double-click an empty area of the button Save to define the logic associated with the button. This will create a new screen action named SaveOnClick;
- Drag and drop the entity action CreateOrUpdateTodo, available under the entity Todo in the tree to the right, to the True branch of the If in the SaveOnClick action. Set the property Id to
- Drag and drop the screen HomeScreen from the Interface tab to the End node so that the user is redirected back to the main screen after saving a task.
Allow Adding Tasks
We want to allow the end users to add new tasks from the list screen by linking to the screen that is already used to edit tasks:
- Double-click the HomeScreen in the tree of the Interface tab to open the list screen;
- Drag and drop an Icon widget from the toolbox to the Actions placeholder in the top right-hand corner of the screen and select the icon plus;
- Right-click the icon and choose Link to MainFlow\Todo.
Allow Completing Tasks
To implement an application to manage tasks we are just missing the functionality to mark tasks as complete. Let's implement that by deleting the completed tasks:
- Select an item of the list and then click Swipe Left Action on the toolbar;
Replace the text "Action" with "Done";
- Double-click an empty area of the Swipe Left area to define the logic associated with the Swipe Left Action;
Drag and drop the entity action DeleteTodo available under the entity Todo in the Data tab to the flow of the Swipe Left Action. Set the property Id to
Drag and drop the Refresh Data tool to the flow of the action and select the aggregate GetTodos to refresh the available tasks in the screen.
Test Your Mobile App
Now we are ready to test the mobile app. Click the 1-Click Publish button to publish the application to your environment.
When the application is deployed, click the Open in Browser button to test your application in a browser (Chrome and Safari are supported).
To test the application on your mobile device see Preview Your Mobile App in the Device Using OutSystems Now.