SingleWebPartAppPage not working in MS Teams Desktop Client

%3CLINGO-SUB%20id%3D%22lingo-sub-951861%22%20slang%3D%22en-US%22%3ESingleWebPartAppPage%20not%20working%20in%20MS%20Teams%20Desktop%20Client%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-951861%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20Folks%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E1%20)%20Created%20Hello%20world%20solution%20with%20SPFx%201.8.2%20and%20added%20to%20the%20SharePoint%20App%20page%20(Full%20SharePoint%20Page).%20Then%20added%20below%20parameters%20and%20build%20%26amp%3B%20packed%20the%20solution.%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-csharp%22%3E%3CCODE%3E%22supportedHosts%22%3A%20%5B%22SharePointWebPart%22%2C%22SharePointFullPage%22%5D%2C%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ENext%20added%20it%20to%20the%20SharePoint%20App%20Page.%20It%20works%20perfectly.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E2)%20In%20Microsoft%20Teams%2C%20with%20App%20editor%20created%20a%20manifest%20file%20with%20personal%20tab%20and%20added%20newly%20created%20sharepoint%20page%20in%20content%20URL.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E3)%20Tested%20and%20downloaded%20the%20solution.%20After%20installing%20it%20to%20the%20Teams%20App%20gallery%20and%20trying%20it%20open%20it%20from%20App%20tray%2C%20it%20is%20loading%20SharePoint%20Page%20in%20Teams%20Tab.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWhen%20I%20checked%20it%20in%20web%20version%2C%20its%20works%20fine.%20But%20not%20in%20desktop%20version.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E4)%20To%20rule%20out%20the%20issue%20added%20below%20domains%20to%20render%20the%20application.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-csharp%22%3E%3CCODE%3E%20%22validDomains%22%3A%20%5B%0A%20%20%20%20%20%20%20%20%22tenantname.sharepoint.com%22%2C%0A%20%20%20%20%20%20%20%20%22tenantname.sharepoint-df.com%22%2C%0A%20%20%20%20%20%20%20%20%22tenantname.login.microsoftonline.com%22%2C%0A%20%20%20%20%20%20%20%20%22msft.spoppe.com%22%2C%0A%20%20%20%20%20%20%20%20%22resourceseng.blob.core.windows.net%22%2C%0A%20%20%20%20%20%20%20%20%22spoprod-a.akamaihd.net%22%2C%0A%20%20%20%20%20%20%20%20%22spoppe-a.akamaihd.net%22%0A%20%20%20%20%5D%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EPlease%20correct%20me%2C%20if%20I'm%20doing%20anything%20wrong%20in%20the%20solution.%20Here%20are%20the%20screenshots%20for%20Desktop%20%26amp%3B%20Web.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CU%3E%3CSTRONG%3EWeb%3A%3C%2FSTRONG%3E%3C%2FU%3E%3CFONT%20color%3D%22%23339966%22%3E%3CSTRONG%3E%20WORKING%3C%2FSTRONG%3E%3C%2FFONT%3E%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20832px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F149539i6650D428635D23A9%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22web.jpg%22%20title%3D%22web.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CU%3E%3CSTRONG%3EDesktop%20%3A%3C%2FSTRONG%3E%3C%2FU%3E%3CSTRONG%3E%3CFONT%20color%3D%22%23FF0000%22%3E%20NOT%20WORKING%3C%2FFONT%3E%3C%2FSTRONG%3E%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20843px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F149540iCFF29D01A782BD00%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22desktop.jpg%22%20title%3D%22desktop.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-951861%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EExtensibility%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EMicrosoft%20Teams%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1132714%22%20slang%3D%22en-US%22%3ERe%3A%20SingleWebPartAppPage%20not%20working%20in%20MS%20Teams%20Desktop%20Client%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1132714%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F4760%22%20target%3D%22_blank%22%3E%40Srinivas%20Narula%3C%2FA%3E%26nbsp%3B%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EOne%20thing%20you%20can%20try%20is%20adding%20another%20%22supportedHost%22%3A%3C%2FP%3E%3CP%3E%3CSPAN%3ETeamsTab%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3E(See%20example%20on%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fspfx%2Fweb-parts%2Fsingle-part-app-pages%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fspfx%2Fweb-parts%2Fsingle-part-app-pages%3C%2FA%3E).%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3EI%20don't%20know%20if%20this%20will%20solve%20you%20issue%20though%2C%20it's%20just%20something%20you%20might%20try.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EI%20have%20a%20question%20though%2C%20if%20you%20are%20using%20a%20SingleWebPartAppPage%2C%20isn't%20it%20more%20interesting%20to%20directly%20add%20the%20webpart%20as%20a%20team%20tab%20instead%20of%20wrapping%20it%20by%20a%20page%20and%20adding%20the%20page%3F%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3EMore%20information%20about%20this%20can%20be%20found%20at%20following%20location%3A%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fspfx%2Fweb-parts%2Fget-started%2Fusing-web-part-as-ms-teams-tab%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fspfx%2Fweb-parts%2Fget-started%2Fusing-web-part-as-ms-teams-tab%3C%2FA%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EHope%20this%20helps!%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Contributor

Hi Folks,

 

1 ) Created Hello world solution with SPFx 1.8.2 and added to the SharePoint App page (Full SharePoint Page). Then added below parameters and build & packed the solution.

"supportedHosts": ["SharePointWebPart","SharePointFullPage"],

 

Next added it to the SharePoint App Page. It works perfectly. 

 

2) In Microsoft Teams, with App editor created a manifest file with personal tab and added newly created sharepoint page in content URL.

 

3) Tested and downloaded the solution. After installing it to the Teams App gallery and trying it open it from App tray, it is loading SharePoint Page in Teams Tab.

 

When I checked it in web version, its works fine. But not in desktop version.

 

4) To rule out the issue added below domains to render the application.

 

 "validDomains": [
        "tenantname.sharepoint.com",
        "tenantname.sharepoint-df.com",
        "tenantname.login.microsoftonline.com",
        "msft.spoppe.com",
        "resourceseng.blob.core.windows.net",
        "spoprod-a.akamaihd.net",
        "spoppe-a.akamaihd.net"
    ]

 

Please correct me, if I'm doing anything wrong in the solution. Here are the screenshots for Desktop & Web.

 

Web: WORKING

web.jpg

 

Desktop : NOT WORKING

desktop.jpg

 

2 Replies
Highlighted

Hi @Srinivas Narula ,

 

One thing you can try is adding another "supportedHost":

TeamsTab

(See example on https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/single-part-app-pages). 

I don't know if this will solve you issue though, it's just something you might try.

 

I have a question though, if you are using a SingleWebPartAppPage, isn't it more interesting to directly add the webpart as a team tab instead of wrapping it by a page and adding the page?

More information about this can be found at following location:

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-ms-team...

 

Hope this helps!

Highlighted

@Stijn Brouwers - Thanks for replying back.

 

I forgot to update this post.

 

There are 2 underlying Issues with my application.

 

  1.   I didn't format the URL as per guidelines. The right one is below    

 

https://<<tenantname>>/_layouts/15/teamslogon.aspx?SPFX=true&dest=<</sites/sitename/SitePages/pagename.aspx>>​

 

  • Graph scopes used in application was not consented in Azure AD app (SharePoint Online Client Extensible Web Application)

Thanks alot for reminding about this issue.