Building a Teams Power App Using a Custom Connector Part 1: Introduction to Using Custom Connectors in Power Apps for Microsoft Teams

Over the past few years, Microsoft Teams has become an essential tool for many companies. It has expanded from a place to have meetings to the central focus for daily work activities.

Simultaneously, Microsoft has invested in its business platform with a central data repository called Dataverse (formerly Common Data Service (CDS)). Power Apps’ dramatic expansion is also fueling the trend toward no-code applications, enabling businesses to create custom apps their workers can use where they already spend their day.

This article will dive into combining the power of Teams + Power Apps + Power Automate (formerly Microsoft Flow) to create a custom application. Our app will display and publish data to the popular Meetup service, helping employees coordinate in-person or virtual events within their Teams tabs.

You don’t need any specific coding experience or previous experience with Power Apps and Power Automate to follow this tutorial, but you’ll need a paid subscription to Power Automate to get the most out of this demonstration. You can sign up to enjoy all of Power Automate’s features free for 30 days.

In the first article, we’ll create our Power App in Teams then build and set up the custom connector. In later articles, we’ll read and display Meetup data in our Power App, edit the data, and write it back to the app. First, let’s explore some of the tools we’ll use.

Tools to Use

We’ll use a few different Microsoft tools to create our app. Combining these helps us get the most out of Microsoft Teams and makes it easier for end-users to coordinate events.

Dataverse

The Dataverse is your data storage. It looks and behaves like SQL Server tables. Note that the Teams Dataverse and your Office 365 Dataverse are currently different environments that don’t talk to each other.

Power Apps

As professional developers, no-code may not at first seem appealing to us. Still, we bring deep insights as to what the no-code is doing and, in many cases, deliver solutions to our customers at a fraction of the cost of a fully custom development. Power Apps is a quick way to give our clients the functions they request, and it’s easy for them to build on the app’s base and make changes.

Power Automate

Power Automate enables background and on-demand processing. The main component is called Flows. Flows allow you to perform actions based on data or connector triggers, scheduled tasks, or manual action.

For example, you can trigger a flow when someone adds a new record to a data table. Or, perhaps every day at 5:00 PM, you want to check for a file. You can schedule that task. You can also tie a flow to a button to start it manually.

Installing Power Apps in Teams

To start creating our app, we need to install the Power Apps application into our Teams environment. On the bottom of the left navigation bar in Teams, we see Apps.

If you have not explored Power Apps yet, you may be amazed what apps are already available for you to use. There is even a Starbucks app you can load into your Teams to simplify your daily coffee run.

In our case, we search for "Power Apps," and the Power Apps by Microsoft Corporation tile should come up in the first position:

When we click on the tile, we get more information, including the permissions we wish to grant this app. We click on the Add button to start the installation.

Back in the Teams left navigation, we click on the ellipse (…) to bring up recent apps. We should see Power Apps with a New bubble. We right-click on this icon, click Pin, and Power Apps is now on the left navigation bar in Teams.

Creating a Power App

We next create a new app by clicking Power Apps in the left navigation. A dialog box displays asking us to select a team.

After we select our team, we click on the Create button to proceed. Now we name our app (for example, "Meetup Teams App") and Save it.

The app displays in Recent apps. We click on the app name (for example, Meetup Teams App) to open it.

The new app is currently a CustomGallerySample App. The app has a "screen 1" that we won’t use and will delete later.

Creating a Data Table

In a future article, we’ll explore getting data from an external source. For now, we’ll just create a table and manually populate it with some data.

To get started, we click on the Create new table button in the Power Apps Data tab and name the table "MeetingList." The advanced tab also displays the Plural table name (for example, "MeetingLists"), which we can change. Power Apps will use the plural name when required.

These actions create a new table in the team’s Dataverse (formerly Common Data Service (CDS)). If you’re familiar with Microsoft CRM, you’ll see standard fields in the base table like createdon, modifiedon, and more.

We next click Create to proceed.

Now we see a table designer that enables us to add various kinds of fields. Here, we’ll be working with meeting listings from Meetup.com and the .NET Foundation’s meetings.

We could create a simple data flow to capture some data and create a matching table, but we’ll do it manually to keep the example simple.

The meetup meeting structure has many fields and sub-objects, but we’ll focus on a few. Below is a section of JSON showing the meeting data. Note that this is using the currently available version of the Meetup API. They’re in the process of transitioning to a GraphQL API interface.

For now, we can get a list of meetings from any Meetup group. In this case, we’re using the .NET Virtual User Group meetup.

We can use curl, Postman, Fiddler, or even our browser to fetch a set of meetings. To simplify the example, we’ll take a subset of fields:

"id": "276852555",
"name": "Embracing gRPC in .NET by Irina Scurtu",
"local_date": "2021-03-30",
"local_time": "09:00",
"utc_offset": -25200000,
"link": "https://www.meetup.com/dotnet-virtual-user-group/events/276852555/",
"description": "<p>....</p> "

The table starts with a default required Name field, which stores the meeting topic. We’ll add the other columns as text with the default length except:

• utc_offset -> number
• link -> url
• description –> text length 4000 (the max)

We now have the following table definition:

To give us something to work with, we’ll add two rows of meeting data manually to get this:

Designing the Screen

Next, we select New Screen and select blank, then rename this screen "Meetups." On the bottom left, there is a Screens selection box. At this point, we have two screens. When we are on the new screen, we click the + button on the left navigation to bring up a list of components we can add to the screen. To make it simple, we select Table and choose the MeetingList data for the data source:

Next, we edit the table format to resize the grid, change header names, and hide the ID field. After we click on the Preview button in the upper right, we see how the table will look in the app:

Before we publish this app to Teams, let’s go back and do some cleanup. We click on the Tree view button, select Screen 1 (the original default screen), and Delete it.

Now, we click Publish To Teams, which brings up the dialog below:

Before we publish, we might want to click Edit details to bring up the app settings screen. At the very least, we might want to add a description. We can also change the icon and background colors, and add other design features:

When we finish making our adjustments, we click Back then the Publish to Teams button to proceed. Clicking Publish to Teams displays the Add to channel dialog to select the channel where we will publish the app.

Using the App

After we publish our app, we must then install the app into the user interface. Our app will appear as a tab in Teams to the right of any existing tabs. To install the app, we click on the + button to the right of a tab, which brings up the Add a tab dialog.

Then, we click Power Apps to display a list of our Power Apps. We find and select Meetup Teams App, then click the Save button.

The Meetup Teams App should now appear as a tab on the channel where we installed it. Now we click on the app to display our meeting table.

Teams Power App versus Office Power App

The Teams Power App implementation is entirely separate from the Power Apps in the Power Apps hub, although they are part of the same Microsoft 365 account. The data, connectors, and more are also separate. This enables each group using Teams, for example, different businesses or departments, to keep their information separate and private. It is also possible to upgrade your Teams environment to full "Dataverse" if you need to fully integrate the team with other enterprise resources.

Next Steps

Extending Teams to include tabs with data and interaction specific to your team is an effective way to boost productivity. Power Apps provide a no-code approach that domain experts will appreciate and business users will find easy to adjust.

This article is a brief introduction to using Power Apps Teams. There’s much more to learn! Discover more about Teams Power Apps or continue to the second article in this series to learn how to bring outside data into your app, automatically populating your Meetup Teams app with relevant information about upcoming events.