How to setup a connector for outlook and microsoft teams?

Question

i'm building a connector for MS Teams and Outlook. I have registered the connector on Connectors Developer Dashboard but when I sideload it on outlook and I try to configure the connector... Nothing happens in my setup page. Indeed,

microsoftTeams.settings.getSettings is not working.

Does the microsoftTeams js library works for Outlook too? If not how do I do?

It seems that Connect To Office 365 Button aren't the ongoing way to do it.

Documentation with dead links and mix between Teams & Outlook doesn't help :(

Thank you!

Edit 1:

AngularJS code called on my configuration page:

    $scope.setValidateState = function() {
        microsoftTeams.settings.setValidityState(true);
    };

    $scope.authenticate = function() {
        microsoftTeams.authentication.authenticate({
            url: isSettings.serverUrl + '/microsoft/auth-start/',
            with: 500,
            height: 800,
            successCallback: function(data) {
                $scope.isAuthenticated = data && data['accessToken'];
                localStorage.setItem("microsoft-oauth", JSON.stringify(data));
                displayConfiguration();
            },
            failureCallback: function(reason) {
                console.log(reason);
            }
        });
    };

    function displayConfiguration() {
        microsoftTeams.settings.setValidityState(true);
        microsoftTeams.settings.registerOnSaveHandler(function(saveEvent) {
            microsoftTeams.settings.setSettings({
                entityId: 'icescrum-connector-pkey-' + $scope.settings.project.pkey,
                contentUrl: isSettings.serverUrl + '/microsoft/setup/',
                configName: $scope.settings.project.name
            });
            microsoftTeams.settings.getSettings(function(settings) {
                $scope.settings.webhookUrl = settings.webhookUrl;
                console.log(settings.webhookUrl);
                saveEvent.notifySuccess();
            });
        });

        microsoftTeams.settings.getSettings(function(settings) {
            $scope.setup = !settings.configName;
            ProjectService.listByUserAndRole(Session.user.id, 'productOwner', {light: true}).then(function(projects) {
                $scope.projects = projects;
                if (settings.entityId) {
                    $scope.settings.project = _.find($scope.projects, {pkey: settings.entityId.split('icescrum-connector-pkey-')[1]});
                }
                $scope.ready = true;
            });
        });
    }

    // Init
    $scope.settings = {};
    $scope.projects = [];
    $scope.ready = false;
    var tokenData = JSON.parse(localStorage.getItem("microsoft-oauth"));
    $scope.isAuthenticated = tokenData && tokenData['accessToken'];

    microsoftTeams.initialize();

    if($scope.isAuthenticated){
        displayConfiguration();
    }

My manifest.json:

{
  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.3/MicrosoftTeams.schema.json",
  "manifestVersion": "1.3",
  "id": "a15dcb92-35af-400e-ab9b-99efda40138f",
  "version": "1.0.0",
  "packageName": "com.iceScrum2",
  "developer": {
    "name": "Developer",
    "websiteUrl": "https://www.icescrum.com",
    "privacyUrl": "https://www.icescrum.com",
    "termsOfUseUrl": "https://www.icescrum.com"
  },
  "description": {
    "full": "iceScrum connector",
    "short": "integration iceScrum with Microsoft Teams with a bot, a connector and a tab"
  },
  "icons": {
    "outline": "icescrum-icon-32x32.png",
    "color": "icescrum-icon-192x192.png"
  },
  "connectors": [
    {
      "connectorId": "a15dcb92-35af-400e-ab9b-99efda40138f",
      "scopes": [
        "team"
      ],
      "configurationUrl": "https://icescrum.ngrok.io/icescrum/microsoft/setup/"
    }
  ],
  "name": {
    "full": "iceScrum2",
    "short": "iceScrum2"
  },
  "accentColor": "#FFFFFF",
  "validDomains": [
    "*.icescrum.com",
    "icescrum.ngrok.io"
  ]
}

Could you please have a look at Connector sample code? Could you please mention what exact behaviour you are getting while Testing your Connector? — Wajeed-MSFT
Hello @Wajeed-MSFT, I did have a look and some of the code is based on that. My problem is that the callback of microsoftTeams.settings.getSettings is never called. — Vincent Barrier
Also the same code is working on Teams when I sideload the app. — Vincent Barrier
If I understand correctly, Connector configuration is working fine on Teams but not in Outlook. Is that the case? — Wajeed-MSFT
Yes microsoftTeams.settings.getSettingsis called in Teams but not in Outlook — Vincent Barrier

Vincent Barrier Vincent Barrier · Accepted Answer · 2019-05-15T19:32:39

My microsoft Teams js lib was outdated (1.3.4). With the last version (1.4.1) it works well on Outlook and on Teams.

How to setup a connector for outlook and microsoft teams?

1 Answers