Add SharePoint site as a App to the Teams

[mahendra89]

Hi,

We have been trying to add a SharePoint site to Teams and pinning to the Org-wide, so that everyone in the organization is able to view the SharePoint site pinned on the left side bar in the Teams.

App studio application was used build the package and deploy to the teams.

We were successfully able to host the SharePoint as an app and pin to the Left side bar Org-wide, but the issue which we are facing is we are not able to view the Top navigation bar which we have set up on the SharePoint site.

The issue is same on the Teams Web app and Client app.

Screenshot without Top navigation in Teams:

Screenshot of the SharePoint site:

We need help in resolving this and enable the Top navigation to show for the SharePoint site hosted on Teams Client 

-------------------------------------------Below Updated on 3rd Dec'21--------------------

Hello,

We were able to show the Top navigation of SP communication site on the Teams client app/web app by adding a below for the content Url parameter under the Static tabs on the app created using app studio:

"contentUrl": "https://contoso.sharepoint.com/_layouts/15/teamslogon.aspx?spfx=true&dest=/?app=portals"

However, now the issue is when any link on the top navigation is clicked for the second time, the top navigation along the with site name disappears.  We believe the issue is because of the redirection of pages in the Teams application

Screenshot:

1. When the Site loads:

2. When top nav link is clicked for the second time

Any help is highly appreciated.

[#2]

What happens if you use the “Website” tab and paste in the full url of SharePoint. Is this giving the same results? Or is the top navigation still not visible?

Let me know the outcome.

Kind regards,
Mitchell

[#3]

The Website tab is available within a specific channel in the Teams, but here we need to add the SharePoint site as an Icon available to all user of the Teams app on left Side bar.

[#4]

@mahendra89 you can create a custom app to do this. Then then Teams admin can a add the app to the left hand nav bar for all users. here is a quick overview of the steps.

Go to the Developer Portal https://dev.teams.microsoft.com/home

+ New App

• Add details

Add Personal App

• In Content URL paste in the Form URL

Publish App too Your org

In Team Admin center  - Managae Apps

• make sure app is approved and allowed

In Team Admin – Set up policies

• Add app to Nav bar for all users

This can take several hours to publish app to the nav bar in Teams.

Go to the Developer Portal https://dev.teams.microsoft.com/home

+ New App

• Add details

Add Personal App

• In Content URL paste in the SharePoint site URL

Publish App to Your org

In Team Admin center  - Manage Apps

• make sure app is approved and allowed

In Team Admin – Set up policies

• Add app to Nav bar for all users

This can take several hours to publish app to the nav bar in Teams.

[#5]

@NikkiChapple_ Thanks for the steps, we have tried this and are able to successfully add on the left nav bar on Teams after Teams admin policy setup. The issue is we are not able to view Top navigation of the Site when it is hosted/viewed on Teams application. Normally when you open the SharePoint site, we do see the Top navigation menu.

[#6]

@mahendra89 

Adding the "/?app=portals" to all your navigational elements will fix the issue of not seeing the top bar in the custom Teams SharePoint application. 

So the custom app includes the /?app=portals link and every element does not navigate to your SPO site: "https://contoso.sharepoint.com/sites/TestTeam", but to "https://consoto.sharepoint.com/sites/TestTeam/?app=portals". 

This will make the top navigational bar visible in your custom teams application of  your SPO site. 

Hope this helps. 

[#7]

Thank you!! I search this for 4 hours!!

[#8]

@mahendra89 

The url from the update post seems to work. However, in the Teams mobile app we only see a circle spinner. Is there a workaround to load the SharePoint page correctly on the Teams mobile app?