Custom Teams app works in browser app but not in desktop app

[rhernandez]

I've created a simple app using App Studio.  It's basically 2 tabs that display 2 different SharePoint sites.

I installed the app successfully, but when I access the app in Teams desktop, both tabs are blank.  When I access the same app thru Teams in the browser, it displays both tabs/sites correctly.

Has anyone seen this or know of a way to fix the issue?  Most of our users use the desktop Teams app to access Teams.

TIA.

--

Raul Hernandez

[#2]

@rhernandez 

I am having the same issue. Did you solve it or not?

[#3 · Accepted solution]

@KevinZhang888 

I did get this working... the SharePoint URL cannot be used directly.  There are a couple of things that you will need to manually update in the manifest or in App Studio.

1. When configuring your tabs, use this format for contentURL and websiteURL:

contentUrl = {{siteUrl}}/_layouts/15/teamslogon.aspx?SPFX=true&dest={{sitePath}}

websiteUrl = {{siteUrl}}

The missing key here is the use of "/_layouts/15/teamslogon.aspx?SPFX=true&dest=".

Lets use the contoso url for example, https://contoso.sharepoint.com/sites/ContosoHub. Instead of just using this siteUrl directly, which is what I had previously done, the content url will now be:

https://contoso.sharepoint.com/sites/ContosoHub/_layouts/15/teamslogon.aspx?spfx=true&dest=/sites/ContosoHub

2. The second part to this is setting the "Web app single sign-on" properties.

AAD application ID: 00000003-0000-0ff1-ce00-000000000000

Resource Url: {{subdomain}}.sharepoint.com

Again, using contoso, the Resource Url would be: https://contoso.sharepoint.com

and use the same AAD app ID that I noted above.

I hope this helps.

Thanks.

--

Raul Hernandez

[#4]

@rhernandez 

out of curiousity we have a few drop down menus at the top of an SPO site that we are trying to use an app studio app for.. the page loads fine but the drop down menu's dont appear.. is there anyway to modify how the page is viewed within Teams? iframe or something?

[#5]

@Kevin Watts 
Not that I know of, sorry.
We don't have any drop downs in either of the sites that we embedded on an app, so I won't be of much help.
--
Raul Hernandez

[#6]

Thanks @rhernandez for your smart answer, this helps a lot.

I would have a bonus question, what would be the contentUrl URL for other web based apps I want to show in a personal tab in Teams. Are there as well some additional parameters I need to add to the URL like "/_layouts/15/teamslogon.aspx?SPFX=true&dest=" for SharePoint sites?

Thanks for your support and best wishes

PS: In "Known issues" i found the following issue: "Conditional Access may not work when using the "Website" or "Azure DevOps" tab in the desktop app." (https://docs.microsoft.com/en-us/microsoftteams/known-issues) could this be the reason why my web based apps I integrate in Teams only work in the browser but not in the desktop app?

[#7]

@rhernandez 

Hi Raul,

thanks for your reply.

Using your instruction i got a bit further.
Instead of a blank page, i know have a blank page with a turning blue circle, means that the site cannot load.

Do i need to give the AAD Application Office 365 SharePoint Online with the App ID:00000003-0000-0ff1-ce00-000000000000

any specific rights?

- Do I need to add me as a user of this App in AAD or the App I developed?

Thanks,
Franck

[#8]

I have the same problem, someone can help us? i have the blue circle

[#9]

Funny enough, i only have the blue circles in the Desktop App.
When i use the Teams Web App the linked sites (SPO Communication Sites in the same tenant) open perfectly.

[#10]

@becommon 

Hi Did you find a solution to web apps not working in a Tab in Teams Desktop Client but works fine in Teams Browser Client?

[#11]

Hi, We are now using the Viva Connections Script to accomplish what we meant to do:
https://techcommunity.microsoft.com/t5/microsoft-viva-blog/install-viva-connections-today/ba-p/22454...
It is like an automized way to develop a team app with tabs. When you look at the manifest, you will find a sections with specific rights that i think the desktop client needs for the App Studio Apps:
"validDomains": [
"migros.sharepoint.com",
"*.login.microsoftonline.com",
"*.sharepoint.com",
"*.sharepoint-df.com",
"spoppe-a.akamaihd.net",
"spoprod-a.akamaihd.net",
"resourceseng.blob.core.windows.net",
"msft.spoppe.com"
But i did not test this further.
Franck

[#12]

@franckma This worked for me. Thanks!

[#13]

great, What we experienced, is that Viva Connections works for pure mobile users only, if their accounts are in the "Target Release" group of M365.
Viva Connections Mobile is not yet released for GA. Viva Connections on desktop is GA.

[#14]

@rhernandez Hi,

This solution worked on android, teams online and desktop, but in IOS the link still not working.

The iframe is stuck with a thin blue loader.
Can you help me?

*Example with consoto*

contentUrl: https://consoto.sharepoint.com/sites/consotoSubsite/_layouts/15/teamslogon.aspx?spfx=true&dest=/site...

websiteUrl: https://consoto.sharepoint.com

webApplicationInfo:
ID: <appId>

resource: "api://https://consoto.sharepoint.com/<appId>"