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

Ishalli Garg 1

I followed the steps listed in MS Teams official documentation - https://learn.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 I didn't worked.

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

Deva-MSFT 2,256 Reputation points Microsoft Employee

2020-12-12T21:10:19.047+00:00

Adding right tag/team to help you on this
Trinetra-MSFT 111 Reputation points

2020-12-14T12:12:11.3+00:00

You need to include Team or GroupChat scope for your tab in app manifest. You can look at Configure a channel or groupchat tab in teams
Ishalli Garg 1 Reputation point

2020-12-15T16:48:32.4+00:00

I have tried this as per given in official documentation

microsoftTeams.initialize();

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

Other than above piece, I have also tried not setting any config by using this flag.

microsoftTeams.settings.setValidityState(true);

But my save button is still disabled.
Trinetra-MSFT 111 Reputation points

2020-12-21T05:36:25.15+00:00

You can check what error you are getting in console.
Ishalli Garg 1 Reputation point

2020-12-21T08:46:51.913+00:00

In Chrome, I am getting this -

Refused to frame 'my-website-url' because it violates the following Content Security Policy directive: "frame-src blob: data: https: mailto: ms-appx-web: ms-excel: ms-powerpoint: ms-visio: ms-word: onenote: pdf: local.teams.office.com:* localhost:* msteams: sip: sips: ms-whiteboard-preview:".

In FireFox getting this -

Content Security Policy: The page’s settings blocked the loading of a resource at my-website-url (“frame-src”).. Where as personal tab for my app is opening fine on both the browsers.

And this is how I am setting CSP Headers in my application conf -

Header set Content-Security-Policy "child-src 'self' teams.microsoft.com;"

Share via

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