How to implement copresence for canvas app end users

In many scenarios, when using a Power Apps, it can be useful to have visibility of other users that are consulting the same record. However, this isn’t a built-in feature available in canvas apps, only model-driven apps. You can only see other makers who are editing the canvas app while in Power Apps Studio, yet once you publish it for the end users, Microsoft does not offer such presence indicators today.

In this blog post we’ll explore how low-code app makers could build something that closely resembles the copresence feature in the Power Apps products. We will do this for a canvas app that leverages Microsoft Dataverse, using Power Fx functions to retrieve and update information of its current users.

Example app and collaboration scenario

The inspiration for building a copresence feature came from a customer case where, initially, only the creator of the record could access it – read, write, delete. Later, access was extended to other users, called editors. I thought it would be interesting if we could create a visual Copresence (also called Co-authoring in Microsoft 365) into an App.

Let’s use an investment approval app as an example for the feature. The original solution is quite simple:

• A Dataverse table for Investments
• A canvas app that uses a vertical gallery on the left listing all investments, and the investment details on the main screen.
• On the top right corner, we want to add a visual element of other users consulting the same investment.

You might be familiar with a comparable feature, co-authoring in Microsoft 365, which is accessible for corporate files located in SharePoint and OneDrive.

How can we implement the Copresence feature?

Create a new Dataverse table named Copresence with two text fields: Record ID and User ID (we could also use lookups fields for the Investment and User tables respectively). This is how the table looks in a model-driven app meant for the admins:

Back to the canvas app, on the main screen, add a new carousel horizontal gallery, named galCopresences with an image control.

The data source of the gallery must contain all records where the Record ID matches the Investment and the User is not the current user:

Filter(Copresences, 'User ID' <> User And 'Record ID' = Text(galInvestments.Selected.Investment))

For the image of the gallery, let’s use the Office365User connector to get the photo of the User:

If(IsBlankOrError(Office365Users.UserPhotoV2(ThisItem.'User ID')), SampleImage, Office365Users.UserPhotoV2(ThisItem.'User ID'))

And we can add a Tooltip text like:

If(IsBlankOrError(Office365Users.UserProfile(ThisItem.'User ID').DisplayName),"", Office365Users.UserProfile(ThisItem.'User ID').DisplayName & " has this investment open.")

Every time an investment is selected on the left gallery, a record is added or updated on the copresence table for that user. Add the following code OnSelect of the left gallery:

Patch(Copresences, 
    If(IsBlank(LookUp(Copresences, 'User ID' = User)),
        Defaults(Copresences), 
        LookUp(Copresences, 'User ID' = User)
    ),
    {'Record ID':g_Investment.Investment, 'User ID': User}
)

Instead of using User().Email multiple times, you can create a Formula like:
User = User().Email;

Also, to ensure that the Copresence table is empty when users enters the app, add the following code to OnStart of the App (check here the best practices related to OnStart utilization by Timo Pertilä).

RemoveIf(Copresences, 'User ID' = User)

Finally, and because the data sources do not refresh automatically, let’s add a Timer control on the form. Change the Duration to 5000 (5s for this example) and add to the OnTimerEnd:

Refresh(Copresences)

Conclusions

In this post, we have seen how to implement a copresence feature in canvas apps, inspired by the co-authoring features in Microsoft 365 and Power Apps Studio. This feature allows us to see other users who are consulting the same record in a canvas app, using a carousel gallery and a copresence table in Dataverse.

We have also learned how to use the Office365Users connector to get the user photo and profile, and how to use a timer control to refresh the data sources. This feature can be useful in many scenarios where we want to enhance the collaboration and visibility of users in canvas apps.

For more tips and tricks on desiging, building and managing Power Apps, check out our earlier canvas apps blog posts.