Serie di post sullo SharePoint Framework

Nei precedenti post abbiamo visto la struttura di una Client Side Web Part, assieme all'opzione di disabilitare il rendering reattivo della web part in caso di modifica ai valori delle sue proprietà. Abbiamo quindi parlato già tanto delle proprietà di una web part, senza mai però entrare nel dettaglio di come aggiungerne una nuova.

Per aggiungere una nuova proprietà dobbiamo seguire questi passi:
  1. Va aggiunta una nuova proprietà nell'interfaccia di definizione delle proprietà della webpart
  2. Va aggiunta la proprietà all'interno del pannello di proprietà della web part
  3. Eventualmente, si può specificare il valore di default della nuova proprietà (passo opzionale)
Per aggiungere la nuova proprietà nell'interfaccia di definizione, dobbiamo modificare il file IHelloWorldWebPartProps e decidere il tipo della nostra proprietà. Nel mio caso, voglio dare la possibilità all'utente finale di scegliere il colore di sfondo della web part.

export interface IHelloWorldWebPartProps {
  description: string;
  backgroundColor: string;
}
Bene, ora passiamo alla definizione della web part all'interno del pannello delle proprietà e, per farlo, dobbiamo modificare l'array di oggetti Javascript ritornato dalla proprietà PropertyPaneConfiguration.
Rispetto alla proprietà "description", presente di default nel template di base di una Client Side Web Part, vorrei dare la possibilità all'utente di scegliere un colore da una lista predefinita. Per questo scelgo di utilizzare la classe PropertyPaneDropdown che si occupa di renderizzare un controllo di selezione.

  //codice omesso per leggibilità  
 
  protected get PropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                }),
                PropertyPaneDropdown('backgroundColor', {
                  label: 'Colore sfondo',
                  options: [
                    {text: 'Nero', key: '#000000'},
                    {text: 'Bianco', key: '#FFFFFF'},
                    {text: 'Rosso', key: '#FF0000'}
                  ]
                })
              ]
            }
          ]
        }
      ]
    };

  //codice omesso per leggibilità
Questa classe, oltre alla proprietà "label", ha una proprietà "options" che permette di specificare l'elenco degli elementi da visualizzare all'interno del controllo di selezione, assieme ai relativi valori che verranno assegnati alla nostra proprietà "backgroundColor".
Passo fondamentale per poter utilizzare la classe PropertyPaneDropdown senza avere errori di compilazione è quello di inserire tale classe all'interno degli import della nostra classe.

import {
  BaseClientSideWebPart,
  IPropertyPaneConfiguration,
  IWebPartContext,
  PropertyPaneTextField,
  PropertyPaneDropdown
} from '@microsoft/sp-webpart-base';

Bene, ci siamo quasi. Abbiamo definito la proprietà e definito il modo in cui l'utente finale potrà specificare un valore per questa proprietà. Ora dobbiamo semplicemente implementare la funzionalità di renderizzare lo sfondo della web part con il valore presente all'interno della nostra nuova proprietà.

  //codice omesso per leggibilità  

  public render(): void {
    this.domElement.innerHTML = '
      <div class="${styles.helloWorld}">
        <div class="${styles.container}">
          <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}" 
               style="background-color: ${this.properties.backgroundColor}">
            <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
              <span class="ms-font-xl ms-fontColor-white">Welcome to SharePoint!</span>
              <p class="ms-font-l ms-fontColor-white">Customize SharePoint experiences using Web Parts.</p>
              <p class="ms-font-l ms-fontColor-white">${this.properties.description}</p>
              <a href="https://github.com/SharePoint/sp-dev-docs/wiki" class="ms-Button ${styles.button}">
                <span class="ms-Button-label">Learn more</span>
              </a>
            </div>
          </div>
        </div>
      </div>`;
  }

  //codice omesso per leggibilità

Ecco il risultato.