Ok, ok, I’ve done a few blog posts on Teams.
https://wardpeter.com/displaying-list-data-in-a-team-tab/
https://wardpeter.com/working-with-spfx-teams-tab/
These are worth a read before you read this blog post, as there’s a knowledge build up and I’m not repeating myself.
This blog post explains how to access external data source. This one in particular- https://calendarific.com/api-documentation
Other Github repositories – https://github.com/peterwardsoho
I’ve broken it down into sections:
Follow the given steps to setup SPFx project for Teams tab as below:
Locate the manifest json file for the web part you want to make available to Teams and modify the supportedHosts properties to include “TeamsTab” as in the following example.
private _teamsContext: microsoftTeams.Context;
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;
}
private _getPublicHolidayFromExternalApi(): Promise<any> {
return this.context.httpClient
.get(
‘https://calendarific.com/api/v2/holidays?&api_key=69f7fb86d8de5f3121b5e6783b7b4fb1d2424ba7&country=us&year=’ + new Date().getFullYear(),
HttpClient.configurations.v1
)
.then((response: HttpClientResponse) => {
return response.json();
})
.then(jsonResponse => {
return jsonResponse;
}) as Promise<any>;
}
“jquery”: {
“path”: “https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”,
“globalName”: “jquery”
},
“bootstrap”: {
“path”: “https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”,
“globalName”: “bootstrap”,
“globalDependencies”: [“jquery”]
}
public render(): void {
SPComponentLoader.loadCss(“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”);
SPComponentLoader.loadCss(“https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css”);
this.domElement.innerHTML = `
<div class=”${ styles.publicHoliday}“>
<div class=”${ styles.container}“>
<div>
<div class=”panel panel-primary”>
<div class=”panel-heading”>
<h4 class=”panel-title”>
Public Holidays
</h4>
</div>
<div class=”panel-body”>
<table id=”tblPublicHolidays” class=${styles.publicHolidayTable} width=”100%”>
</table>
</div>
</div>
</div>
</div>
</div>`;
this.RenderPublicHolidayEntries();
}
private RenderPublicHolidayEntries(): void {
this.context.statusRenderer.displayLoadingIndicator(document.getElementById(“tblPublicHolidays”),“Please wait…”);
var holidaysData = [];
var holidaysDataJsonArr = [];
this._getPublicHolidayFromExternalApi().then((items) => {
holidaysData = items.response.holidays;
for (var i = 0; i < holidaysData.length; i++) {
let states: any;
if (holidaysData[i].states == “All”) {
states = holidaysData[i].states;
}
else {
var statesArr = [];
for (var j = 0; j < holidaysData[i].states.length; j++) {
statesArr.push(holidaysData[i].states[j].name);
}
states = statesArr.toString();
}
holidaysDataJsonArr.push({ Holiday: holidaysData[i].name, Description: holidaysData[i].description, Date: new Date(holidaysData[i].date.iso).toLocaleDateString(), HolidayType: holidaysData[i].type.toString(), Locations: holidaysData[i].locations, States: states });
}
var jsonArray = holidaysDataJsonArr.map(function (item) {
return [
item.Holiday,
item.Description,
item.Date,
item.HolidayType,
item.Locations,
item.States
];
});
$(‘#tblPublicHolidays’).DataTable({
data: jsonArray,
columns: [
{ title: “Holiday” },
{ title: “Description” },
{ title: “Date” },
{ title: “Holiday Type” },
{ title: “Locations” },
{ title: “States” }
]
});
this.context.statusRenderer.clearLoadingIndicator(document.getElementById(“tblPublicHolidays”));
}).catch((error) => {
console.log(“Something went wrong “ + error);
this.context.statusRenderer.clearLoadingIndicator(document.getElementById(“tblPublicHolidays”));
});
}
.container {
width: 100%;
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);
border-radius: 4px;
}
/*Table style*/
.publicHolidayTable {
table-layout: fixed;
width: 100%;
}
.publicHolidayTable thead{
background-color: #337ab7;
color: #fff;
}
.publicHolidayTable th, .publicHolidayTable td{
border: 1px solid #d1cfd0;
text-align: center;
word-break: break-all;
padding: 5px;
}
.publicHolidayTable tr.table-heading{
background-color: #337ab7;
font-size: 18px;
font-weight: bold;
}
.publicHolidayTable .table-links{
color: #058ac8;
}
.publicHolidayTable .table-links:hover{
color: #5e9732;
}
/*Table style*/
Use the App Catalog to make custom business apps available for your SharePoint Online environment.