|
1 | 1 | ---
|
2 | 2 | title: Embedding modern SharePoint pages in Microsoft Teams as personal apps (preview)
|
3 | 3 | 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 |
5 | 5 | localization_priority: Priority
|
6 | 6 | ---
|
7 | 7 |
|
8 | 8 | # Embedding modern SharePoint pages in Microsoft Teams as personal apps (preview)
|
9 | 9 |
|
10 | 10 | _**Applies to:** Microsoft 365_
|
11 | 11 |
|
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 |
| - |
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 |
| -  |
63 |
| - |
64 |
| -1. Use search to find App Studio. |
65 |
| - |
66 |
| -  |
67 |
| - |
68 |
| -1. Install or open App Studio. |
69 |
| - |
70 |
| -  |
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 |
| -  |
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 |
| -  |
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 |
| -  |
116 |
| - |
117 |
| -1. Navigate to **Test and distribute** under **Finish** |
118 |
| - |
119 |
| -  |
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 |
| -  |
125 |
| - |
126 |
| -1. Click **Add** to install the application to your personal usage from the App Studio |
127 |
| - |
128 |
| -  |
129 |
| - |
130 |
| -1. Verify that the application is working based on your objectives in both web and desktop. |
131 |
| - |
132 |
| -  |
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 |
| - |
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