Creare Web part per SharePoint Online e Microsoft Teams

Completato

In questa unità si apprenderà come visualizzare informazioni in base al fatto che la web part SharePoint Framework sia in esecuzione in SharePoint o Microsoft Teams.

Contesto di SharePoint Framework e Microsoft Teams

Tutti i componenti di SharePoint, incluse le Web part lato client, hanno accesso al contesto corrente. Il contesto, disponibile dall'oggetto this.context, consente ai componenti di accedere ai dettagli sulla pagina in cui è in esecuzione il componente.

Il componente può utilizzare il contesto della pagina, accessibile dall'oggetto this.context.pageContext, per ottenere informazioni sulla raccolta siti, il sito, la pagina e l'utente correnti.

Microsoft ha introdotto un nuovo contesto nella versione 1.8 di SharePoint Framework quando ha aggiunto il supporto per la distribuzione di Web part lato client come schede di Microsoft Teams. L'oggetto this.context.sdks.microsoftTeams è un riferimento dell'oggetto microsoftTeams disponibile nel pacchetto @microsoft/teams-js .

Una web part sul lato client può rilevare se è in esecuzione in SharePoint o Microsoft Teams controllando se l'oggetto microsoftTeams è impostato su un valore o non è definito. Se è undefined, il componente non è in esecuzione in Microsoft Teams.

Usare il contesto di Microsoft Teams

Verrà illustrato ora come il componente può funzionare con il contesto di Microsoft Teams.

Nell'esempio di codice seguente viene illustrato un metodo che crea un messaggio che indica se la web part è in esecuzione in SharePoint, Microsoft Teams o in una delle opzioni di Office.

private _getEnvironmentMessage(): Promise<string> {
    if (!!this.context.sdks.microsoftTeams) { // running in Teams, office.com or Outlook
      return this.context.sdks.microsoftTeams.teamsJs.app.getContext()
        .then(context => {
          let environmentMessage: string = '';
          switch (context.app.host.name) {
            case 'Office': // running in Office
              environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentOffice : strings.AppOfficeEnvironment;
              break;
            case 'Outlook': // running in Outlook
              environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentOutlook : strings.AppOutlookEnvironment;
              break;
            case 'Teams': // running in Teams
              environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentTeams : strings.AppTeamsTabEnvironment;
              break;
            default:
              throw new Error('Unknown host');
          }

          return environmentMessage;
        });
}

Riepilogo

In questa unità è stato illustrato come visualizzare in modo condizionale le informazioni a seconda che la Web part lato client di SharePoint Framework sia in esecuzione in un ambiente SharePoint o Microsoft Teams.