Esercitazione - Distribuire soluzioni SharePoint Framework in Microsoft Teams
- 13 minuti
In questo esercizio si creerà una soluzione web part SharePoint Framework che funziona sia in SharePoint Online che come scheda in Microsoft Teams.
Prerequisiti
Importante
Nella maggior parte dei casi, è consigliabile l'installazione dell'ultima versione di tali strumenti. Le versioni qui elencate sono state utilizzate durante la pubblicazione di questo modulo e quando è stato testato per l'ultima volta.
- Node.js v18.*
- Gulp-cli v3.*
- Yeoman v5.*
- Yeoman Generator per SharePoint v1.20.0
- Visual Studio Code
Creare un nuovo progetto SharePoint Framework
Aprire un prompt dei comandi e passare alla cartella in cui si vuole creare il progetto.
Eseguire il generatore Yeoman di SharePoint tramite il seguente comando:
yo @microsoft/sharepoint
Usare le informazioni seguenti per completare le istruzioni visualizzate (se vengono presentate opzioni aggiuntive, accettare la risposta predefinita):
- Qual è il nome della soluzione?: spfxteams
- Che tipo di componente lato client si vuole creare?: Web part
- Qual è il nome della web part?: SpFx Teams Together
- Quale modello si vuole usare? Nessun framework
Dopo aver effettuato il provisioning delle cartelle necessarie per il progetto, il generatore installerà tutti i pacchetti di dipendenze eseguendo npm install automaticamente. Dopo che npm ha completato il download di tutte le dipendenze, aprire il progetto in Visual Studio Code.
Abilitare la web part da usare in Microsoft Teams
Individuare e aprire il file ./src/webparts/spFxTeamsTogether/SpFxTeamsTogetherWebPart.manifest.json:
Nel file manifesto della web part individuare la proprietà supportedHosts. Verificare che il valore della proprietà includa sia SharePointWebPart che TeamsTab. Va bene se il valore della proprietà include anche TeamsPersonalApp e/o SharePointFullPage:
"supportedHosts": ["SharePointWebPart", "TeamsTab"],
Creare e distribuire il pacchetto dell'app Microsoft Teams
Da notare che il progetto contiene una cartella teams che contiene due immagini. Queste vengono usate in Microsoft Teams per visualizzare la scheda personalizzata.
Nota
Si potrebbe notare che non è presente alcun file manifest.json . Il file manifesto può essere generato automaticamente da SharePoint dal sito Catalogo app oppure è possibile crearlo manualmente. Per altre informazioni sulla creazione manuale del file manifesto, vedere la documentazione: Opzioni di distribuzione per soluzioni SharePoint Framework per Microsoft Teams.
In questo esercizio si creerà manualmente il file manifesto di Microsoft Teams in modo da acquisire familiarità con il relativo contenuto.
Creare manualmente il manifesto di Microsoft Teams
Individuare la cartella ./teams nel progetto.
Creare un nuovo file manifest.json nella cartella teams e aggiungere il codice seguente:
{
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.19/MicrosoftTeams.schema.json",
"manifestVersion": "1.19",
"id": "{{SPFX_COMPONENT_ID}}",
"version": "1.0.0",
"developer": {
"name": "Parker Porcupine",
"websiteUrl": "https://products.office.com/en-us/sharepoint/collaboration",
"privacyUrl": "https://privacy.microsoft.com/en-us/privacystatement",
"termsOfUseUrl": "https://www.microsoft.com/en-us/servicesagreement"
},
"name": {
"short": "{{SPFX_COMPONENT_NAME}}"
},
"description": {
"short": "{{SPFX_COMPONENT_SHORT_DESCRIPTION}}",
"full": "{{SPFX_COMPONENT_LONG_DESCRIPTION}}"
},
"icons": {
"outline": "{{SPFX_COMPONENT_ID}}_outline.png",
"color": "{{SPFX_COMPONENT_ID}}_color.png"
},
"accentColor": "#004578",
"configurableTabs": [
{
"configurationUrl": "https://{teamSiteDomain}{teamSitePath}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest={teamSitePath}/_layouts/15/teamshostedapp.aspx%3FopenPropertyPane=true%26teams%26componentId={{SPFX_COMPONENT_ID}}%26forceLocale={locale}",
"canUpdateConfiguration": true,
"scopes": [
"team"
]
}
],
"validDomains": [
"*.login.microsoftonline.com",
"*.sharepoint.com",
"spoprod-a.akamaihd.net",
"resourceseng.blob.core.windows.net"
],
"webApplicationInfo": {
"resource": "https://{teamSiteDomain}",
"id": "00000003-0000-0ff1-ce00-000000000000"
}
}
Questo file contiene più stringhe che devono essere aggiornate in modo che corrispondano al componente di SharePoint Framework. Usare la tabella seguente per determinare i valori da sostituire. Le proprietà del componente SharePoint Framework sono disponibili nel file manifesto della web part: ./src/webparts/spFxTeamsTogether/SpFxTeamsTogetherWebPart.manifest.json
| stringa manifest.json | Proprietà nel manifesto del componente SharePoint Framework |
|---|---|
{{SPFX_COMPONENT_NAME}} |
preconfiguredEntries[0].title.default |
{{SPFX_COMPONENT_SHORT_DESCRIPTION}} |
preconfiguredEntries[0].description.default |
{{SPFX_COMPONENT_LONG_DESCRIPTION}} |
preconfiguredEntries[0].description.default |
{{SPFX_COMPONENT_ID}} |
id |
Importante
Non dimenticarsi di sostituire {{SPFX_COMPONENT_ID}} in configurableTabs[0].configurationUrl. È probabile che sia necessario scorrere l'editor verso destra per visualizzare ciò.
Importante
I token racchiusi tra parentesi graffe singole (ad esempio, {teamSiteDomain}) non devono essere sostituiti.
Creare manualmente il pacchetto dell'app Microsoft Teams
Individuare la cartella ./teams nel progetto.
Creare un archivio ZIP contenente i tre file nella cartella: le due immagini e manifest.json.
Importante
Comprimere il contenuto della cartella, non la cartella stessa.
Assegnare un nome all'archivio ZIP TeamsSPFxApp.zip e salvarlo nella cartella teams. La cartella teams ora dovrebbe contenere quattro file.
Creare e distribuire il pacchetto di SharePoint
Per testare la web part in SharePoint e Microsoft Teams, prima di tutto è necessario distribuirla in un Catalogo app.
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
Trascinare il pacchetto creato nei passaggi precedenti, che si trova nel./sharepoint/solution/spfxteams.sppkg del progetto, nella raccolta App per SharePoint.
Nel pannello Abilita app verificare che sia selezionato il pulsante di opzione Abilita questa app e aggiungerla a tutti i siti e quindi selezionare Abilita app. In questo modo la web part sarà disponibile per tutte le raccolte siti nel tenant, incluse quelle dietro un team di Microsoft Teams.
Nel pannello Quest’app è stata abilitata selezionare Chiudi.
L'ultimo passaggio consiste nel pubblicare l'app Microsoft Teams nell'archivio Microsoft Teams del tenant. Selezionare il pacchetto di SharePoint caricato. Selezionare quindi il pulsante Aggiungi a Teams nella barra dei comandi.
Testare la web part SharePoint Framework in SharePoint
Nel browser passare a una pagina moderna di SharePoint.
Selezionare il pulsante Modifica in alto a destra nella pagina.
Nel browser, selezionare il pulsante dell'icona della Web part per aprire l'elenco delle Web part disponibili:
Cercare la web part SPFx Teams Together e selezionarla
La web part di SharePoint Framework verrà visualizzata nella pagina come illustrato nella figura seguente:
Testare la web part SharePoint Framework in Microsoft Teams
Creare prima di tutto un nuovo team di Microsoft Teams.
Usando lo stesso browser in cui si è connessi a SharePoint Online, passare a https://teams.microsoft.com. Quando richiesto, caricare il client Web.
Selezionare l'icona + nella parte superiore dell'elenco dei team nella parte sinistra del client di Teams e selezionare Crea team:
Nella finestra di dialogo Crea un team impostare nome team My First Team e selezionare Crea.
Nella finestra di dialogo Aggiungi membri al mio primo team selezionare Ignora.
Installare l'applicazione Microsoft Teams come nuova scheda
Selezionare il team Il mio primo team creato in precedenza.
Selezionare il canale Generale.
Aggiungere una scheda personalizzata al team usando la web part di SharePoint Framework.
Nella parte superiore della pagina selezionare l'icona + nel riquadro di spostamento orizzontale:
Nella finestra di dialogo Aggiungi scheda selezionare Recupera altre app
Selezionare Creata per l'organizzazione.
Selezionare l'app SPFx Teams Together.
Nella finestra di dialogo SPFx Teams Together selezionare il pulsante Aggiungi a un team.
Nella finestra di dialogo successiva selezionare il canale Generale nel team Il mio primo team e scegliere Configura una scheda.
La finestra di dialogo successiva confermerà l'installazione dell'app. Selezionare Salva.
L'applicazione ora dovrebbe essere stata caricata in Microsoft Teams all'interno del canale Generale nella scheda SPFx Teams Together.
Selezionare X nell'angolo superiore destro del riquadro delle proprietà per chiudere la configurazione iniziale.
Riepilogo
In questo esercizio è stata creata una soluzione web part di SharePoint Framework che funziona sia in SharePoint Online che come scheda in Microsoft Teams.