Post
Ask Question

SharePoint Framework v1.10: Build MS Teams Personal App

Overview

SharePoint Framework v1.8 supported hosting SPFx web parts as a tab inside MS Teams. SPFx v1.10 now supports creating solutions in Microsoft Teams for building the personal app. Personal apps offer a view of your key application data from across teams and can either be acquired individually or deployed across Teams.
In this article, we will get an overview of the personal app and how to build it with SPFx.
 

Upgrade to SPFx v1.10

On the command prompt, execute the below command to list out the outdated npm packages.
  1. npm outdated --global  
 
Upgrade to SPFx v1.10 by running below command:
  1. npm update -g @microsoft/generator-sharepoint  
 

Overview of Personal Apps in MS Teams

A personal app is an app with a personal scope. As a developer, you can develop a version of your app that is built for the individual user. It can have a collection of tabs and a bot. A personal app is available from the personal app flyout.
 
 
 
 

Develop SPFx solution for MS Teams Personal App

Follow the below steps to develop the SPFx solution.
1. Open a command prompt. Create a directory for the SPFx solution.
  1. md spfx-ms-teams-personal-app  
2. Navigate to the directory.
  1. cd spfx-ms-teams-personal-app  
3. Run the Yeoman SharePoint Generator to create the solution.
  1. yo @microsoft/sharepoint  
4. Yeoman generator will present you with the wizard by asking questions about the solution to be created.
 
 
When prompted:
  • Accept the default spfx-ms-teams-personal-app as your solution name, and then select Enter.
  • Select SharePoint Online only (latest), and then select Enter.
  • Select Use the current folder as the location for the files.
  • Select y to ensure that your web part is automatically deployed tenant-wide when it's added to the tenant App Catalog.
  • Select N on the question if solution contains unique permissions.
  • Select WebPart as the client-side component type to be created.
  • Enter MyTeamsPersonalApp for the web part name, and then select Enter.
  • Enter the description of the web part.
  • Select No JavaScript framework to develop the web part.
5. Yeoman generator will perform the scaffolding process to generate the solution. The scaffolding process will take a significant amount of time.
6. Once the scaffolding process is completed, lock down the version of the project dependencies by running below command.
  1. npm shrinkwrap  
7. In the command prompt type below command to open the solution in the code editor of your choice.
  1. code .  
 

Update web part manifest

Update the web part manifest to make it available as a personal app in MS Teams.
1. Open manifest json file for the web part.
2. Modify the supportedHosts properties to include " TeamsPersonalApp".
  1. {  
  2.   "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",  
  3.   "id": "0648ced7-f57d-40f3-b9ed-b4152d877b52",  
  4.   "alias": "MyTeamsPersonalAppWebPart",  
  5.   "componentType": "WebPart",  
  6.   
  7.   // The "*" signifies that the version should be taken from the package.json  
  8.   "version": "*",  
  9.   "manifestVersion": 2,  
  10.   
  11.   // If true, the component can only be installed on sites where Custom Script is allowed.  
  12.   // Components that allow authors to embed arbitrary script code should set this to true.  
  13.   // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f  
  14.   "requiresCustomScript": false,  
  15.   "supportedHosts": ["SharePointWebPart", "TeamsPersonalApp"],  
  16.   
  17.   "preconfiguredEntries": [{  
  18.     "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other  
  19.     "group": { "default": "Other" },  
  20.     "title": { "default": "MyTeamsPersonalApp" },  
  21.     "description": { "default": "MyTeamsPersonalApp description" },  
  22.     "officeFabricIconFontName": "Page",  
  23.     "properties": {  
  24.       "description": "MyTeamsPersonalApp"  
  25.     }  
  26.   }]  
  27. }  
 
3. Open web part file at “src\webparts\myTeamsPersonalApp\MyTeamsPersonalAppWebPart.ts”
4. Update the render method as below:
  1. public render(): void {  
  2.   let title: string = '';  
  3.   let subTitle: string = '';  
  4.   let siteTabTitle: string = '';  
  5.   
  6.   if (this.context.sdks.microsoftTeams) {  
  7.     // We have teams context for the web part  
  8.     title = "Welcome to Teams!";  
  9.     subTitle = "Building custom enterprise tabs for your business.";  
  10.     siteTabTitle = "We are in the context of following Team: " + this.context.sdks.microsoftTeams.context.teamName;  
  11.   }  
  12.   else {  
  13.     // We are rendered in normal SharePoint context  
  14.     title = "Welcome to SharePoint!";  
  15.     subTitle = "Customize SharePoint experiences using Web Parts.";  
  16.     siteTabTitle = "We are in the context of following site: " + this.context.pageContext.web.title;  
  17.   }  
  18.   
  19.   this.domElement.innerHTML = `  
  20.   <div class="${ styles.myTeamsPersonalApp}">  
  21.     <div class="${ styles.container}">  
  22.       <div class="${ styles.row}">  
  23.         <div class="${ styles.column}">  
  24.           <span class="${ styles.title}">${title}</span>  
  25.           <p class="${ styles.subTitle}">${subTitle}</p>  
  26.           <p class="${ styles.description}">${siteTabTitle}</p>  
  27.           <p class="${ styles.description}">Description property value - ${escape(this.properties.description)}</p>  
  28.           <a href="https://aka.ms/spfx" class="${ styles.button}">  
  29.             <span class="${ styles.label}">Learn more</span>  
  30.           </a>  
  31.         </div>  
  32.       </div>  
  33.     </div>  
  34.   </div>`;  
  35. }  
 
 

Package and deploy web part to SharePoint

1. Execute the below command to build bundle your solution.
  1. gulp bundle --ship  
2. Execute the below command to package your solution.
  1. gulp package-solution --ship  
The output package (.sppkg) is available under the sharepoint/solution folder.
 
3. Upload the package (.sppkg) to the SharePoint app catalog.
4. Ensure that the Make this solution available to all sites in the organization option is selected, so that the web part can be used from the Microsoft Teams side.
 
 
5. Click Deploy.
6. Select the spfx-ms-teams-personal-app package in the SharePoint tenant App Catalog and click the Sync to Teams button in the ribbon at the Files tab to make the web part available in Microsoft Teams.
 
 
 
 

Test Personal App in MS Teams

Follow the below steps to verify the SPFx web part appearing as Personal App in MS Teams.
1. Open MS Teams desktop application.
2. Click Apps > Built for <tenant>
3. Click our app (MyTeamsPersoanlApp).
 
 
4. Click Add.
 
 
 
5. The SPFx web part is added as a personal app.
 
 
 

Summary

A personal app in MS Teams is an app with a personal scope. SPFx v1.10 now supports creating solutions in Microsoft Teams for building the personal app. Personal apps offer a view of your key application data from across teams and can either be acquired individually or deployed across Teams.
 
 

Code Download

Code developed during this article can be downloaded from Github.


Similar Articles