SPFX WebPart exposed as teams app not visible in New MS Teams version

mdissel commented 1 year ago

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

None

What browser(s) / client(s) have you tested

[ ] 💥 Internet Explorer
[ ] 💥 Microsoft Edge
[ ] 💥 Google Chrome
[ ] 💥 FireFox
[ ] 💥 Safari
[ ] mobile (iOS/iPadOS)
[ ] mobile (Android)
[X] not applicable
[ ] other (enter in the "Additional environment details" area below)

Additional environment details

SPFx version 1.16.1
MS Teams manifest version schema v1.16
MS Teams Windows Desktop version 23231.412.2343.5284
App is loaded via context "personalTab" and https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=....id...%26forceLocale={locale}%26theme={theme}"

Describe the bug / error

The webpart is loaded without any issues in the normale Teams version, but not in the "New" version. The loading indicator is shown for 1 second and after that a blank page.

Current manifest.json validdomains:

"validDomains": [ "{teamsitedomain}", "cdn.XXXXXX.com", (our own cdn) ".login.microsoftonline.com", "statica.akamai.odsp.cdn.office.net", ".sharepoint.com", "*.office.com", "spoprod-a.akamaihd.net", "resourceseng.blob.core.windows.net" ],

Steps to reproduce

1. 2. 3.

Expected behavior

Load the webpart from the sharepoint hosted webpage.

ghost commented 1 year ago

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

nick-pape commented 1 year ago

Thank you for filing a report. As this is definitely a potential bug, I've filed a ticket for the Product Group to take a further look at this.

nick-pape commented 1 year ago

@mdissel

Can you provide specific repro steps and/or a link to a repro repository?

Does this occur with a web part generated with yeoman and no other changes?

Additionally, do you have a custom Teams manifest? And if so, what is listed in webApplicationInfo?

mdissel commented 1 year ago

Can you provide specific repro steps and/or a link to a repro repository?

Currently not

Does this occur with a web part generated with yeoman and no other changes? Additionally, do you have a custom Teams manifest? And if so, what is listed in webApplicationInfo?

{
  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.16/MicrosoftTeams.schema.json",
  "manifestVersion": "1.16",
  "packageName": "XX",
  "id": "XXX",
  "version": "2023.2.1",
  "developer": {
    "name": "XXX",
    "websiteUrl": "XXX",
    "privacyUrl": "XXXX",
    "termsOfUseUrl": "XXXX"
  },
  "name": {
    "short": "XXXX",
    "full": "XXXXX"
  },
  "description": {
    "short": "XXX",
    "full": "XXXX"
  },
  "icons": {
    "outline": "XXXX_outline.png",
    "color": "XXXX_color.png"
  },
  "accentColor": "#004578",
  "showLoadingIndicator": false,
  "isFullScreen": true,
  "staticTabs": [
    {
      "entityId": "XXX",
      "name": "XXX",
      "contentUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=XXXXXX%26forceLocale={locale}%26theme={theme}",
      "scopes": [
        "personal",
        "team"
      ],
      "context": [
        "personalTab",
        "channelTab"
      ]
    }
  ],
  "configurableTabs": [
    {
      "configurationUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3FopenPropertyPane=true%26teams%26componentId=XXXXX%26forceLocale={locale}%26theme={theme}",
      "canUpdateConfiguration": true,
      "scopes": [
        "team"
      ],
      "context": [
        "channelTab",
        "personalTab"
      ],
      "supportedSharePointHosts": [
        "sharePointFullPage",
        "sharePointWebPart"
      ]
    }
  ],
  "defaultInstallScope": "team",
  "validDomains": [
    "{teamsitedomain}",
    "cdn.XXXXX.com",
    "*.login.microsoftonline.com",
    "spoppe-a.akamaihd.net",
    "spoprod-a.akamaihd.net",
    "resourceseng.blob.core.windows.net",
    "msft.spoppe.com"
  ],
  "webApplicationInfo": {
    "resource": "https://{teamSiteDomain}",
    "id": "00000003-0000-0ff1-ce00-000000000000"
  }
}

AJIXuMuK commented 1 year ago

@mdissel - are you using context.app.host.name in your code and throwing an error if it's unknown host (similarly to how it's done in the default scaffolded solution)? If yes - Teams introduced new host name 'TeamsModern' which is valid one and specifies the app is running in "new" Teams. Could you please modify your code to take it into consideration and check if that fixes the issue?

Thanks!

mdissel commented 1 year ago

