Reading Time: 8 minutes

Starting with SharePoint Framework v1.7 plusbeta, you can build your Microsoft Team tabs using SharePoint Framework tooling and use SharePoint as a host for your solutions.

Current State of SharePoint Extensibility:-

Build modern SP solutions

  • Full-trust JavaScript based framework running in the main app
  • Use modern auth to integrate with Graph

SP add-ins 

  • Provider-hosted based via iframes
  • Low-trust, end user acquisition model
  • Distribute via Office Store

Current State of Teams Platform:-

Build apps to custom tailor your teams

  • Modern embedding via tabs
  • Enhance integrations via bots, messaging extensions, Adaptive cards, and Graph
  • Add communication services, e.g. programmable voice and video

 

Common Needs to integrate SharePoint and Teams :-
  • Enable users to collaborate around the same content in SharePoint and Teams
  • Centralized Admin experience and tools, including LOB app distribution
  • Common developer framework for building solutions targeting

There are following benefits on using SharePoint Framework as the platform for your Microsoft Teams tabs:

  • Development model is similar as for SharePoint Framework web parts
  • Technically any web part can be exposed as a tab in the Microsoft
  • You have difference scoping options on exposing your custom tab as a web part and tab in your tenant
  • Your tab will be executed in the context of the underlaying SharePoint site behind of the specific team. This means that you can take advantage of any SharePoint specific APIs or functionalities in your web part.

Prerequisites 

As part of the Developer Preview of SharePoint Framework Teams Tabs, you will need to explicitly deploy the Microsoft Teams app to a Team in Microsoft Team. Your tenant will also need to support Side loading of external apps for the Microsoft Teams, so that you can deploy the app to a specific Team and use it

  • Go to https://portal.microsoft.com/AdminPortal/Home#/Settings/ServicesAndAddIns
  • Log on with your tenant admin credentials
  • Settings  Services & add-Ins
  • Click on Microsoft Teams > Apps
  • Turn on “Enable sideloading of external apps”
  • Scroll to the bottom and press “Save”

This setting has to be done only once in a tenant level, follow the UI steps

  • Go to to the Microsoft 365 admin center by selecting Admin from the app launcher.

  • Choose Settings and Services & add-ins from the left menu

  • Select Microsoft Teams from the list of services you want to manage

  • Extend the Apps section under Tenant-wide settings

  • Ensure that Allow sideloading of external apps setting is enabled

  • Click Save

Single platform for hosted experiences

Build your solution to run across Teams, SharePoint, and (eventually) all of Office.

Bring Your SPFx Web Part in Teams

 – SPFx Targeting Teams Tabs

  • SPFX as the standard way for Enterprise Devs and SIs to Develop “O365-hosted” solutions across SharePoint and Teams
  • Developers will be able to “target” the environments in the manifest.json
  • Single point of governance in the App Catalog
  • Standard “features” of SPFx
    • Toolchain
    • Authentication
    • SP, Graph and WebAPI Access
    • CDN hosting
    • Config experience
    • Solution hosting
  • Component is able to get the right application context

  1. SPFx Teams solutions are deployed to Office 365 tenants using tenant app catalog
  2. Teams manifest file is created and deployed in Teams LoB Catalog
  3. User selects the SPFx application like any other tab in MS Teams “Add a tab” experience
  4. Configuration panel is displayed and, once saved, information are stored in the SPO site connected to the group

  1. SPFx component renders in a dedicated _layout page which is iframed in Teams
  2. Teams and SharePoint site context are available to developer
  3. Code is loaded from SharePoint asset library where it was deployed at time of package upload
  4. Alternatively, code can also run in different CDN location

Authentication

  • Silent authentication between Teams rich client and SPO
    • Teams provides the token client side to SharePoint
    • It convert it to cookie server side
    • The _layout system page that hosts the SPFx solution renders: no additional auth required
    • Full access to SharePoint REST APIs
  • When / if the component requires to access Graph / Web APIs:
    • We get the auth token from the client: no permissions there, we use it as bootstrap token
    • SPFx client libraries understand that the call is coming from a Teams rich client environment*
      • Bootstrap token is sent to AAD using the “on behalf of” flow to obtain an access token for the requested resource in exchange for the bootstrap token
      • AAD returns the access token to SPO. The component can now execute the Web API call.

Note: This lab requires that you are using plusbeta version of the SharePoint Framework 1.7 as the capabilities are not yet ready for production usage. You can install latest SharePoint Framwork version to your development machine by using following command: npm install -g @microsoft/generator-sharepoint. Capability is ONLY available in targeted release tenants.

i.e yo @microsoft/sharepoint –plusbeta to create new webpart

Step 1: Create a web part

  • Open Command Prompt and move to your project folder.
  • Create a new project directory

md spfxTOteams

  • Change to project directory

cd spfxTOteams

  • Create a new client-side web part solution by running the Yeoman SharePoint Generator. Notice that we are using the plusbeta switch as the capability in still in preview:

yo @microsoft/sharepoint –plusbeta

  • When Prompted:

  • Enter your webpart name “FirstTeamsWebpart“
  • Add description
  • Accept the default No JavaScipt web framework option for the framework, and then select Enter to continue.
  • Yeoman installs the required dependencies

  • First webpart created
  • Open the solution, Type Code .
  • It will open the web part project in Visual Studio Code
  • Starting with the SharePoint Framework v1.7, scaffolding will also include additional teams folder in the solution structure, with default configuration for your web parts, so that you can get started with Teams tab development as easily as possible.
  • Teams folder contains following three files:manifest.json – Manifest file for the Teams applications
    tab20x20.png – Default small picture for a tab
    tab96x96.png – Default large picture for a tab
  • manifest.json file was automatically updated with the entries which you provided in the Yeoman questions. Let’s open this file and see most important elements in it for exposing the web part in the Teams.
    • “packageName”- Scaffolding updated this value based on the web part title you provided.
    • “icons”- This is a section which you would update for your custom images.
    • “configurationUrl” – This is the URL automatically updated to match unique web part ID of the web part, which you just created.
  • Updating code to be aware of the Microsoft Teams context
  • Open src\webparts\firstTeamsWebpart\FirstTeamsWebpartWebPart.ts for the needed edits on making our solution aware of the Microsoft Teams context, if it’s used as a tab.
  • Add the following private variable inside the FirstTeamsWebpartWebPart class. We will be storing information around the Microsoft Teams context in this variable.

[code language=”javascript”]
// This variable has been added
private _teamsContext: microsoftTeams.Context;

[/code]

  • Add new onInit method inside of the FirstTeamsWebPart class, just below the private variable, which we just added with following content.

[code language=”javascript”]
protected onInit(): Promise<any> {
let retVal: Promise<any> = Promise.resolve();
if (this.context.microsoftTeams) {
retVal = new Promise((resolve, _reject) => {
this.context.microsoftTeams.getContext(context => {
this._teamsContext = context;
resolve();
});
});
}
return retVal;
}
[/code]

  • Update the render method as follows. Notice how we are rendering different content dependent if the code is rendered as a tab in Microsoft Teams or as a web part in SharePoint.

[code language=”java”]</pre>
public render(): void {

let title: string = ”;
let subTitle: string = ”;
let siteTabTitle: string = ”;

if (this._teamsContext) {
// We have Teams context for the web part
title = "Welcome to Teams!";
subTitle = "Building custom enterprise tabs for your business.";
siteTabTitle = "We are in the context of following Teams team: " + this._teamsContext.teamName;
}
else
{
// We are rendered in normal SharePoint context
title = "Welcome to SharePoint!";
subTitle = "Customize SharePoint experiences using Web Parts.";
siteTabTitle = "We are in the context of following SharePoint site: " + this.context.pageContext.web.title;
}

this.domElement.innerHTML = `
<div class="${ styles.firstTeamsWebpart }">
<div class="${ styles.container }">
<div class="${ styles.row }">
<div class="${ styles.column }">
<span class="${ styles.title }">` + title + `</span>
<p class="${ styles.subTitle }">` + subTitle + `</p>
<p class="${ styles.subTitle }">` + siteTabTitle + `</p>
<p class="${ styles.description }">${escape(this.properties.description)}</p>
<a href="https://aka.ms/spfx" class="${ styles.button }">
<span class="${ styles.label }">Learn more</span>
</a>
</div>
</div>
</div>
</div>`;
}
<pre>[/code]

 

Note : You can find full description of the information available through Microsoft Teams context for Microsoft Teams tabs from the Microsoft Teams developer documentation.

Packaging and deploying your web part to SharePoint

  1. Build it
    • gulp serve
  2. Execute the following task to bundle your solution. This executes a release build of your project by using a dynamic label as the host URL for your assets. This URL is automatically updated based on your tenant CDN settings
    • gulp bundle –ship
  3. Execute the following task to package your solution. This creates an updated spfx-t-oteams.sppkg package on the sharepoint/solution folder
    • gulp package-solution –ship

Deploy the Solution

  • Go to your site’s app catalog. https://tenant.sharepoint.com/sites/appcatalog/SitePages/Home.aspx
  • Upload or drag and drop the spfx-t-oteams.sppkg to the app catalog

  • Click Deploy to deploy it

  • Go to Teams

  • Create a new Team to deploy the SPFx webpart

  • Go to the SharePoint Team site https://tenant.sharepoint.com/sites/SPFxtoTeams
  • Install the App (SPFx webpart)
  • Edit the Page and add the web part in sharepoint

Add the Web part in Teams

  • go to –> teams folder i.e spfxTOteams\teams
  • Select the three files
    • manifest.json
    • tab20x20.png
    • tab96x96.png
  • Create a zip file which contains the manifest.json file and the image files in the root of the zip file. You can for example call the Zip file as spfxToteams.zip

  • Go to Teams again and open it

  • Choose a Team “SPFxtoTeams” and select Manage team from the … menu.

  • Move to Apps tab
  • Choose Upload a custom app from the bottom right corner
  • Upload spfxToteams.zip from the Teams folder under your newly created solution and ensure that it’s properly visible in the list of Apps.

  • Uploaded it look like below

  • Move to a channel in the Team where you just uploaded the solution. In below picture we have activated General channel in Team
  • Click +
  • Click your custom Tab called FirstTeamsWebpart in the list

  • Notice how you can parametrize the tab instance based on the exposed properties. Click Save

  • Your custom tab has been added on the Microsoft Teams channel and you can see how the code is reacting that it’s in Microsoft Teams context. Theme of the web part is by default coming from the under laying SharePoint site.

Now we learned to access the SPFx webpart via Teams Tab.

Sharing is caring…