Il blog di Giuseppe Marchi - SharePoint MVP
NAVIGATION - SEARCH

SharePoint Framework: struttura di una Client Side Web Part

Serie di post sullo SharePoint Framework
- SharePoint Framework: la struttura di una Client Side Web Part (questo post)

Continuiamo la nostra serie di post, andando a vedere il dettaglio della struttura di una Client Side Web Part all'interno di un progetto SharePoint Framework. 
Una Client Side Web Part è l'unico oggetto che può essere ad ora implementato tramite le librerie dello SharePoint Framework. In seguito avremo la possibilità di creare application page, custom field, custom actions e altro, ma per ora ci dobbiamo accontentare di queste.
Dal punto di vista utente, una Client Side Web Part è una normale Web Part che può essere inserita all'interno di una pagina. La differenza rispetto alle normali web part sta nel fatto che questa è l'unica tipologia di web part che può essere inserita all'interno di una "modern page", cioè una pagina creata attraverso la nuova UI di SharePoint (solo su Office 365 per ora, in futuro disponibile anche su SharePoint on-premise).
Una volta creato un nuovo progetto, avremo la seguente struttura di cartelle e file:

  • /loc - Cartella in cui vengono inseriti di default i file per la localizzazione della tua web part
  • /tests - Cartella in cui puoi inserire gli unit test utili a testare il funzionamento di alcune parti della tua web part
  • /components - Cartella in cui vengono inseriti i componenti React utilizzati all'interno della tua web part (questa cartella viene creata solamente se scegli ReactJs come libreria di sviluppo in fase di creazione del progetto)
  • [WEBPARTNAME].module.scss - File SASS di definizione delle classi CSS utili alla tua web part
  • [WEBPARTNAME].module.scss.ts - File TypeScript contenente la definizione univoca delle varie classi CSS presenti all'interno del file SASS appena specificato. Questo file viene autogenerato in fase di compilazione del progetto
  • [WEBPARTNAME].manifest.json - File JSON di configurazione della tua web part (paragonabile al file manifest delle "classiche" web part)
  • [WEBPARTNAME].ts - File TypeScript contenente la classe che rappresenta la tua web part vera e propria
  • [WEBPARTNAME]Props.ts - File TypeScript contenente l'interfaccia di definizione delle proprietà della tua web part
Questa è la struttura generata dal template Yeoman proposto da Microsoft e non siete obbligati a seguirla ovviamente. E' sicuramente un ottimo punto di partenza. Gli unici due componenti che sono indispensabili per il corretto funzionamento della web part sono il file manifest e il file contenente la classe a rappresentare la web part.

Nei prossimi post vedremo nel dettaglio ognugno di questi file.
blog comments powered by Disqus