Thanks! We will upgrade to 1.18 and let you know the results.

If yes - Teams introduced new host name 'TeamsModern'

We're are doing some other stuff based in context.app.host.name so we will add 'TeamsModern' as an alternative name for MS Teams.

mdissel commented 1 year ago

Thanks! The fullscreen app in the modern Teams app is working after upgrading SPFX to 1.18

doxic012 commented 1 year ago

Any update on this bug? We have the same issue (mentioned in the dupe that is closed) and are on spfx 1.14 and cannot upgrade so easily because some of react component dependencies.

kandharithirumalreddy commented 10 months ago

Hi Any update on this bug? We have the same issue and are on SPFx version 1.15.2.

kandharithirumalreddy commented 10 months ago

Hi Any update on this bug? We have the same issue and are on SPFx version 1.15.2.

Undefined-None commented 9 months ago

maybe this helps someone: It seems that somewhere around spfx 1.15 or 1.16 they introduced a default/scaffolded function called _getEnvironmentMessage(). This function holds a switch statement wich throws "unkown host" when in new Teams because only "Teams" but not "TeamsModern" is checked. in my case i just added a additional TeamsModern-Case-Statement and it worked in New Teams.

But additionally an "old" Bug presists, you can't change the webparts settings once it is added as Teams Tab.

mdissel commented 8 months ago

@nick-pape We are experiencing the same problem in the Microsoft Outlook 365 MSO (Version 2401 Build 16.0.17231.20194) 64-bit It does work correctly in Outlook Web Access.

The first time we dock an app to the left panel, the app is loaded without any problem. But when you close and open Outlook and click on the docked app, the {teamSiteDomain} is not replaced, resulting in a white/empty browser page.

Using spfx version 18.0

Undefined-None commented 8 months ago

@nick-pape We are experiencing the same problem in the Microsoft Outlook 365 MSO (Version 2401 Build 16.0.17231.20194) 64-bit It does work correctly in Outlook Web Access.

The first time we dock an app to the left panel, the app is loaded without any problem. But when you close and open Outlook and click on the docked app, the {teamSiteDomain} is not replaced, resulting in a white/empty browser page.

Using spfx version 18.0

I can confirm the behavior described by @mdissel, using Microsoft Outlook Microsoft 365 MSO (Version 2401 Build 16.0.17231.20236) 64 Bit. But the same is true when using the app as "M365 App" it works when using the SPFx-App directly in the browser but crashes when using the desktop "Microsoft 365 (office)"-App. Unable to test it in new outlook as the apps are not listed there.

Clearly there is something wrong with the URL replacement

I also noticed that now we can change webpart settings in new teams - but it seems that everytime you edit the webpart settings (of a existing tab) technically a new tab will be generated (because the tab-url is not available anymore).

I'm using spfx 1.18.1

cardinalpipkin commented 7 months ago

maybe this helps someone: It seems that somewhere around spfx 1.15 or 1.16 they introduced a default/scaffolded function called _getEnvironmentMessage(). This function holds a switch statement wich throws "unkown host" when in new Teams because only "Teams" but not "TeamsModern" is checked. in my case i just added a additional TeamsModern-Case-Statement and it worked in New Teams.

But additionally an "old" Bug presists, you can't change the webparts settings once it is added as Teams Tab.

Can you show me what files were edited and how please? I'm getting this issue even when updating to 1.18

Undefined-None commented 7 months ago

you show me what files were edited and how please? I'm getting this issue even when updating to 1.18

in your *WebPart.ts in src\webparts\{webpartname} you should find a method called _getEnvironmentMessage this method contains a switch statement, where the last clause is case 'Teams', in default-clause the unkown host exception is thrown. Now simply add case 'TeamsModern' just below case 'Teams' like so:

