PowerApps – Notify users of updates to your apps

Currently there is no out of the box functionality available in PowerApps to ensure that your users’ are running the latest version of your app. When you publish a new version there is no guarantee that your users’ will get this straight away.

This is because the PowerApps IOS/Android apps cache the apps (what a mouthful!) when they are opened/downloaded. I have also seen this caching in desktop browsers too. This cache eventually expires and when a user opens the app again, they will get the new version. I’m unsure as to how long this cache takes to expire and have reached out internally at Microsoft to try and find out.

We do of course have the automatic version numbers that are created when we save/publish apps but there is no way to retrieve these or check against them.

To get the latest version of an app, a user would need to do the following – 

1. Close the app
2. Re-open the app
3. Close the app
4. Re-open the app
   

Clearly we need a way to version control our apps and notify the user that they are not using the latest published version.

When researching into how long it takes for this cache to expire, I came across this post on the PowerApps Community Forums where forum member ‘Kristoff’ has posted a brilliant solution to notify users when they are running an older version of your app. Kudos to Kristoff on a brilliant and remarkably simple solution!

I’ve implemented Kristoff’s solution but swapped the Notify() banner for a custom dialog. There is a good blog post on the PowerApps official blog on creating dialogs if you want to read more. I will explain below how my dialog is built however, as it is less complex to implement than the one above.

At the bottom of this post you will find a link to a sample app I’ve created that includes all of the functionality below. Feel free to download and import this into your environments and customise/re-use as you see fit (If you want to re-post the sample app I would appreciate credit). 

Now let’s get on with the fun part – how to build it!

Step 1 – Creating a Version Control list

1. Create a SharePoint list or CDS custom entity in which to store the latest version number of your PowerApp. I called mine ‘Versions’.
2. Add a new field called ‘VersionNumber’ (keep this as text if you want to use semantic versioning e.g. 0.0.1 rather than 0.1).  
3. Create a new record as follows: ‘Title’ = ‘Version’, ‘VersionNumber = ‘1.0’ or whatever version number you would like.
4. Add this list/CDS entity as a data source in your app. 

Note – when you import my app you will need to remove my data source and add your own. 

Step 2 – Creating the dialog

In the app package I’ve provided you will find a component called ‘Dialog’. This provides a reusable dialog which you can use in your apps and customise to your hearts content.

If you want to use the dialog in an app that does not live in a preview environment (Components are still in preview), then you can easily copy the controls and the logic and paste directly into your screens. You will of course need to change the properties and use variables instead – I’m happy to provide a copy of the dialog that is not a component, please get in touch if you’d like this.

To try and keep this blog post shorter, I will summarise how the dialog is built and leave you to take a look at the solution. Feel free to contact me if you need some guidance or have questions.

The dialog comprises of the following:

• A button used as a header with the DisplayMode set to ‘View’ so it cannot be clicked. I’ve used a button so that the dialog can have rounded corners which in my opinion looks nicer and more modern.
• A button at the bottom which in our case has the OnSelect property set to call the Exit() function. This will close the app. If you are reusing this dialog elsewhere for another purpose you can of course change this OnSelect property as required (Note that custom properties do not support passing in functions at the moment). OR if you simply want an info dialog, you could delete this button and add a close (‘X’) icon allowing the user to close the dialog.
• A rectangle for the middle which has the Fill property set to white. 
• A ‘HTML Text’ control to display the message – I’ve used HTML text as opposed to a label in order to be able to format the text in a nicer way.
• The following custom properties:
  • Heading (Text)
  • DialogMessage (Text)
  • Button Text (Text)
• These properties are bound as follows (within the component):
  • HtmlTextMessage.HtmlText = Dialog.DialogMessage
  • ButtonDialogHeader.Text = Dialog.DialogHeading
  • ButtonDialog.Text = Dialog.ButtonText
    

The dialog component can then be added to any screen and the relevant properties set. In my case I am using variables (see the code in Step 2) and binding these to the properties of the component e.g. VersionDialog.DialogHeading = DialogHeading (where DialogHeading is my variable).

Step 2 – Adding the background overlay

In order to make our dialog stand out and fade out the rest of our screen, we need to create an overlay. This is really simple to do:

1. Insert a rectangle and drag it so it fills the entire canvas.
2. Set the Fill property to RGBA(0,0,0,.6) – feel free to experiment with the alpha value to make the overlay darker or lighter. 
3. Bring your dialog to the front so it displays over the top of the overlay.

Step 3 – Checking for the latest version

Now that we have our dialog and overlay set up, we need to perform the check for the version number when our app starts and show/hide the overlay/dialog accordingly.

1. In the ‘OnStart’ property of your start screen add the following code:

Set(
    Version,
    "1.0"
);
If
    !LookUp(
        Versions,
        Title = "Version",
        'Version Number' = Version
    ),
    Set(
        ShowDialog,
        true
    );
    Set(
        DialogHeading,
        "New version available"
    );
    Set(
        DialogMessage,
        "<center>There is a newer version of this app available.</p><p>Press 'Update' below to close the app then re-open it.</centre><p>Note: This message may appear twice until the app is updated."
    );
    Set(
        DialogButtonText,
        "Update"
    )
)

2. Set the Visible property of the dialog and the overlay to our ShowDialog variable.

What the above code is doing is performing a lookup to your version data source to check if the version field matches the value of your variable.

If a user is running an older version of your app, the variable value won’t match because the app and it’s contents are cached. Whereas data sources are not cached and this will be queried when the app starts.

Step 4 – Testing

To see it working and test the functionality, simply do the following:

1. Open the app in a browser/mobile device and close it.
2. Update the version number variable AND the version number in your SharePoint list e.g. 0.2.
3. Re-open the app – you should see the dialog.
4. Click the ‘Update’ button – this will exit the app.
5. Re-open the app – the dialog should no longer be displayed and you will see your main screen (the user is running the latest version).

To summarise – I think this is a brilliantly simple solution to provide the users with feedback and let them know there is a newer version of your app available.

Hopefully we may see some functionality in the future to configure the caching on mobile devices or an out of the box message that will notify the user natively in the PowerApps app – fingers crossed! ?

There are many ways which this can be improved including extending the version control list with release notes and pulling these through into the app to allow users to view the history – I might have a go at that next! 

Download the app package here.