Create SPFx new project:Open Node.js command prompt and run 'yo @microsoft/sharepoint'
Enable the webpart to be deployed as Teams Tab:
Go to TeamsTabWebPart.manifest.jsonàand ensure the “TeamsTab” is
exist in ‘supportedHosts’.
Enable Tenant wide deployed if needed
1. In this this example, we will configure this
solution as tenant wide deployment, by doing this we won’t have to deploy this
solution individually to each site collection.
2. It would be globally deployed to all Site
collections from app catalog.
3. However please note that if you don’t want
tenant wide deployment of your SPFx solution, you can skip this step. But then
to add this app to MS team, you will have to individual add this solution
on MS Team site collection.
4. For Tenant deployment: go to ./config/package-solution.json,
add attribute “skipFeatureDeployment”: true like below.
Updating webpart code to be read Microsoft Teams context:
Ø
Open ./src/webparts/TeamsTab/TeamsTabWebPart.ts
for the needed edits on making our solution aware of the Microsoft Teams
context, if it’s used as a tab.
Ø
Update the render() method
We can detect if solution is hosted by
Microsoft Teams by checking the this.context.sdks.microsoftTeams
property.
public render(): void {
let title: string = '';
let subTitle: string = '';
let siteTabTitle: string = '';
if (this.context.sdks.microsoftTeams) {
// 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 Team: " + this.context.sdks.microsoftTeams.teamsJs.app.getContext();
}
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 site: " + this.context.pageContext.web.title;
}
this.domElement.innerHTML = `
<div class="${ styles.teamsTab }">
<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.description }">${siteTabTitle}</p>
<p class="${ styles.description }">Description property value - ${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>`;
}
Updating .SCSS file to fix the styles which we used in webpart file:
Ø Open ./src/webparts/TeamsTab/TeamsTabWebPart.module.scss and update the below classes:
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
.teamsTab {
overflow: hidden;
padding: 1em;
color: "[theme:bodyText, default: #323130]";
color: var(--bodyText);
&.teams {
font-family: $ms-font-family-fallbacks;
}
}
.container {
max-width: 700px;
margin: 0px auto;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.row {
@include ms-Grid-row;
@include ms-fontColor-white;
background-color: $ms-color-themeDark;
padding: 20px;
}
.column {
@include ms-Grid-col;
@include ms-lg10;
@include ms-xl8;
@include ms-xlPush2;
@include ms-lgPush1;
}
.title {
@include ms-font-l;
@include ms-fontColor-white;
background-color: $ms-color-themePrimary;
}
.subTitle {
@include ms-font-l;
@include ms-fontColor-white;
}
.description {
@include ms-font-l;
@include ms-fontColor-white;
}
.button {
// Our button
text-decoration: none;
height: 32px;
// Primary Button
min-width: 80px;
background-color: $ms-color-themePrimary;
border-color: $ms-color-themePrimary;
color: $ms-color-white;
// Basic Button
outline: transparent;
position: relative;
font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
-webkit-font-smoothing: antialiased;
font-size: $ms-font-size-m;
font-weight: $ms-font-weight-regular;
border-width: 0;
text-align: center;
cursor: pointer;
display: inline-block;
padding: 0 16px;
.label {
font-weight: $ms-font-weight-semibold;
font-size: $ms-font-size-m;
height: 32px;
line-height: 32px;
margin: 0 4px;
vertical-align: top;
display: inline-block;
}
}
.welcome {
text-align: center;
}
.welcomeImage {
width: 100%;
max-width: 420px;
}
.links {
a {
text-decoration: none;
color: "[theme:link, default:#03787c]";
color: var(--link); // note: CSS Custom Properties support is limited to modern browsers only
&:hover {
text-decoration: underline;
color: "[theme:linkHovered, default: #014446]";
color: var(--linkHovered); // note: CSS Custom Properties support is limited to modern browsers only
}
}
}
Check and verify teams icon and outline:
To sync SPFx webpart
to Teams, we need to make sure our solution has color and outline png file
which is required. You will find this files in teams folder in your project
root directory.
Package and deploy your webpart to SharePoint:
Ø
Execute the following commands to build bundle
your solution. This executes a release build of your project by using a dynamic
label as the host URL for your assets.
gulp bundle --ship
Ø
Execute the following task to package your
solution. This creates an updated teams-tab-webpart.sppkg package on the
sharepoint/solution folder.
gulp package-solution --ship
Ø
Next, you need to deploy the package that was
generated to the tenant App Catalog.
Ø
Go to your tenant's SharePoint App Catalog.
Ø
Upload or drag and drop the
teams-tab-webpart.sppkg to the App Catalog.
