So here I am back with a more concise summary.
Saving anything to local storage might seem to be overwhelming… Now let’s again start with a few basic concepts. Data records are in fact JSON-stringifiable objects. So they have a schema of property name and property value. They look like this:
{
firstProperty: valueOfFirstProperty,
secondProperty: valueOfSecondProperty,
}
Usually, when we talk about a data record, it has at least one property: the “id” or “key”. This property is required to identify a data record inside a collection.
When a data resource is connected (Firebase, Airtable, etc…) we get the data via these “id” or “key”. (Or if we get a list of records then the method is a little bit different of course…)
To understand the local storage it is important to make a clear differentiation between the “On-device storage” that can be configured in the “Data” tab of Composer and the so-called “Persistent storage”.
In fact, the “On-device storage” is also saved in the “Persistent storage”, but it has been designed to represent a similar structure to any other data resource for easier data management. This is best used for data records with several data records (lists)…
If we have some unique data that doesn’t have different separate items we can and should use the “Set item to storage” and “Get item from storage” logic flows (installable from the marketplace as mentioned in a post above).
These flows allow us, the developer to specify a “key” or “id” to the data that we want to save. Also, they can store anything that is JSON-stringifiable. Any variable that is defined in Composer’s variable view is JSON-stringifiable, thus all of them can be set to storage. It can be an object, a list of objects, a list of texts, or anything that you can imagine and define. BUT there is one important step. To convert that data to a JSON string upon saving to local storage and to “parse” the JSON string when loading the data.
*The term “parse” means to iterate through the JSON string and create a variable based on the schema of the string. (To put it in an easy-to-understand manner…)
So how would you go about this in Composer? The following screenshots should help:
-
Create the variable that You want to save:
-
Add the logic “Set item to storage” (in this case it is under a button tap, but can be really anywhere…)
In this step set the “key” to any name that You want to have this resource to be saved as. I called it “setting”.
And finally set the value data to store to this formula:
ENCODE_JSON(appVars.settings)
Of course, change your variable inside the formula. This will create a JSON string that can be easily stored.
- Now let’s get this data back. I get this on my global canvas, but this also can be placed anywhere.
This step consists of two logic flows. The first is to get the data from the storage with Your specified “key” (In our case “setting”). And the other step is to set this data to a variable that is used inside the app… Inside the value of that variable use this formula:
DECODE_JSON(outputs["Get item from storage"].item)
This will throw 2 warnings, but since we have the same schema for the variable that we used to Set item and Get item we can ignore those.
And this is how You save some unique data to the persistent storage and retrieve that.
Note, that this also has some limitations (I am not sure what are those, but in most cases, we would not exceed those…)
As for the Airtable “caching” question… Well. It is just some design question. Is it a native app only?
If yes, then you could use this “Set item” approach to save even a list of data records in the following way:
- “Get record collection” from Airtbale
- “Set item to storage” -
ENCODE_JSON(outputs["Get record collection"].records)
This applies only to the data records. For images, You can make use of the “Create file/directory” flows in the following way:
- Do an IF flow to check if the directory exists (use the “File/directory exists” flow)
- if yes then use the “Download files” flow to save the image into that directory (keep in mind that in this case, you will somehow need to manage the new path to the image in your image components…)
- if the directory doesn’t exist then you’ll need to use the “Create file/directory flow” to first create the directory and then go back to the “yes” branch…
Hope this all helps at least a little bit…
