How do I add my custom application in group/chat tab in MS Teams?

Question

I followed the steps listed in MS Teams official documentation - https://docs.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/add-tab

I am trying to add my CakePHP web application into teams/group chat. I also tried creating configuration page to communicate between MS Teams and my web application but it didn't worked.

I have used CakePHP framework for my web app hence using it's default layout to create configuration page. Below is the code I have added in default layout page.

<script src="https://statics.teams.cdn.office.net/sdk/v1.8.0/js/MicrosoftTeams.min.js"></script>

<script>
    microsoftTeams.initialize();

    microsoftTeams.settings.registerOnSaveHandler((saveEvent) => {
        microsoftTeams.settings.setSettings({
            websiteUrl: "My website URL",
            contentUrl: "My content URL(which is same as my website URL)",
            entityId: "unique entity id that is mentioned in the app manifest file",
            suggestedDisplayName: "My tab name"
            });
        saveEvent.notifySuccess();
    });

    microsoftTeams.settings.setValidityState(true); 
</script>

I am not getting any error either but after adding my web app in tab, save button is disabled hence I am unable to save tab.

Refer this image:

Hilton Giesenow Hilton Giesenow · Accepted Answer · 2020-12-12T17:23:41

You need to read the docs more carefully on this - the Configuration page needs to tell Teams when it's done any configuration work it needs to do. As an example, if you add a SharePoint tab in Teams, it gives the user the chance to choose what from SharePoint they want to show, so this configuration page is essential. If you don't need to offer the user any configuration, you can just put a static message on the page, but you still need to notify Teams that the configuration is 'complete', which you do by calling the Teams JS Library, something like this:

microsoftTeams.initialize();

microsoftTeams.getContext(function (context) {
    microsoftTeams.settings.registerOnSaveHandler((saveEvent) => {
        microsoftTeams.settings.setSettings({
            websiteUrl: "https://yourWebsite.com",
            contentUrl: "https://yourWebsite.com/yourtab",
            entityId: "myTab",
            suggestedDisplayName: "MyNewTab"
            });
        saveEvent.notifySuccess();
    });

    microsoftTeams.settings.setValidityState(true);
});

You can read more about this here.

How do I add my custom application in group/chat tab in MS Teams?

1 Answers