Publish Model-driven Power Apps to Microsoft Teams

Using Power Apps inside Microsoft Teams channels is a common scenario. Be it Canvas or Model-driven apps, you can add them as a channel tab just like any other content source supported by Teams. This is a good method for distributing apps that are relevant within a specific context that the particular team/channel is meant for.

Recently Microsoft published a new Docs article that describes how you can embed a model-driven app as a personal app in Teams. This would be a better option if instead of a narrow targeted use case, such as a support request for a particular service, you are looking at a broader business application that drives several important processes in your organization.

A CRM application would be a good example. These are often larger power user oriented experiences aimed at supporting many different record types (tables) and a high volume of business records (rows) – meaning a Model-driven app is a better fit for them than a Canvas app. At Forward Forever, the app we use for this purpose is called “Business Foward”. Let’s see how we can publish this in the Teams app bar.

Prepare the Teams app package

Let’s start by opening the Power Apps Maker portal. We can select our Model-driven app and choose “Add to Teams”:

Instead of the default “Add to Teams” button, let’s choose the “Download app” option. This will give us a .zip file. It’s important to understand that this doesn’t have anything to do with the solution .zip packages you probably are using for building your Model-driven Power Apps. This file is the Teams app package, which upon extraction will show us three files inside: manifest.json, outline.png, color.png.

Why should we bother unzipping this file? Because the default settings that the “Downoad app” dialog in Power Apps Maker portal gives us aren’t exactly ideal. For instance, the short & full description text are both the same. They are taken from the Model-driven app module designer, but you might well want to adjust these to be more descriptive when publishing your app to the Teams app store that has nicer presentation options than Power Apps or Dynamics 365 app menus.

Let’s open the manifest.json file in Visual Studio Code and explore the JSON file. You can find the full manifest schema reference on MS Docs. For now, we’ll settle for updating the description texts:

Next, let’s examine the image files. These actually represent a more critical part of the user experience of apps in Microsoft Teams. For Model-driven Power Apps, they may look just terrible by default when used as an app icon.

This is because the image that we use for customizing the theme of a Model-driven Power App is traditionally very different than the icons we want to show up inside Microsoft Teams. The theme images are usually a rectangle banner for the Nav bar, not meant to be rendered as a square app icon. At least in our case, both of the generated .png files in the default app manifest were completely unfit for publishing.

Time to create new image files then. Let’s have a look at the app icons specification in the “Create your app package” documentation page for Microsoft Teams. First we need an outline icon with 32×32 pixels and a white outline on a transparent background, as this will be displayed on the Teams app bar. The color icon is more relaxed in its requirements, this could almost be any 192*192 PNG file with its existing colors. After a bit of work in our image editor of choice, now we’re ready to re-zip our app package.

If you don’t want to edit the JSON file and the icon image files directly, you could always import the .zip file into Microsoft Teams Developer Portal. The options relevant for our Model-driven app are pretty much the same here, though, so the developer portal GUI doesn’t offer that much added value for what we want to accomplish.

Add the app to Teams

Next we’ll move to the Microsoft Teams admin center. Instead of uploading the custom app only for ourselves, let’s take the admin route and bring this app to all the target users in a controlled way.

Under Teams apps – Manage apps, we can click “Upload” and give the modified zip file. We can already see our color.png icon rendered nicely when searching for the app in the catalog:

After this step, we can shortly find our app in the Microsoft Teams app store by searching its name – or navigating to the “built for your org” section. Description text, publisher, everything looks nice. Great, let’s add it as our personal app!

Now we can pin the app into the position where we want it in our Teams client. The Model-driven Power App will give us access to all the features included in its navigation, displayed inside the Teams frame. Now we don’t need to hunt down this app from some specific channel tab, instead we have global, persistent access to it whenver working in Teams.

Install the app to other Teams users

How about the other users in our organization? Do we need to instruct everyone to go to the Teams app store and search for our Power App from there?

Luckily there are better ways to distribute apps inside Teams. We can leverage the app setup policies in Microsoft Teams and add our Power Apps into the list of installed apps for a specific group of users.

We could also pin the app for all users right away. It’s good to keep in mind that performing this will remove the personal pins of users who have customized their Teams app bar. So, you might get some angry users asking for “hey, where’s my app X” if you choose to go down this path.

Now all users who are included within the scope of the Teams app setup policy will see our Model-driven Power App in their list of installed apps.

The next time someone comes to you asking “where do I find that app X again”, instead of instructing them to find a tab of a specific channel inside a certain team, you can just say “you already have it in your Teams apps list”.

Interested in reading our latest Power Platform blog posts?

You’re welcome to subscribe to our email newsletter: Forward Forever News. Max 1 email per month, with a curated list of latest insights and articles on Power Apps, Power Automate, Power BI.

Check it out