How do I use a configurationUrl to set up multiple tab?

catmanjan commented 1 month ago

I have a configuration page as below - I am trying to set up 3 different tabs when the user clicks Save, however the user only ever gets the last tab.

How can I create all 3 at once?

<head>
    <script src="https://unpkg.com/@microsoft/teams-js@2/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
</head>
<body>
    <p style='font-size: 14px; font-family: -apple-system, BlinkMacSystemFont, " Segoe UI", system-ui, "Apple Color Emoji" , "Segoe UI Emoji" , "Segoe UI Web" , sans-serif;'>
        Click Save below to set up Ingress Search for this channel.
    </p>
    <script>
        microsoftTeams.app.initialize().then(() => {
            microsoftTeams.pages.config.registerOnSaveHandler((saveEvent) => {
                microsoftTeams.pages.config.setConfig({
                    contentUrl: "https://{TeamsIntegration:SharePointTenantName}.sharepoint.com/_layouts/15/teamslogon.aspx?{TeamsIntegration:TabUrl}",
                    websiteUrl: "{TeamsIntegration:TabUrl}",
                    entityId: "{MicrosoftAppId}IngressSearch",
                    suggestedDisplayName: "Ingress Search"
                });

                microsoftTeams.pages.config.setConfig({
                    contentUrl: "{RmWorkspaceUrl}",
                    websiteUrl: "{RmWorkspaceUrl}",
                    entityId: "{MicrosoftAppId}IngressRecords",
                    suggestedDisplayName: "Ingress Records"
                });

                microsoftTeams.pages.config.setConfig({
                    contentUrl: "{RmWorkflowUrl}",
                    websiteUrl: "{RmWorkflowUrl}",
                    entityId: "{MicrosoftAppId}IngressWorkflow",
                    suggestedDisplayName: "Ingress Workflow"
                });

                // Tells Microsoft Teams platform that we are done saving our pages.config. Microsoft Teams waits
                // for the app to call this API before it dismisses the dialog. If the wait times out, you will
                // see an error indicating that the configuration pages.config could not be saved.
                saveEvent.notifySuccess();
            });

            // this indicates that the user is allowed to save the page
            microsoftTeams.pages.config.setValidityState(true);
        });
    </script>
</body>

Dinesh-MSFT commented 1 month ago

Hi @catmanjan - Thanks for raising the query. We will look into it and let you know the updates.

Dinesh-MSFT commented 1 month ago

Hi @catmanjan,

Currently it is not supported to setup multiple tabs in configurationUrl. We will check this internally with engineering team and let you know the updates.

Dinesh-MSFT commented 1 month ago

Hi @catmanjan, As discussed internally with engineering team, the current design only allows for adding one tab at a time through the configuration flow. To add multiple tabs, users must repeat the process individually for each tab. While it is technically possible for a developer to add tabs via Graph APIs, this approach is not recommended as it deviates from the standard user experience with configurable tabs.

Thanks!!

OfficeDev / microsoft-teams-library-js

How do I use a configurationUrl to set up multiple tab? #2395