The document discusses implementing a responsive UI that interacts with real-time databases, specifically using Firebase. It covers topics such as event-driven responses, integration with other applications, and use cases like real-time communication and collaboration. Key components include the Firebase Realtime Database, event handling, and improvements in user experience through synchronization of data.

1. | Responsive UI with Realtime Databases
Responsive UI with
Realtime Databases
How to interact your User Interface to data
changes?

2. | Responsive UI with Realtime Databases| Responsive UI with RealTime Databases
Martijn Habraken
Business Unit Manager | Transfer Solutions
@
in
martijn.habraken@transfer-solutions.com
/martijnhabraken

3. | Responsive UI with Realtime Databases
In 20 minutes you should learn
more about:
● Firebase Realtime Database;
● Set-up in Google Cloud
Console;
● Use of Firebase components
in OutSystems;
● What’s already available in the
OutSystems Forge;

4. | Responsive UI with Realtime Databases
Firebase
The Firebase Realtime Database is a cloud-
hosted database. Data is stored as JSON
and synchronized in realtime to every
connected client. When you build cross-
platform apps with our iOS, Android, and
JavaScript SDKs, all of your clients share one
Realtime Database instance and
automatically receive updates with the
newest data.

5. | Responsive UI with Realtime Databases
Use cases
● Realtime Communication;
■ Chat;
● Realtime Collaboration;
● Realtime Integration;
● Offline cache;
● Multi device applications;

6. | Responsive UI with Realtime Databases

7. | Responsive UI with Realtime Databases| Change session name in master slide
Process

8. | Responsive UI with Realtime Databases
Event
A event occurs, your
application should
response to this event
without the user having
to take any action.
Save JSON Record
The event saves a record
in the Firebase Realtime
Database. This record is
saved in JSON this is a
Key : Value structure.
Listener Activated
The page that should
respond to this event
should have a listener
that is now activated.
Response
It’s up to you how you
want to respond:
● Redirect the user to
another page;
● Refresh an
Aggregate / SQL;
● Show / Hide specific
information;
● Or anything else...

9. | Responsive UI with Realtime Databases
Event
An event can be triggered by
different sources.
● OutSystems Application
■ Other User;
■ Other Application;
● Webhook;
● Other Integration;
● (Light)-BPT Process;

10. | Responsive UI with Realtime Databases
Save JSON Record

11. | Responsive UI with Realtime Databases
Listener Activated

12. | Responsive UI with Realtime Databases
Response
OnNotify…
● Redirect the user to another
page;
● Refresh an Aggregate / SQL;
● Show / Hide specific
information;
● Or anything else...

13. | Responsive UI with Realtime Databases| Change session name in master slide
Demo

14. | Integrate OutSystems with Office 365| Integrate OutSystems with Office 365
Please visit our other presentations
Oct 29. 15:30 - The 4 Layer Canvas in Practise (Marlies Quaadgras)
Oct 30. 13:50 - Integrate with Office 365 (Martijn Habraken)
Oct 30. 14:35 - Responsive UI With Realtime database (Martijn Habraken)
Oct 30. 15:30 - Enter the O-Zone: OutSystems & Oracle (Matthieu de
Graaf)
Oct 30. 15:30 - Unattended OutSystems Installation (Herman Slange &
Nicolay Moot)

15. | Responsive UI with Realtime Databases
Thank You!
@
in
martijn.habraken@transfer-solutions
/martijnhabraken