OutSystems & Indexed DB

Rui Barbosa
3 min readJun 17, 2021
Photo by Maksym Kaharlytskyi on Unsplash

OutSystems has support for some form of local storage in mobile apps for quite some time. Depending on the flavor it can be SQLite, Web SQL or Indexed DB.

In fact Indexed DB is used on the local storage for PWA applications. Check out this excellent article about that story.

However there are some use cases not yet covered. Web REACTive apps, No-SQL databases or the ability to store JavaScript objects.

All of them are supported by Indexed DB.

There are a couple of components related to Indexed DB on the forge:

Indexed DB and Web API Indexed DB (go check them out).

The first one seems to be an implementation of the popular Jake Archibald IDB JavaScript library and the second one a raw direct implementation of the Web API Indexed DB (with some “promisification”).

Web API Indexed DB, does have the advantage of using a (web)block on its implementation making the IndexedDB events available to your app. However it is so low level that you are advised to create some sort of abstraction layer between your application and IndexedDB for your specific data implementation.

In other words folks, this is not as easy as dropping an aggregate on your code.

Building an app with Web API Indexed DB

So we start by defining the structure of our data and since this is no-sql we can do things like:

We also have a traditional flat table to load this data so the sync method look like this:

What is that Customer Object Store RW?

(I’m glad you asked)

In order to get, set, delete or update an object from IndexedDB you need a transaction specifying all the target objects and the mode (“Customer” and read/write in this case). Only after obtaining a transaction you can request the Object Store.

Fetching all Customers into a paginated list

A paginated list needs to know the start index, the max records and the total count. Like an aggregate we need to take control of how to pass these data pages into our list. Something like this:

Of course the list sort must be implemented manually.

Fetching & Saving a single Customer

Check out this example on the forge.

Maybe that is not that difficult after all at least for this simple use case. But if you want to use join, aggregate functions or complex filters this will get much more complex really fast. See some examples here.

All in all, Indexed DB is a nice feature to have on our tool belt, explore these components from the forge.

… and go build those apps.

--

--