Unable to save tab of custom app in Teams

Question

I've got a problem with assigning my custom app to a team in MS Teams. So after uploading the app and trying to assign a new tab for it, I can't save the Tab.

Do you have any explanation for this? Already checked the validDomains and websiteURL.

Thanks!

Answer 1

It's important to know there are two kinds of tabs:

1. Personal tabs - if you want the user to have a personal tab experience, like where your app gets installed by a user directly, and appears in the App list on the left of the screen, then this is a "personal" tab.

2. Channel/Group Chat tabs - these are tabs that can be added to an existing channel or an existing group chat. For these kinds of tabs, when the user adds the tab, they have a small popup that appears that allows them to configure the tab itself. For instance, let's say your tab was going to show News - this configuration screen would let the user who's installing the tab to the channel/team be able to choose from a list of News sources they want to the tab to actually show. When you configure a tab like this in the manifest for your app, you're actually telling it the address for this "configuration" screen, which will set the actual final url for the tab itself.

Inside this small configuration popup, you need to tell Teams when the configuration you offered to the user is complete. For instance, if they have made a choice of which News feed they want, you would notify Teams that the configuration is finished, and that Teams can now "activate" the Save button. You can see more about this over here .

Of course, in many cases, the tab won't have any required configuration. In that case, you can immediately tell Teams to enable the Save button. A sample of this would be:

 document.addEventListener("DOMContentLoaded", function (event) {
        microsoftTeams.initialize();

        microsoftTeams.getContext(function (context) {

            microsoftTeams.settings.registerOnSaveHandler(function (saveEvent) {

                microsoftTeams.settings.setSettings({
                    entityId: "WhatEverUniqueNameYouWantForYourTab",
                    contentUrl: "https://ThePathToYourActualTab",
                    suggestedDisplayName: "WhateverYouWantTheTabToBeCalled",
                    websiteUrl: "https://OptionalAddressForIfTheyWantAFullScreenExperience",
                    removeUrl: "https://OptionalAddressForARemoveExperience",
                });

                saveEvent.notifySuccess();
            });

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

So, to be clear, if you want to add a Tab app for a Channel or Group Chat, you basically need to have two pages in your solution - the main tab page, and a page that will appear in the popup you've shown in your original question.