PowerApps: Working Offline

 Hello Friends,

Welcome back with another post on PowerApps. As we know, that PowerApps generally works in connected mode (internet connectivity). But sometimes, we face a situation where fields associates does not find any network connectivity in remote area. In such scenarios, this app does not work. For such scenarios, there is a workaround. We can check the network connectivity and if there is no network, then the app should remains working using mobile local cache and as soon as the network gets available, the app should sync data with data source. Now, the question is, how do we do it? Let's try-

1. The steps we will follow are-
1. The OnStart function of App will be used to check if the network connection is available. If Yes, we will load the data from data source and update the same in local cache otherwise we will load the data from local cache.
2. We will add a simple Text box with a Button to insert new records. If the connection is available, it will be saved in data source otherwise it will be saved in local cache.
3. We will add a Timer control which will repeatedly check if the connection is available or not. If available, it will sync the data saved in local cache to data source. 
2. So, let's start-
3. First of all, we will create a list and insert one record. I have created a list named "DataForOffilneApp" and inserted one record.
4. 
5. Open the PowerApps platform and create a new PowerApp.
6. 
7. By default we will get a blank screen provided in this app.
8. Now click on Data link from left navigation and add the list we have created above.
9. 
10. Click on App from Tree view and select the OnStart function.
11. 
12. Now, write below code in the function box provided:-

13. If(
        Connection.Connected,
        ClearCollect(
            collDataForOfflineApp,
            DataForOfflineApp
        ),
        ClearCollect(
            collDataForOfflineApp,
            []
        );
        LoadData(
            collDataForOfflineApp,
            "OfflineCacheData"
        );
        
    );
    ClearData("OfflineCacheData");
    SaveData(
        collDataForOfflineApp,
        "OfflineCacheData"
    );
    

14. Let me explain this code (map the explanation with highlighted color)-
1. First of all, we are checking if the network connection is available.
2. If available, then we are saving the data from data source to a local collection.
3. If not available then we are clearing the local collection and then we are loading the it with the data saved in local cache with key as "OfflineCacheData".
4. Then we will clearing the local cache.
5. Lastly, we will be saving (basically updating irrespective of connection available or not) the local collection data into cache.
15. Now add a gallery and assign local collection "collDataForOfflineApp' as it's data source with Layout as "Title" only.
16. 
17. As the App >> OnStart does not work in Desktop mode, therefore I have added a button and added the same code for OnSelect property of button.
18. Now play the app and click on button to load the collection. Once done. Stop the play mode and come back to development mode.
19. Here again click on gallery and click on Edit link for fields mapping. Map the filed Title to get displayed dat in gallery.
20. 
21. One part of the functionality is completed. (I had changed the display text of button to Load Data)
22. Now we will work on inserting the data in connected/disconnected mode.
23. For this, we have added a label, textbox and a button.
24. 
25. Add below code in function window for OnSelect property of Insert button.

26. If(
        Connection.Connected,
        Patch(
            DataForOfflineApp,
            Defaults(DataForOfflineApp),
            {Title: TextInput1.Text}
        );
        ClearCollect(
            collDataForOfflineApp,
            DataForOfflineApp
        );
        Reset(TextInput1);
        ,
        Collect(
            colOfflineTempDataInsert,
            {Title: TextInput1.Text}
        );
        Reset(TextInput1);
        UpdateContext({varPostOfflineData: true});
        
    );
    

27. Let's discuss the code-

1. If network connection is available then insert the data directly into data source.
2. Reload the local collection.
3. If network connection is not available, then insert the data in a local collection which will be synced to data source once the network will be available.
4. If network connection is not available, then set a local variable to true which will be used to check and sync the local collection to data source once the network will be available.
28. This was the second part of functionality. Now start the third and last part - a timer which will sync the data upon network connection availability.
29. Add a timer control. Set the Duration to 60000 miliseconds (by default it is set to the same value). Set "Repeat" and "Auto Start" property to true. Now place the below code in function box for OnTimerStart property-

30. If(
        Connection.Connected,
        If(
            varPostOfflineData,
            UpdateContext({varPostOfflineData: false});
            ForAll(
                colOfflineTempDataInsert,
                Patch(
                    DataForOfflineApp,
                    Defaults(DataForOfflineApp),
                    {Title: Title}
                )
            );
            ClearCollect(
                colOfflineTempDataInsert,
                []
            );
        )
    )
    

31. Let's explain-
32. First of all we are checking if the network connection is available. If YES, then we are checking if we have something to sync (by checking the value of varPostOfflineData variable). If all result to true, then we reset the variable so that on next timer schedule, the process should get skipped as dat is going to sync here.
33. Then we are inserting all the offline records to the data source and lastly, we are resetting the temp collection to blank.
34. Now publish the app and execute on mobile.
35. Currently, I am having one record. I will insert one more record in connected mode. Then I will disconnect the connection and insert one more record. Then I will re-establish the connection and wait for data to get sync. Let's try-
36. Inserting one record in connected mode-
37. 
38. 
    
    
39. Now, I had disconnected the network connection and inserted a record. It didn't get reflected on screen. Waited for the timer to get completed and restarted. Then I reconnected the network.
40. 
41. As you can see the screenshot, the timer is at 29 seconds. I just waited for it's completion. The moment it gets completed and restarted, the sync process gets started automatically and the record, I had inserted during offline mode, gets inserted in data source.
42. 
43. This way, we can achieve the offline mode functionality in PowerApps.
44. However, I personally don't recommend it in case if the data source is having huge amount of data because the performance of App as well as the device will get affected once we save this huge data in local cache.

With this, I am concluding this post.

Happy Coding !!!

Will see you again with some new topics.

Stay Safe !

Stay Healthy !