"Configurable Tabs" Not Visible When Adding Teams App

Question

"Configurable Tabs" Not Visible When Adding Teams App

Nikolay Ivanov 0

Hello, I've created a new Teams app using the VS Code Teams Toolkit. I want to add a page (a "configurable tab") where the user setting up the tab can enter a URL, which will then become the default URL displayed for everyone who clicks on the tab.

Problem: When I start the app, I see a "Set up a tab" button, but I don't get the configuration page. However, I can manually access it via https://localhost:53000/config.

Screenshots: https://ibb.co/YfKNj6X https://ibb.co/5Ft95N1

I'm expecting the configuration page to appear when the app is initially added to the tab, like in this example YouTube video, but I can't get it to show. What can I do to see the configuration page when I'm adding the tab?

Here are the configurations:

Manifest JSON:

"configurableTabs": [
    {
        "configurationUrl": "${{TAB_ENDPOINT}}/config",
        "canUpdateConfiguration": true,
        "scopes": ["team", "groupChat"]
    }
],
"permissions": [
    "identity",
    "messageTeamMembers"
],
"validDomains": [
    "${{TAB_DOMAIN}}"
]

App Configuration (app.ts):

server.get("/", (req, res, next) => {
    send(req, __dirname + "/views/hello.html").pipe(res);
});

// Static Tab Setup
server.get("/tab", (req, res, next) => {
    send(req, __dirname + "/views/hello.html").pipe(res);
});

server.get("/config", (req, res, next) => {
    send(req, __dirname + "/views/config.html").pipe(res);
});

Configuration Page (config.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Configuration</title>
    <script
      src="https://res.cdn.office.net/teams-js/2.22.0/js/MicrosoftTeams.min.js"
      integrity="sha384-WSG/sWulIv7rel5TnFlH8JTpxl2OxzZh9Lux2mIzBFiTRLFvMBeFv9VURu/3vQdx"
      crossorigin="anonymous"
    ></script>
    <script src="/static/scripts/teamsapp.js"></script>
</head>
<body>
    <h2>Configure Your Tab</h2>
    <label for="url">Enter URL:</label>
    <input type="text" id="url" placeholder="https://example.com">
    <button onclick="save()">Save</button>

    <script>
        microsoftTeams.initialize();

        function save() {
            const url = document.getElementById("url").value;
            microsoftTeams.settings.setSettings({
                contentUrl: url,
                websiteUrl: url,
                suggestedDisplayName: "My Teams Tab"
            });
            microsoftTeams.settings.setValidityState(true);
            microsoftTeams.settings.saveEvent.notifySuccess();
        }
    </script>
</body>
</html>

Anonymous

2024-10-30T08:38:19.5833333+00:00

Hi,

Teams tag is mainly focused on the general issue of Microsoft Teams troubleshooting. According to your description, your question is related to Teams Development which is not in our support scope. Thanks for your understanding and patience!
Meghana-MSFT 4,116 Reputation points Microsoft External Staff

2024-11-04T14:00:29.6566667+00:00

Nikolay Ivanov - Teams renders this banner when we do not initialize the Teams SDK.

Now it is mandatory to initialise SDK for static tabs as well. Within your content page, add a reference to Microsoft Teams JavaScript client library using script tags. After your page loads, make a call to app.initialize(), or else your page isn't displayed. we display a banner instead of hiding the app because we didn't want to prevent customers from using these apps.

You need to add the Teams JavaScript client library to your page, and call microsoftTeams.initialize() after your page loads. This also allows Teams to know that your app has loaded.

3 answers

Your answer

Anonymous

2024-10-30T08:38:19.5833333+00:00

Hi,

Teams tag is mainly focused on the general issue of Microsoft Teams troubleshooting. According to your description, your question is related to Teams Development which is not in our support scope. Thanks for your understanding and patience!
Meghana-MSFT 4,116 Reputation points Microsoft External Staff

2024-11-04T14:00:29.6566667+00:00

Nikolay Ivanov - Teams renders this banner when we do not initialize the Teams SDK.

Now it is mandatory to initialise SDK for static tabs as well. Within your content page, add a reference to Microsoft Teams JavaScript client library using script tags. After your page loads, make a call to app.initialize(), or else your page isn't displayed. we display a banner instead of hiding the app because we didn't want to prevent customers from using these apps.

You need to add the Teams JavaScript client library to your page, and call microsoftTeams.initialize() after your page loads. This also allows Teams to know that your app has loaded.

Answer 1

Nikolay Ivanov 0

Here are the screenshots:
teams1

teams2

Nikolay Ivanov 0 Reputation points

2024-10-29T13:06:04.4133333+00:00

I've tried to upload the .zip package in the teams desktop app and here's what I see:

Totally different behaviour from the web app where I'm supposed to debugg the app. Is there a way to see this also when debugging in the web app?
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Answer 2

Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Comments have been turned off. Learn more

Answer 3

Nikolay Ivanov 0

Here's what I see in the dekstop app when I added the zip package
User's image

Share via

"Configurable Tabs" Not Visible When Adding Teams App

3 answers

Your answer