Microsoft Teams Sample Connector Todo

Browse code

This sample provides a comprehensive guide to building an Office 365 Connector that sends task notifications to a Microsoft Teams channel. The app simulates a task management system where users can create, view, and update tasks, showcasing how to send notifications through connectors to enhance productivity in Teams.

Included Features

  • Connectors

Interaction with bot

Connector_Todo

Prerequisites

The minimum prerequisites to run this sample are:

  • The latest update of Visual Studio. You can download the community version here for free.

  • An Office 365 account with access to Microsoft Teams, with uploading enabled.

  • .NET Core SDK version 6.0.

    determine dotnet version

    dotnet --version

  • dev tunnel or Ngrok (For local environment testing) latest version (any other tunneling software can also be used)

  • Teams Microsoft Teams is installed and you have an account

Note: some features in the sample require that you using Public Developer Preview mode in Microsoft Teams.

Setup

Note these instructions are for running the sample on your local machine.

  1. Run ngrok - point to port 3978

    ngrok http 3978 --host-header="localhost:3978"

    Alternatively, you can also use the dev tunnels. Please follow Create and host a dev tunnel and host the tunnel with anonymous user access command as shown below:

    devtunnel host -p 3978 --allow-anonymous

  2. Clone the repository

    git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git

  3. If you are using Visual Studio

  • Launch Visual Studio
  • File -> Open Folder
  • Navigate to samples/connector-todo-notification/csharp folder
  • Select TeamsToDoAppConnector.sln solution file

Note The main connector code is found here:

  • ConnectorController.cs - Setup & Save actions
  • TaskController.cs - Create & Update actions
  1. Configure your own connector :

Note:The below gif file shows a simple implementation of a connector registration implementation. It also sends a connector card to the registered connector via a process triggered "externally". Connector_Configuration

  1. Register a new connector in the Connector Developer Portal

  2. Fill in all the basic details such as name, logo, descriptions etc. for the new connector.

  3. For the configuration page, you'll use our sample code's setup endpoint: https://[BASE_URI]/connector/setup

  4. For Valid domains, make enter your domain's http or https URL, e.g. XXXXXXXX.ngrok-free.app.

  5. Enable the action on connector card by selecting the Yes radio button and enter the update endpoint: https://[BASE_URI]/Task/Update

  6. Click on Save. After the save completes, you will see your connector id.

  7. In the Web.config file, set the configuration.appSettings.Base_Uri variable to the ngrok https forwarding url from the above.

  8. In Visual Studio, click the play button.

  9. Now you can upload your app package and test your new connector.

  10. Once the connector is configured, you will get a notification in Team channel with link to the Task Manager application.

  11. Go to Task Manager portal and click on Create New and enter the task details and Save.

  12. You will see the MessageCard in the registered Teams channel.

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

  14. This step is specific to Teams.

    • Edit the manifest.json contained in the app manifest folder to replace your ConnectorId field in ~/app manifest/manifest.json file with your ConnectorId in connectors section.

    • Edit the manifest.json for validDomains. if you are using ngrok it would be https://1234.ngrok-free.app then your domain-name will be 1234.ngrok-free.app and if you are using dev tunnels then your domain will be 12345.devtunnels.ms.

      Example :

        "connectors": [
  {
    "connectorId": "<<CONNECTOR_ID>>",
    "configurationUrl": "https://<<VALID-DOMAIN>>/Connector/Setup"
  }
]

    • Zip up the contents of the AppManifest folder to create a manifest.zip (Make sure that zip file does not contains any subfolder otherwise you will get error while uploading your .zip package)

    • Upload the manifest.zip to Teams (In Teams Apps/Manage your apps click "Upload an app". Browse to and Open the .zip file. At the next dialog, click the Add button.)

    • Add the app to personal/team/groupChat scope (Supported scopes)

Running the sample

Setup your App in Teams Setup App

Setup Connector Setup Connector

Select Update/Create Selecting Update/Create

Configured Configured

Connector added successfully in Team's channel Task manager portal

Task manager portal => Create new task New Task Creation

Task manager portal => Task Details Task Details

Task manager portal => Task List Task List

Notification Of Task Notification Of Task

Update From Notification Card Update From Notification Card

Updated Notification Updated Message

Further Information