Skip to content

Commit 097e049

Browse files
committed
Removing preview on SharePoint embed
1 parent 59e5b21 commit 097e049

File tree

1 file changed

+3
-199
lines changed

1 file changed

+3
-199
lines changed

docs/features/embed-pages-to-teams.md

Lines changed: 3 additions & 199 deletions
Original file line numberDiff line numberDiff line change
@@ -1,209 +1,13 @@
11
---
22
title: Embedding modern SharePoint pages in Microsoft Teams as personal apps (preview)
33
description: SharePoint pages can be embedded as personal apps in the Microsoft Teams.
4-
ms.date: 06/14/2020
4+
ms.date: 04/20/2021
55
localization_priority: Priority
66
---
77

88
# Embedding modern SharePoint pages in Microsoft Teams as personal apps (preview)
99

1010
_**Applies to:** Microsoft 365_
1111

12-
You can use the Microsoft Teams personal app model to pin any modern SharePoint page to the left navigation of Microsoft Teams. This provides a great opportunity to expose intranet landing pages to serve corporate communication needs, directly accessible by Microsoft Teams users. Example scenarios could include:
13-
14-
- Adding your corporate intranet landing page to Teams for easy discovery of news and content
15-
- Add the [Learning Pathways](https://lookbook.microsoft.com/details/3df8bd55-b872-4c9d-88e3-6b2f05344239) solution to Teams to embed Microsoft 365 learning paths for your users
16-
- Add single page communications on important topics for your company
17-
18-
Use the steps defined in this article to embed any modern SharePoint page or site in Teams.
19-
20-
![SharePoint portal embedded to Teams](../images/teams-pages-embed.png)
21-
22-
<br/>
23-
<br/>
24-
25-
> [!VIDEO https://www.youtube.com/embed/G73jxqtjuIE]
26-
27-
You can embed any modern SharePoint page in Microsoft Teams by creating a Teams personal app and manually creating the needed configuration for this custom setup. Be aware of the following considerations:
28-
29-
- This capability is provided as a PREVIEW INTEGRATION PATH until a native solution becomes available.
30-
- The target must be a modern SharePoint site or page. Embedding classic publishing portals or other classic sites or pages is not supported and will not work.
31-
- A user can add a personal app from the APPS link in Teams. A user can pin an app to the app bar (the left-most navigation in Teams) by right-clicking it and choosing PIN.
32-
- Administrators can deploy and pin an app to all or targeted users from the Microsoft Teams admin center.
33-
- There are some gaps in user experience including the following, which we are actively looking to address in a future, integrated solution:
34-
- There is no native navigation, header, or footer on embedded pages.
35-
- Search initiated from Teams will return search results from Teams, not search results from the embedded site.
36-
- You cannot create content (news, pages, lists, or libraries) in Teams. You must create content from the SharePoint site using a web browser or SharePoint mobile app.
37-
- Page comment feature is not available from the SharePoint pages, when they are exposed in Microsoft Teams
38-
- All users accessing the embedded SharePoint page will need to have at least read permission to access the page.
39-
- If a tenant, SharePoint site or page name or URL is changed, the Teams personal app manifest will need to be updated.
40-
- If changes are made to the pinning model for modern SP pages or sites, it could require you to delete existing pinned personal apps and redeploy them.
41-
42-
> [!IMPORTANT]
43-
> This option is provided as a preview integration path. Microsoft reserves the right to make changes to the model, which could require you to delete existing pinned apps and re-deploy them with an updated solution. Changes to the integration path will not require you to delete or recreate the targeted SharePoint site or page.
44-
45-
## Embed SharePoint modern sites & pages into Microsoft Teams with App Studio
46-
47-
We will be using following tags in the steps below, which you should update based on the modern SharePoint page or site that you want to embed in Teams:
48-
49-
- [domainUrl] – Root URL of the ___domain
50-
- Example – https://contoso.sharepoint.com
51-
- [pageUrl] – Page, which should be shown in the tab relative to the root of the tenant
52-
- Example - /sites/theperspective/SitePages/Home.aspx
53-
54-
> [!TIP]
55-
> If you want to create a sample to demonstrate this integration, you can use the [https://lookbook.microsoft.com](https://lookbook.microsoft.com) service to create sample apps and pages in your tenant.
56-
57-
You will need to use **App Studio** or another editor to create the Teams manifest file with the necessary URLs to your SharePoint pages. Complete the following steps in App Studio.
58-
59-
1. Open Microsoft Teams.
60-
1. Navigate to Teams store by clicking Apps on the Teams app bar (left navigation).
61-
62-
![teams menu apps](../images/teams-menu-apps.png)
63-
64-
1. Use search to find App Studio.
65-
66-
![teams menu apps](../images/teams-apps-studio.png)
67-
68-
1. Install or open App Studio.
69-
70-
![teams menu apps](../images/teams-install-app-studio.png)
71-
72-
1. Open App Studio.
73-
1. Navigate to the Manifest editor tab.
74-
1. Click Create a new app.
75-
1. Provide required app information on the form:
76-
1. **Short name** – Company Intranet [use something descriptive that supports your scenario]
77-
1. **Full name** – Contoso Intranet
78-
1. Click **Generate** to create a unique, random App ID
79-
1. **Package Name** – com.contoso.portal.app – Use a value that is unique to your environment
80-
1. **Version** – 1.0.0
81-
1. **Description** – My first intranet application
82-
1. **Full description** – My awesome intranet application to embed modern SharePoint in Teams
83-
1. **Developer Information - Name** – Your name
84-
1. **Developer Information - Website** – Your web site – company web site or whatever is your preference
85-
1. **Partner information** – Leave empty
86-
1. **App URLs** – These could be pages in your portal, but you can randomize the value for this tutorial
87-
1. **Terms of use** – Could be also a page in your portal, but let us use random value in this tutorial
88-
1. **Branding** – These would be visible on the app bar (left navigation) and in the app installation user interface. You can leave them as they are for the tutorial, but we absolutely recommend updating them for your production configuration
89-
1. See branding guidance for the image and outline settings in the Microsoft Teams official documentation
90-
91-
1. Navigate to Tabs under Capabilities
92-
93-
![teams menu apps](../images/teams-app-studio-tabs.png)
94-
95-
1. Click **Add** under the **Add a personal tab**
96-
1. Fill in the **Personal tab** details based on your own setup
97-
1. **Name** – Intranet
98-
1. **Entity ID** – 19991 (Use random number)
99-
1. **Content URL** – https://[domainUrl]/_layouts/15/teamslogon.aspx?SPFX=true&dest=[pageUrl]
100-
1. Update the URL based on your own tenant details. Example URL would be https://contoso.sharepoint.com/_layouts/15/teamslogon.aspx?SPFX=true&dest=/sites/theperspective/SitePages/Home.aspx
101-
1. The URL will need to be encoded to avoid issues accessing it across different devices.
102-
1. **Website URL** – You can leave this optional value empty
103-
104-
1. Navigate to **Domains and Permissions** under **Finish**
105-
106-
![teams menu apps](../images/teams-app-studio-domains.png)
107-
108-
1. Make sure that **Domains from your tabs** have your ___domain on it
109-
1. Example ___domain value `contoso.sharepoint.com`
110-
111-
1. Update **AAD App ID** as 00000003-0000-0ff1-ce00-000000000000
112-
1. Include your ___domain URL to the **Single-Sign-On** value
113-
1. Example value `https://contoso.sharepoint.com`
114-
115-
![teams menu apps](../images/teams-app-studio-app-id.png)
116-
117-
1. Navigate to **Test and distribute** under **Finish**
118-
119-
![teams menu apps](../images/teams-app-studio-test.png)
120-
121-
1. Install the solution to your usage by clicking **Install**
122-
1. This will enable you to test the configuration and validate the solution setup
123-
124-
![teams menu apps](../images/teams-app-studio-test-distribute.png)
125-
126-
1. Click **Add** to install the application to your personal usage from the App Studio
127-
128-
![teams menu apps](../images/teams-portal-app.png)
129-
130-
1. Verify that the application is working based on your objectives in both web and desktop.
131-
132-
![teams menu apps](../images/teams-intranet-app-embedded.png)
133-
134-
Notice that you can modify the settings by going back to **App Studio** and editing the manifest using the **Manifest editor**.
135-
136-
You can deploy the app to all users or to targeted users by downloading the manifest from the **App Studio** and publishing it to the app catalog in Teams administration.
137-
138-
139-
> [!IMPORTANT]
140-
> To deploy this solution to users in your tenant, you must have sufficient permissions to deploy apps in the Microsoft Teams app catalog.
141-
142-
## Sample manifest of the solution
143-
144-
If you download the solution file from the App Studio and see the detailed configuration of the manifest file, it has the following configuration to enable it to work properly in web and in desktop modes.
145-
146-
```json
147-
{
148-
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.6/MicrosoftTeams.schema.json",
149-
"manifestVersion": "1.6",
150-
"version": "1.0.0",
151-
"showLoadingIndicator": false,
152-
"id": "7ad6f150-cba8-4c39-81ce-c4da8e4100d9",
153-
"packageName": "com.contoso.portal.app",
154-
"developer": {
155-
"name": "Portal App",
156-
"websiteUrl": "https://www.contoso.com",
157-
"privacyUrl": "https://www.contoso.com/privacy",
158-
"termsOfUseUrl": "https://www.contoso.com/temsofuse"
159-
},
160-
"icons": {
161-
"color": "color.png",
162-
"outline": "outline.png"
163-
},
164-
"name": {
165-
"short": "Portal App",
166-
"full": "Our modern portal"
167-
},
168-
"description": {
169-
"short": "My first portal application",
170-
"full": "My awesome portal application to embed modern SharePoint to our Teams setup"
171-
},
172-
"accentColor": "#FFFFFF",
173-
"staticTabs": [
174-
{
175-
"entityId": "19991",
176-
"name": "Portal",
177-
"contentUrl": "https://contoso.sharepoint.com/_layouts/15/teamslogon.aspx?SPFX=true&dest=/sites/theperspective/SitePages/Home.aspx",
178-
"scopes": [
179-
"personal"
180-
]
181-
}
182-
],
183-
"permissions": [
184-
"identity",
185-
"messageTeamMembers"
186-
],
187-
"validDomains": [
188-
"m365pnp.sharepoint.com"
189-
],
190-
"webApplicationInfo": {
191-
"id": "00000003-0000-0ff1-ce00-000000000000",
192-
"resource": "https://contoso.sharepoint.com"
193-
}
194-
}
195-
```
196-
197-
## Controlling app visibility in Microsoft Teams
198-
199-
You can also publish the app to be visible by default for all employees in your tenant by using the Teams app setup policies in the Microsoft Teams admin center. This provides you options to control which apps are visible to which users. NOTE: App policies do not apply to Guests of the tenant.
200-
201-
![Teams app policies in Teams admin user interface](../images/teams-app-policies.png)
202-
203-
See more information on these options from the following Microsoft Teams documentation.
204-
205-
- [Manage app setup policies in Microsoft Teams](https://docs.microsoft.com/microsoftteams/teams-app-setup-policies)
206-
207-
## See also
208-
209-
- [Building Microsoft Teams tab using SharePoint Framework](../spfx/web-parts/get-started/using-web-part-as-ms-teams-tab.md)
12+
>[!Important]
13+
> When you are planning to embed SharePoint sites in Microsoft Teams, please use the [Viva Connections Desktop model](https://docs.microsoft.com/en-gb/SharePoint/viva-connections) for the optimal experience.

0 commit comments

Comments
 (0)