In this blog post, we will see how to perfectly visually integrate Power Apps into Teams clients. I will show you how to take advantage of the new Teams context parameters passed to Power Apps to set the App colors and language.

Microsoft rolled-out last month (May 2020) a bunch a cool features to go deeper in Power Apps integration in Teams clients. The principal feature is the ability for your Power Apps to be aware of the Teams context the apps are used into.

The concept

Power Apps can be integrated in Teams clients as tabs. They can be Teams tabs (within a channel) or personal tabs (without any Team context, as a standalone app that can be pinned on the left vertical menu). The concept of this kind of Teams apps, is that a web content is published in Teams with an “iframe” mechanism. So basically your Power Apps are just played in Teams client the exact same way they would be within a browser if you use a web link. Microsoft took advantage of this system to make Teams send HTTP parameters to the Power Apps exectued into tabs.

If we use Apps Studio to get Power Apps tab URL we can see all these parameters :

So we will just get into our Power Apps few parameters with the Param() function, so our app will be aware of the Teams client theme and language used by the user.

The theme is retrieve by the “theme” parameter, and the language is retrieved by the “locale” parameter.

You can find here the list of all avaible parameters.

Setting up the Power App colors

Being aware of the theme used by the user for his Teams client is an opportunity to set our App colors, so we will make it use the same colors and it will look like as it is part of the Teams client itself.

We will use a Power Apps variable to set 4 kind of colors :

• The app background color
• The app zones/areas color
• The app text color
• Teams “purple” color

On the App.OnStart property, so when the App starts, use the following formulas :

Set(gloAppSettings,
{

AppBackgroundColor:

Switch(Param("theme"),

"dark",RGBA(32,31,31,1),

"contrast",RGBA(0,0,0,1),

RGBA(243,242,241,1)),

AppAreasColor:

Switch(Param("theme"),

"dark",RGBA(45,44,44,1),

"contrast",RGBA(0,0,0,1),

RGBA(255,255,255,1)),

AppTextColor:

Switch(Param("theme"),

"dark",White,

"contrast",White,

Black),

TeamsColor:RGBA(98,100,167,1)

}

)


Then you can set your controls color and fill properties :

Having a full width responsive app

By default, Power Apps are resized when embedded in some container, such as a Teams tabs. That means the whole app gets smaller if the teams client is reduced. More over, the app centered and over a dark grey background.

Adapt the language

Teams context paramters include the “locale” which is the language configured for the Teams client. This is awesome to have this info in our Power Apps, so we can adapt the language of our app to the prefered language of the user. 

For the demo, I will define a Collection in my App that will contain the label translation. In real scenario, you would prefer having a SharePoint list to store these translation, so you can very easily manage your app labels and language without having to update the Power App.

In the Power Apps designer, we don’t have HTTP parameters, so it is good to set a default value. This default value is also very usefull so your app has a default language if it is not used within a Teams context.

You can see that I add the “AppLanguage” attribute to my gloAppSettings Power Apps variable, that stores the “locale” parameter retreived from Teams. Then I use this attribute to define my app language.

Set(gloAppSettings,
        {
        AppLanguage:Param("locale")
        }
);<br><br>ClearCollect(colLabelsTranslation,<br><br>{code:"TextColorBlack", locale:"fr-fr", Label:"Le texte de l'application est écrit en noir"},<br><br>{code:"TextColorBlack", locale:"en-us", Label:"The app text is written in black"},<br><br>{code:"TextColorWhite", locale:"fr-fr", Label:"Le text de l'application est écrit en blanc"},<br><br>{code:"TextColorWhite", locale:"en-us", Label:"The app text is written in white"}<br><br>);<br><br>Set(gloAppLanguage,<br><br>If(!IsBlank(gloAppSettings.AppLanguage),<br><br>gloAppSettings.AppLanguage,<br><br>"en-us"<br><br>)

Now that we have all the infos required to make a multilingual app, let’s do it !
I just have to set my Label.Text value to a LookUp in my colLabelTranslation collection :

LookUp(

colLabelsTranslation,

If(

gloAppSettings.AppTextColor = Color.White,

code="TextColorWhite",

code="TextColorBlack"

) && locale=gloAppLanguage,

Label

)

Find more great content here!

About the Author:

Hi ! I’m Théophile Chin-Nin, Microsoft 365 & Power Platform Architect and Microsoft Business Application MVP, from Nantes, France.

Reference:

Chin-Nin, T. (2020). Deeply visually integrate Power Apps in Teams. Available at: https://tchinnin.com/deeply-visually-integrate-power-apps-in-teams/ [Accessed: 2nd March 2021].

Find more great Power Platform content here.