How to use @microsoft/teams-js - 10 common examples
To help you get started, we’ve selected a few @microsoft/teams-js examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
OfficeDev / microsoft-teams-apps-greatideas / Source / Microsoft.Teams.Apps.SubmitIdea / ClientApp / src / components / manage-category / manage-category.tsx View on Github 
async componentDidMount() {
microsoftTeams.initialize();
microsoftTeams.getContext((context) => {
this.userObjectId = context.userObjectId;
// Initialize application insights for logging events and errors.
this.appInsights = getApplicationInsightsInstance(this.telemetry, browserHistory);
this.getCategory();
});
}public componentWillMount() {
this.updateTheme(this.getQueryVariable("theme"));
this.setState({
fontSize: this.pageFontSize()
});
if (this.inTeams()) {
microsoftTeams.initialize();
microsoftTeams.getContext((context: microsoftTeams.Context) => {
this.setState({
value: context.entityId
});
this.setValidityState(true);
});
microsoftTeams.settings.registerOnSaveHandler((saveEvent: microsoftTeams.settings.SaveEvent) => {
// Calculate host dynamically to enable local debugging
const host = "https://" + window.location.host;
microsoftTeams.settings.setSettings({
contentUrl: host + "/teamsApp1Tab/?data=",
suggestedDisplayName: "teams app1 Tab",
removeUrl: host + "/teamsApp1Tab/remove.html",
entityId: this.state.valueasync componentDidMount() {
microsoftTeams.initialize();
microsoftTeams.getContext((context) => {
this.userObjectId = context.userObjectId;
// Initialize application insights for logging events and errors.
this.appInsights = getApplicationInsightsInstance(this.telemetry, browserHistory);
this.getCategory();
});
}/* Initialize the Teams library before any other SDK calls.
* Initialize throws if called more than once and hence is wrapped in a try-catch to perform a safe initialization.
*/
microsoftTeams.initialize();
}
catch (e) {
}
finally {
this.state = {
groupId: null,
upn: null
};
/** Pass the Context interface to the initialize function below */
microsoftTeams.getContext(context => this.initialize(context as any));
}
}(token) => {
// After the access token is acquired, return to MS Teams, sending the acquired token
microsoftTeams.authentication.notifySuccess(token.accessToken);
},
(error) => {private getGraphData() {
this.setState({
graphData: "Loading..."
});
microsoftTeams.authentication.authenticate({
url: "/auth.html",
width: 400,
height: 400,
successCallback: (data) => {
// Note: token is only good for one hour
this.token = data!;
this.getData(this.token);
},
failureCallback: (err) => {
this.setState({
graphData: "Failed to authenticate and get token.<br>" + err
});
}
});
}fontSize: this.pageFontSize()
});
if (this.inTeams()) {
microsoftTeams.initialize();
microsoftTeams.getContext((context: microsoftTeams.Context) => {
this.tenantId = context.tid;
this.selectedOption = context.entityId;
this.setState({
selectedConfiguration: context.entityId
});
this.setValidityState(true);
});
microsoftTeams.settings.registerOnSaveHandler((saveEvent: microsoftTeams.settings.SaveEvent) => {
// Calculate host dynamically to enable local debugging
const host = "https://" + window.location.host;
microsoftTeams.settings.setSettings({
contentUrl: host + "/teamsApp1Tab/?data=",
suggestedDisplayName: "teams app1 Tab",
removeUrl: host + "/teamsApp1Tab/remove.html",
entityId: this.state.selectedConfiguration
});
saveEvent.notifySuccess();
});
} else {
}
}microsoftTeams.settings.registerOnSaveHandler((saveEvent: microsoftTeams.settings.SaveEvent) => {
// Calculate host dynamically to enable local debugging
const host = "https://" + window.location.host;
microsoftTeams.settings.setSettings({
contentUrl: host + "/teamsApp1Tab/?data=",
suggestedDisplayName: "teams app1 Tab",
removeUrl: host + "/teamsApp1Tab/remove.html",
entityId: this.state.value
});
saveEvent.notifySuccess();
});
} else {this.updateTheme(this.getQueryVariable("theme"));
this.setState({
fontSize: this.pageFontSize()
});
if (this.inTeams()) {
microsoftTeams.initialize();
microsoftTeams.getContext((context: microsoftTeams.Context) => {
this.setState({
value: context.entityId
});
this.setValidityState(true);
});
microsoftTeams.settings.registerOnSaveHandler((saveEvent: microsoftTeams.settings.SaveEvent) => {
// Calculate host dynamically to enable local debugging
const host = "https://" + window.location.host;
microsoftTeams.settings.setSettings({
contentUrl: host + "/teamsApp1Tab/?data=",
suggestedDisplayName: "teams app1 Tab",
removeUrl: host + "/teamsApp1Tab/remove.html",
entityId: this.state.value
});
saveEvent.notifySuccess();
});
} else {
}
}microsoftTeams.settings.registerOnSaveHandler((saveEvent: microsoftTeams.settings.SaveEvent) => {
// Calculate host dynamically to enable local debugging
const host = "https://" + window.location.host;
microsoftTeams.settings.setSettings({
contentUrl: host + "/teamsApp1Tab/?data=",
suggestedDisplayName: "teams app1 Tab",
removeUrl: host + "/teamsApp1Tab/remove.html",
entityId: this.state.selectedConfiguration
});
saveEvent.notifySuccess();
});
} else {@microsoft/teams-js
Microsoft Client SDK for building app for Microsoft hosts