private _getEnvironmentMessage(): Promise<string> {
    if (!!this.context.sdks.microsoftTeams) { // running in Teams, office.com or Outlook
      return this.context.sdks.microsoftTeams.teamsJs.app.getContext()
        .then(context => {
          let environmentMessage: string = '';
          switch (context.app.host.name) {
            case 'Office': // running in Office
              environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentOffice : strings.AppOfficeEnvironment;
              break;
            case 'Outlook': // running in Outlook
              environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentOutlook : strings.AppOutlookEnvironment;
              break;
            case 'Teams': // running in Teams
            case 'TeamsModern':
              environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentTeams : strings.AppTeamsTabEnvironment;
              break;
            default:
              environmentMessage = strings.UnknownEnvironment;
          }

          return environmentMessage;
        });
    }

Please note, in this example I have removed the exception - instead only a string will be returned. If you do not need this info about the current environment as string, i think you can remove the entire method.

Undefined-None commented 7 months ago

I also noticed that spfx webparts suddenly started working (again) in outlook

@nick-pape We are experiencing the same problem in the Microsoft Outlook 365 MSO (Version 2401 Build 16.0.17231.20194) 64-bit It does work correctly in Outlook Web Access. The first time we dock an app to the left panel, the app is loaded without any problem. But when you close and open Outlook and click on the docked app, the {teamSiteDomain} is not replaced, resulting in a white/empty browser page. Using spfx version 18.0

I can confirm the behavior described by @mdissel, using Microsoft Outlook Microsoft 365 MSO (Version 2401 Build 16.0.17231.20236) 64 Bit. But the same is true when using the app as "M365 App" it works when using the SPFx-App directly in the browser but crashes when using the desktop "Microsoft 365 (office)"-App. Unable to test it in new outlook as the apps are not listed there.

Clearly there is something wrong with the URL replacement

I also noticed that now we can change webpart settings in new teams - but it seems that everytime you edit the webpart settings (of a existing tab) technically a new tab will be generated (because the tab-url is not available anymore).

I'm using spfx 1.18.1

cardinalpipkin commented 7 months ago

you show me what files were edited and how please? I'm getting this issue even when updating to 1.18

in your *WebPart.ts in src\webparts\{webpartname} you should find a method called _getEnvironmentMessage this method contains a switch statement, where the last clause is case 'Teams', in default-clause the unkown host exception is thrown. Now simply add case 'TeamsModern' just below case 'Teams' like so:
private _getEnvironmentMessage(): Promise<string> {
    if (!!this.context.sdks.microsoftTeams) { // running in Teams, office.com or Outlook
      return this.context.sdks.microsoftTeams.teamsJs.app.getContext()
        .then(context => {
          let environmentMessage: string = '';
          switch (context.app.host.name) {
            case 'Office': // running in Office
              environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentOffice : strings.AppOfficeEnvironment;
              break;
            case 'Outlook': // running in Outlook
              environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentOutlook : strings.AppOutlookEnvironment;
              break;
            case 'Teams': // running in Teams
            case 'TeamsModern':
              environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentTeams : strings.AppTeamsTabEnvironment;
              break;
            default:
              environmentMessage = strings.UnknownEnvironment;
          }

          return environmentMessage;
        });
    }
Please note, in this example I have removed the exception - instead only a string will be returned. If you do not need this info about the current environment as string, i think you can remove the entire method.

Hi - I've modified the function like this:

private _getEnvironmentMessage(): Promise<string> {
    if (!!this.context.sdks.microsoftTeams) { // running in Teams, office.com or Outlook
      return this.context.sdks.microsoftTeams.teamsJs.app.getContext()
        .then(context => {
          let environmentMessage: string = '';
          switch (context.app.host.name) {
            case 'Office': // running in Office
              environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentOffice : strings.AppOfficeEnvironment;
              break;
            case 'Outlook': // running in Outlook
              environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentOutlook : strings.AppOutlookEnvironment;
              break;
            case 'Teams': // running in Teams
              environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentTeams : strings.AppTeamsTabEnvironment;
              break;
            case 'TeamsModern':
              environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentTeams : strings.AppTeamsTabEnvironment;
              break;
            default:
              environmentMessage = strings.UnknownEnvironment;
              //throw new Error('Unknown host');
          }

          return environmentMessage;
        });
    }

and added an UnknownEnvironment string to the myStrings.d.ts file:

declare interface IMyAppWebPartStrings {
  PropertyPaneDescription: string;
  BasicGroupName: string;
  DescriptionFieldLabel: string;
  AppLocalEnvironmentSharePoint: string;
  AppLocalEnvironmentTeams: string;
  AppLocalEnvironmentOffice: string;
  AppLocalEnvironmentOutlook: string;
  AppSharePointEnvironment: string;
  AppTeamsTabEnvironment: string;
  AppOfficeEnvironment: string;
  AppOutlookEnvironment: string;
  UnknownEnvironment: string;
}

When I switch the browser to new Teams, then run the project using Teams Toolkit, the browser loads, but shows "Can't find that app".

cardinalpipkin commented 7 months ago

I just sent this through to SP admin and they tested on new Teams and they report it has worked. Thank you to Undefined-none.

SharePoint / sp-dev-docs