Developing a Canvas App with Offline-Capabilities

Published in

Intelliconnect Engineering

4 min readAug 8, 2023

In this article, we’ll walk you through the process of developing a canvas app with offline capabilities (an offline save option). This means that users can still interact with the app and enter data even when they are not connected to the internet. When they eventually regain internet connectivity, the app will synchronize the data with the database.

Step 1: Designing the App

Start by designing your app’s main screen. For this example, we’ll use a single-screen app.

Set the Visible property of the Container as follows:

Set the Visible property of the Sync Data and Discard button as follows:

Set the Visible property of the Edit Form as follows:

Set OnSelect of Add button as follows:

Step 2: Check the Connection

Use the Connection. Connected property to determine if the app has internet access. This property returns true when there’s internet connectivity and false when there isn’t. Based on this, you can dynamically update the Globe Icon and Background fill to inform users about their internet status.

Step 3: Storing Data Locally

To handle offline scenarios, you need to check the Connection. Connected property again. If there’s no internet access, use the Collect function to gather the data in a collection named “tempEmpList.” Additionally, create another collection named “tempDisplay” to display the data entered by the user, whether online or offline.

Use the NewForm() function to enable the user to enter the next record without manually refreshing the page.

When the user decides to close the app, set the OnSelect property of the Close button of the PopUp container as follows. This will turn off the container visibility, clear the tempDisplay collection, and use the SaveData() function to store the collected data from the offline session in a Collection File named “SyncFileEmployee.”

Step 4: Retrieving Stored Data and Syncing

In this step, we’ll ensure that the app syncs the locally stored data with the database when internet connectivity is restored. Set the OnVisible property of the screen to execute the LoadData() function, which will load the data from the “SyncFileEmployee” collection file into the tempDisplay collection. The “true” parameter ensures that no error will be thrown if the file is not found.

Next, set the OnSelect property of the Sync Data button to submit the data to the database when the app is online.

Similarly, set the OnSelect property of the Discard button to clear the tempDisplay collection and remove the data from the “SyncFileEmployee” collection file.

Conclusion

By following these steps, you can create a canvas app with an offline save option, allowing users to work seamlessly even without an internet connection. The app will store their data locally and synchronize it with the database once connectivity is restored. Remember to test your app thoroughly to ensure its smooth functioning both online and offline.

Notes:

To test your application in the Web player, you must enable SaveData, LoadData, and ClearData in your app settings.
Alternatively, you can download the Windows Power Apps player to test your application.
Ensure that you explicitly notify the user using a label or Pop up when data is stored offline or cached on their device. Please note that resetting or formatting the device will result in data loss.

References:

SaveData, LoadData, and ClearData documentation — https://learn.microsoft.com/en-us/power-platform/power-fx/reference/function-savedata-loaddata
Connection in PowerApps — https://learn.microsoft.com/en-us/power-platform/power-fx/reference/signals
Microsoft Offline Capabilities for Mobile Power Apps (For Dataverse only) — https://learn.microsoft.com/en-us/power-apps/mobile/setup-mobile-offline-classic
Video Reference — https://www.youtube.com/watch?v=NwbqdA9j8Ek
From Microsoft — https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/offline-apps