How to add offline capabilities in embedded canvas apps

Introduction to offline

A lot of apps have the requirement to be able to work offline, especially standalone canvas apps (and even model-driven apps). A lot of native apps on our mobile devices have offline capabilities. In simple words, it means that users should be able to use the app (enter new data, edit existing data etc.) even when they have no connectivity to mobile network or Wi-Fi.

Offline in embedded canvas apps

Embedded canvas apps are canvas apps inside a model-driven app. While custom pages are preferred over embedded canvas apps for most use cases, embedded canvas apps still have their place.

Traditional offline needs aren't typically expected in embedded canvas apps. However, ne use case is if a user is filling out a form or selecting a tab/option within the embedded app, if the user navigates away to a different record and comes back, the app should remember the state the user was in.

Setup

To enable offline in embedded canvas apps, the 1st step is to turn off this setting:

Once this is done, the rest is just to use SaveData/LoadData the way you would do in any canvas app.

The example I have is a form to create a phone call record from within an account record. I want the Subject, Phone number, and Description to be saved.

Here are the steps:

1. On the OnVisible of the screen, I am loading the data from cache

   LoadData(
       colPhoneCalls,
       "colPhoneCalls",
       true
   )

2. In the OnChange and Value fields of each data card of the form that I want to load from cache, I am using the following code (using the Subject datacard as an example here)
   1. 1. OnChange

         If(
             CountIf(
                 colPhoneCalls, true
             ) = 0,
             Collect(
                 colPhoneCalls,
                 {
                     Subject: Self.Value,
                     Regarding: [@ModelDrivenFormIntegration].Item
                 }
             ),
             Patch(
                 colPhoneCalls,
                 First(colPhoneCalls),
                 {
                     Subject: Self.Value,
                     Regarding: [@ModelDrivenFormIntegration].Item
                 }
             )
         );
         SaveData(
             colPhoneCalls,
             "colPhoneCalls"
         );

      2. Value

         If(
             CountRows(colPhoneCalls) > 0,
             First(colPhoneCalls).Subject,
             Parent.Default
         )

With this code, this is how the app behaves:

However, this approach doesn't cache or isn't smart enough to know which account the details were being added. So even when I go to a different account, it will show the same call details.

The last step is to clear the collection and the cache when the record is saved so it isn't available the next time a user attempts to create a new record.

Conclusion

To add offline or caching capabilities in an embedded canvas app, all you need to do is to enable an app setting and use SaveData/LoadData like how you would in a standalone canvas app.

Recent articles

1. 1. A unique app to create and manage family trees – Part 2
   2. A unique app to create and manage family trees – Part 1
   3. Changing the attachment on a note in canvas apps