csharp

page_type	description	products	languages	extensions	urlFragment
sample	This sample demonstrates how to send task notifications to a Teams channel using an Office 365 Connector.	office-teams office-365	csharp	contentType technologies createdDate samples Connectors 12/02/2022 10:21:42 PM	officedev-microsoft-teams-samples-connector-todo-notification-csharp

Microsoft Teams Sample Connector Todo

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

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 sideloading 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

4. 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".

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 sideload 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 Connector

Select Update/Create

Configured

Connector added successfully in Team's channel

Task manager portal => Create new task

Task manager portal => Task Details

Task manager portal => Task List

Notification Of Task

Update From Notification Card

Updated Notification

Further Information

• For more information on developing apps for Microsoft Teams, please review the Microsoft Teams developer documentation.
• Configure the Teams ToDo Notification connector.
• For more information about getting started with Teams, please review the following resources:
• Review Getting Started with Teams
• Review Getting Started with Bot Framework
• Review Testing your bot with Teams