Check our blog post The Next Generation of Web Apps to read more about Reactive Web Apps!
Developing Reactive Web Apps with OutSystems is fast. If you have an Excel file containing your data, you can import it into a database and quickly create a Reactive Web App that enables you to check and manage your data on the go.
To create a Reactive Web App with data that's 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 enables you to create new records, and update existing ones
- Implement functionality to delete records from the database
- Test the application in a browser
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 Reactive Web App.
Create a Reactive Web App
Let's create a new task management app. An app 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 app.
In Service Studio, click New Application, choose Reactive Web App, and name it
In the new To Do application, create a Web App module, named
Click Create Module to create a module and open it for editing.
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 app 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
ToDo module, open the Data tab on the top right-hand corner, right-click the Entities folder, choose Import New Entities from Excel, and select the sample file
Tasks.xlsx available by default in the directory
C:\Program Files\OutSystems\Development Environment 11.0\Service Studio\TutorialResources. Click Import in the dialog to confirm.
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.
Create a screen to show tasks
Now we can create a screen that shows all of the tasks.
Open the Interface tab on the top right-hand corner, and double-click MainFlow under UI Flows. Then, drag a Screen from the Toolbox to an empty area in the Main Editor window. Choose the Empty template, name your screen
Tasks and click Create Screen.
Drag the Task entity from the Data tab to the Content placeholder of the screen in the Main Editor window.
This automatically creates a table with the pagination support.
Create a screen to edit tasks
Creating a screen to edit the records is as fast as creating a table.
Right-click the title of the first task in the row, click Link to > (New Screen), choose the Empty template, name your screen
TaskDetail and click Create Screen.
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 screen.
Drag the Task entity from the Data tab to the previously created Form.
Now we will define the logic that runs when the end users press the Save button:
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.
In the Data tab, expand the Task entity and drag the CreateOrUpdateTask entity action to the True branch of the If. Set the Source property to
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.
Allow completing tasks
Now let's add the functionality to mark tasks as complete. Let's implement that by deleting the completed tasks:
Delete the check mark icon in the last column of the table. Drag a Button Widget and enter "Done" in the Text property of the button.
Double-click an empty area of the button to define the logic associated with the click.
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 DoneOnClick Action. Set the Id property to
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.
Allow adding tasks
We also want to enable the end users to add new tasks from the screen with all tasks by linking to the screen that is already used to edit tasks:
In the Interface tab, double-click the Tasks to open the screen with all tasks.
Drag a Button Widget from the Toolbox to the Actions placeholder in the top right-hand corner of the screen. Change the label of the button to "Add".
Right-click the button selector and choose Link > MainFlow\TaskDetail.
Test your Reactive Web App
At this stage we test our Reactive Web 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.