Mobile app offline do not display the product images, only text, online displays imag

I need to implement a mobile app scenario where local storage is used for offline mode. 

The app is for Reps (Sales Representative) to place orders of products, there are many products.

We do not think it a good idea to download all products and images to the device, therefore want to download only the text description and price of the product to the device. The app should be available to the Reps when they are out in the field at a customer who wants to place orders and it is offline.

How to achieve this scenario? That is when online the full product image is shown with the product, when they are offline only the text is shown?

I have gone through all mobile sync videos, and Googled a lot but cannot see that this is possible.

If you decide to use Local Storage all your screens data are loaded from Local Storage (it is linked to the Local Storage data via the aggregates in the screen), even if you are online it loads from Local Storage, so firstly you never have the latest updated data until a sync is done, secondly if you do not have the image in Local Storage you cannot get it when online as well because it always loads from Local Storage?

So one has to be able to switch between Local Storage with no image offline and Server Storage with image when online. How can I achieve this?

One cannot link between Local Storage and Server Storage, else I could have had the image still on the server and the ID of the image in the product's Local Storage, but I am sure this will not be possible, makes no sense.

If someone can please suggest how this is to be done, it is quite urgent please, I will highly appreciate if OutSystems has some suggestions here as they designed this I think they will have better insight how to implement this scenario.

I think I have an idea. Images should be stored as URL and loaded from URL, only the URL stored in database and not the image, then when offline do not show the container with the image.

Hi Elize,

There are several solutions I can think of, depending on your needs.

First, whether you read something from Local Storage, or whether you read something from Server Storage, is all up to you. Reading from Local Storage is different from reading from Server Storage, so in theory you could just wrap every data request in a Local Action, and decide in that Action to either read from Local Storage (offline) or Server Storage (online). However, apart from this being a bit labarious to program, it has the drawback of being a lot slower when online, as accessing Local Storage is obviously a lot faster as the data doesn't need to be transfered over the network. So in general, if you need fast access (and who doesn't), use Local Storage.

As for Local Storage not being in-sync with Server Storage, that's why you have all these synchronisation patterns, to alleviate that. It depends a bit on how much data is gonna change and how often: if changes are limited, syncing on starting the screen could be an option (in the background), refreshing the screen when done (and only syncing the differences).

Now, as for your specific case, it's very well possible to sync the Server-side Image Id to the Local Storage, then using a Server-side query to retrieve the image using that Id. There's no need, if Server-side the images are in the database, to go through the trouble of exposing them via a URL and consuming that. Additionally, you could think of using thumbnails or low-quality images that are synced to Local Storage, and showing them if you're offline. In that case you'd have at least some kind of visual feedback (in fact, you could just always show the thumbnail, and when online allow clicking it to retrieve the hi-res picture and show that).

Hi Kilian,

Thank you. Yes, I considered that one can use actions and then have a condition to decide where data is loaded from and then load it into a local declared recordset that is linked to the screen, but for the same reasons you mention we decided this is not a good option, we do not want to contradict what OutSystems intended with their design for optimal data retrieval, also for future changes and maintenance this will become a nightmare, so that is not an option. So I think our solution is to use URL for images (so the URL is downloaded to the local storage data and not any images) and put an if on the image block and when offline it is simply not visible, that will do the trick I think.

Hi Elize,

Like I said, I think that, unless the images are already reachable by an URL, you should not do that for several reasons. For one, you need to expose them by URL, which will take extra effort. For two, it's insecure, as URLs can't be protected. Last, if you ever have the need to change the URL to e.g. a different domain, you're apps first need to resync all the URLs, which will mean a lot of updates (for each article!). Is there a reason for not using the server-side Image Id, and storing that in the Local Storage?