Canvas Apps Offline

Make your Power Apps sessions persistent when switching Teams tab!

Don't give up - make your app's state persist!
Don't give up - make your app's session persist in Teams!

Project Oakdale - Power Apps & Teams

Project Oakdale brings the low-code Power Platform capabilities straight into Microsoft Teams! With Project Oakdale, we can now create apps, flows, and chat bots, all from within Teams. To learn more about this, click here.

Problem = Nonpersistent session

Power Apps within Teams? Sounds fun right, trust me it is! Let's consider one of the OOB Project Oakdale apps - the Inspection app. Click here to install it and here to read more about it. The inspection solution consists of two apps - a user app and a manager app. The user app is for users to perform inspections and the manager app is for managers to create & edit inspection forms, review inspections, and get insights about inspection history.

Now imagine you are in the middle of an inspection and have to go to another tab within your Teams team, may be because you want to see some information in Wiki or you want to look at Planner tasks. Whatever may be the reason, imagine going out of the inspection app and then coming back to see that all of your unsaved changes have been lost! This problem can easily get out of hands if you an inspection form that has a large number of steps or if you are doing a grouped inspection where you need to perform the same inspection multiple times. That is definitely not fun! Here's a demo of how this works today:

Solution = Persistent session!

Being able to store any unsaved data in Power Apps reminds you of something, doesn't it? Offline capabilities may be? You are absolutely right! And whenever we hear offline capabilities for Power Apps, our super friendly SaveData and LoadData functions come to the rescue! The approach here is similar to making an app offline capable. At a high level, here is a summary of the approach:

  1. Store your data in collections, as much as possible
  2. On every change (e.g. OnChange of a button), update the relevant collection and save it using SaveData
  3. On the app's OnStart, load all the saved collections using LoadData
  4. If these collections have data, redirect the user to the appropriate screen or give them the option to start a new session

Here's a demo of the same inspection app after making these simple changes:

Pro tips

Session persistence on desktop

SaveData/LoadData have always worked on mobile devices but they also now work on the Teams desktop app. This is awesome because it means we can make an app session persistent on desktop as well. That being said, the allocated storage for storing data locally is limited to 1MB, which might be good enough to retain an app's state - some basic data, which screen a user was on, etc. But if your app allows users to attach images and if you try to save those locally as well, you will run out of space very soon since most images these days are bigger than 1MB. So here are few tips to ensure this behavior works as desired on desktop:

  1. If you want to store a record that has an image field, do not store the entire record. Store the GUID and do a lookup to fetch the complete record.
  2. If you are allowing users to capture/attach images in your app, disable the saving of images using SaveData if the user is not on a mobile device. To do this, identify the host client being used by the user using the following code snippet:
    Set(
        gblIsHostClientMobile,
        !(Param("hostClientType") in [
            "web",
            "desktop"
        ])
    );

    This code checks for a parameter that is available for all apps within Teams. If the value of "hostClientType" is desktop or web, it means the user isn't on a mobile device for which the possible values are android and ios. Once you have identified the host client, simply wrap the SaveData calls for images, as shown below:

    If(
        gblIsHostClientMobile,
        SaveData(
            colImages,
            "colImages"
        )
    );

Other best practices

  1. When you use LoadData, make sure you set the 3rd optional param to true. The syntax of LoadData is:
    LoadData(Collection, Name, [IgnoreNonexistentFile])

    Setting it to true suppresses the error which shows up if the file that we are trying to load doesn't exist, which will happen the 1st time anyone runs the app.

  2. One of the related function that isn't in the Power Apps Formula Reference (found here) is ClearData. It is supposed to clear the data from a local file. But based on my testing at the time of this writing, it doesn't work. To get past it, simply clear the collection first and then use SaveData:
    Clear(colImages);
    SaveData(
        colImages,
        "colImages"
    );
  3. One of the error messages that you will see if and when the storage limit is reached is "There was a problem saving your data. Name could be too long." When I first saw this error message, I thought that the file names in my SaveData/LoadData expressions were too long. So I shortened all my collection and file names and still saw the error. On further analysis, I figured that this error message tries to convey that the file might be too big or large (and not long) for the available storage space.

Summary

In summary, to allow users to resume from where they left off before they switched their Teams tab, use SaveData to store data locally and LoadData to retrieve that data. These functions are available for both mobile devices and Teams desktop app (it will not work in a browser on a desktop). The storage limit for Teams desktop app is 1MB so use caution in deciding what to save and what not to save by figuring out where a user is accessing the app from. And finally, to clear stored data, use a combination of Clear and SaveData if ClearData doesn't work.

Recent articles

  1. How to display related records in a 1:N CDS relationship!
  2. Responsiveness – how to test in the studio!
  3. Power Apps Buttons – know when to use AutoDisableOnSelect

5 thoughts on “Make your Power Apps sessions persistent when switching Teams tab!”

Leave a Reply