Esercitazione: aggiungere logica condizionale per SharePoint o Microsoft Teams
- 12 minuti
In questa esercitazione, aggiornerai la Web part di SharePoint Framework dell’esercitazione precedente per mostrare informazioni diverse a seconda che sia in esecuzione in un contesto di SharePoint o Microsoft Teams.
Individuare e aprire il file ./src/webparts/spFxTeamsTogether/SpFxTeamsTogetherWebPart.ts.
Individuare il metodo _getEnvironmentMessage() nella classe SpFxTeamsTogetherWebPart. Questo codice crea un messaggio che indica se la web part è in esecuzione in SharePoint o Teams controllando il valore di this.context.sdks.microsoftTeams. Se l'oggetto microsoftTeams ha un valore, la web part viene eseguita in Teams. Se l'oggetto microsoftTeams è undefined, la web part non è in esecuzione in Teams:
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;
});
}
return Promise.resolve(this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentSharePoint : strings.AppSharePointEnvironment);
}
Sostituire l'implementazione del metodo _getEnvironmentMessage() esistente con il codice seguente. Non solo costruisce un messaggio che indica se la web part è in esecuzione in SharePoint o Teams, ma usa anche l'oggetto contesto appropriato per includere il nome del team o del sito SharePoint in cui la web part è attualmente in esecuzione:
private _getEnvironmentMessage(): Promise<string> {
let environmentMessage: string = '';
if (!!this.context.sdks.microsoftTeams) { // running in Teams, office.com or Outlook
return this.context.sdks.microsoftTeams.teamsJs.app.getContext()
.then(teamsContext => {
environmentMessage = this.context.isServedFromLocalhost
? strings.AppLocalEnvironmentTeams
: strings.AppTeamsTabEnvironment;
environmentMessage += `. Team name: ${teamsContext.team?.displayName}`;
return environmentMessage;
});
} else {
environmentMessage = this.context.isServedFromLocalhost
? strings.AppLocalEnvironmentTeams
: strings.AppTeamsTabEnvironment;
environmentMessage += `. Site name: ${this.context.pageContext.web.title}`;
return Promise.resolve(environmentMessage);
}
}
Creare un pacchetto e distribuire la Web part
Compilare il progetto aprendo un prompt dei comandi e passando alla cartella radice del progetto. Immettere quindi il comando seguente:
gulp build
Creare poi un bundle di produzione del progetto eseguendo il comando seguente nella riga di comando dalla radice del progetto:
gulp bundle --ship
Infine, creare un pacchetto di distribuzione del progetto eseguendo il comando seguente nella riga di comando dalla radice del progetto:
gulp package-solution --ship
Passare al catalogo di app tenant moderno, ovvero alla pagina Gestisci app .
Individuare il file creato dall'attività gulp, disponibile nella cartella ./sharepoint/solution con il nome *.sppkg.
Trascinare il file nella raccolta App per SharePoint nel browser. Quando richiesto, selezionare Sostituisci.
Nel pannello Abilita app selezionare il pulsante di opzione Abilita questa app e aggiungerla a tutti i siti e quindi selezionare Abilita app.
Nel pannello Questa app è stata abilitata selezionare Chiudi.
Testare le modifiche
Tornare alla pagina di SharePoint in cui è stata aggiunta la Web part nell'esercitazione precedente.
Notare come la pagina mostra che ci si trova attualmente in un contesto di SharePoint e visualizza il nome del sito di SharePoint corrente:
Tornare ora al team di Microsoft Teams e selezionare la scheda aggiunta in precedenza. Notare come il messaggio indica che si è attualmente in Teams e il nome del team:
Riepilogo
In questa esercitazione, hai aggiornato la Web part di SharePoint Framework dell’esercitazione precedente per mostrare informazioni diverse a seconda che sia in esecuzione in un contesto di SharePoint o Microsoft Teams.