Making a Canvas app become Teams & SharePoint theme aware (with the help of the PnP Enhanced Power Apps WebPart)


By detecting the theme parameter that Teams passes to Power Apps canvas apps when added as Tabs or Personal apps, we are able to make them Teams theme aware, but the same does not happen when we add a Canvas app to SharePoint using the standard Power Apps WebPart.

However, there is a free open-source sample in the Microsoft 365 PnP sp-dev-fx-webparts Repository (Enhanced Power Apps WebPart) that we can use to help achieving that. This WebPart adds extra features, such as dynamic resizing, theme awareness, and dynamic data detection.

Configuring theme variables in the Canvas App / Preparing it to be theme aware

If you have the App.OnStart function enabled in your app, use the following code on it, otherwise use it in the Screen.OnVisible event of the screen of your Start screen:

With(
    {tmpTheme: Param("theme")},
    If(
        !IsBlank(tmpTheme),//If this parameter is not blank, App is running on Teams
        Set(
            appTheme,
            {
               ...

Source link

More About This Author

michelcarlo
michelcarlo
SharePoint and Office 365 Consultant/Developer always trying to get the best from Microsoft stack (Microsoft 365/Azure/Power Platform and related stuff).

Living in Ireland since 2018, I had previously worked in Brazil as a consultant/developer for Office 365, SharePoint and related technologies for almost 10 years.

Author: michelcarlo

SharePoint and Office 365 Consultant/Developer always trying to get the best from Microsoft stack (Microsoft 365/Azure/Power Platform and related stuff). Living in Ireland since 2018, I had previously worked in Brazil as a consultant/developer for Office 365, SharePoint and related technologies for almost 10 years.

Share This Post On
Share via
Copy link
Powered by Social Snap