How to create a Connector with configuration loaded from web solution for Microsoft Teams

Question

I am trying to create a connector for Microsoft Teams. I have completed the registration in the connectors developer dashboard and downloaded the manifest.json.

I am able to sideload the connector manifest in Teams and also find the connector in the list of connectors.

When I select the connector and want to configure it, all data I have entererd is shown correctly.

My problem is - I want to let the user of the connector select configuration parameters depending on their subscription on my site (like in the Trello connector).

For example, the user has created several areas in his subscription on my website. I want to let them select one of the regions from which he wants to get updates in a Microsoft Teams conversation.

From the documentation, I am not able to find where or how to load the configuration parameters from my website into the connector configuration dialog. My manifest looks like this (URLs and IDs replaced)

 {
  "$schema": "https://statics.teams.microsoft.com/sdk/v1.0/manifest/MicrosoftTeams.schema.json",
  "manifestVersion": "1.0",
  "id": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
  "version": "1.0",
  "packageName": "com.example.org",
  "developer": {
    "name": "Developer Company",
    "websiteUrl": "https://www.example.com",
    "privacyUrl": "https://www.example.com",
    "termsOfUseUrl": "https://www.example.com"
  },
  "description": {
    "full": "The connector sends notifications ....",
    "short": "Lorem ipsum dolor sit amet"
  },
  "icons": {
    "outline": "https://outlook.office.com/connectors/Content/Images/IncomingWebhook.jpg",
    "color": "https://outlook.office.com/connectors/Content/Images/IncomingWebhook.jpg"
  },
   "configurableTabs": [
        {
            "configurationUrl": "https://teamsnodesample.azurewebsites.net/tabs/configure",
            "canUpdateConfiguration": true,
            "scopes": [
                "team"
            ]
        }
    ],
  "connectors": [
    {
      "connectorId": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
      "scopes": [
        "team"
      ]
    }
  ],
  "name": {
    "full": "My Organisation",
    "short": "My Organisation"
  },
  "accentColor": "#FFFFFF",
  "needsIdentity": "true"
}

The user experience of the trello connector configuration looks like illustrated in the following screenshots. I can't figure out how to integrate all the dialogs of the connector configuration.

Answer 1

1) Once you register a connector in connector developer dashboard and set the Landing page for your users for Groups or Teams and Redirect URLs properly(for e.g. ngrok end point of your service running), there is an option next to Microsoft teams to copy code and download Manifest. I see you have used the manifest to sideload in the teams. The copy code gives a link which you can use in Landing page html inside your code.

2) Click on configure next to your connector and it will pop up a window which shows visit site to install -> . This should take you to the Landing page specified while registering the connector on the portal. If you have put the code in lading page then you should be able to see a button connect to office365 connector. When you click on it it will take you to the redirect URL. You should be able to call your api's and display any configuration experience to the user.

Also this code sample might be useful : https://github.com/OfficeDev/microsoft-teams-sample-get-started/tree/master/Node/connector