Build Teams connectors

Microsoft Teams connector is Model-View-Controller (MVC) sample task management application and generated using the ASP.NET web application template. Most of the code is related to either basic MVC configuration or task management system. You can add your existing Office 365 Connector or build a new one within Teams.

Types of connector codes

ConnectorController.cs: Set up and save actions.
TaskController.cs: Create and update actions.

Key features of Microsoft Teams connector

Simulates real task management system.
Allows users to create and view tasks.
Generates content randomly.
Simulates notification to be sent to Microsoft Teams channel.

This step-by-step guide helps you to create and test a connector in Microsoft Teams. You'll see the following output:

introduction image

Prerequisites

10 minutes remaining

Ensure you install the following tools and set up your development environment:

Microsoft Teams with valid account
Latest version of Visual Studio
Latest version of ngrok (only for devbox testing) or any equivalent tunneling solution

Note

After downloading ngrok, sign up and install authtoken.

Set up local environment

9 minutes remaining

Open Microsoft Teams Samples.
Select Code.
From the dropdown menu, select Open with GitHub Desktop.
Select Clone.

Enable developer preview

8 minutes remaining

Enable uploading of apps in the admin console of your tenant.
1. Sign in to Microsoft 365 admin center with your admin credentials.
2. In the left panel, select Show All.
3. Select Teams.
In the left panel, select Teams apps.
Select Setup policies.
Select Global.
Toggle Upload custom apps to On position.
Select Save.

Your test tenant can permit custom app sideloading.

Tip

The sideloading takes some time to become active.
Go to Microsoft Teams.
From the upper right corner of your Teams interface, select ....
Select About.
Select Developer preview.
Select Switch to developer preview.

Configure your connector

7 minutes remaining

Go to TeamsToDoAppconnector.sln in cloned repository.
Use ngrok or Command prompt to create a tunnel to your locally running web server's publicly available HTTPS endpoints. Run the following command in ngrok:
```
ngrok http --host-header=localhost 3978
```
Tip

If you encounter ERR_NGROK_4018, follow the steps, as displayed in the command prompt to sign-up and authenticate ngrok. Then run the ngrok http --host-header=localhost 3978 command.
Go to Connector Developer Portal.
Select New Connector.
Enter the following details to register a new connector:
- Connector name
- Logo
- Short description of your app (10 words or less)
- Detailed description of what your Connector does (3-5 sentences)
- Company website
- Configuration page for your Connector as https://[BASE_URI]/connector/setup
- Valid domain as https Base URL
- Select Yes to enable the action on connector card
- Actions URL as https://[BASE_URI]/Task/Update
- Select I accept the terms and conditions of the App Developer Agreement
- Select Save
You've successfully registered a new connector. The window appears with registered connector ID.

Tip

Save the Connector ID for future reference.
Select TeamsToDoAppConnector.csproj file from TeamsToDoAppConnector folder.
Open in Visual Studio.
Replace the configuration.appSettings.BaseUrl variable with ngrok https forwarding url.
Press F5 to run the project. A web page opens.

Test connector in Microsoft Teams

6 minutes remaining

In your cloned repository, go to csharp > TeamsToDoAppConnector > TeamsAppPackages.
Create a .zip with the following files that are present in the Manifest folder:
- manifest.json
- icon-outline.png
- icon-color.png
Go to Microsoft Teams.
In the left panel, select Store > Manage your apps.
Select Upload a custom app.
Select Open to upload the .zip file that you created in the Manifest folder.
Select Add to a team.
Select the team or channel name from the list.
Select Set up a connector.
In the left panel, search Teams ToDo Notification connector in search bar and select Configure.
Select either Created or Updated on the registration page and select Save.

After configuration, you can see notification in channel with link to Task Manager Portal.
Go to Task Manager Portal.
Select Create New.
Enter the new task details:
- Title
- Description
- Assign To
Select Save.

The message card appears in registered Teams channel.

Tip

You can try the actionable buttons available on the message card.