Skip to content

Latest commit

 

History

History
150 lines (113 loc) · 6.84 KB

README.md

File metadata and controls

150 lines (113 loc) · 6.84 KB
Raw
page_type description products languages extensions urlFragment
sample
Sample which demonstrates an Office 365 Connector which generates and sends notifications for teams channel.
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 application simulates a real task management system and allows users to create and view tasks. The content is randomly generated to simulate how notification can be sent into Microsoft Teams channel using connector.

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

  • .NET Core SDK version 6.0.

    determine dotnet version

    dotnet --version

  • Ngrok (For local environment testing) Latest (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"

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

      Example :

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

    • Zip up the contents of the app manifest 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