SharePoint Framework: caricare le liste del sito in una proprietà

In uno dei post della serie introduttiva sullo SharePoint Framework abbiamo visto come è possibile aggiungere nuove proprietà ad una Client Side Web Part. Nello specifico, avevamo visto come aggiungere un controllo di selezione, in cui poter scegliere il valore della proprietà da una serie di valori pre-configurati. 
Questo controllo può essere utilizzato per scegliere la lista del sito corrente con cui la nostra web part deve interagire (per esempio per leggere o scrivere dei valori), al posto di lasciare all'utente altre modalità di scelta della lista.
Vediamo insieme come poter leggere le liste presenti nel sito in cui la web part viene inserita e popolare il controllo di selezione all'interno del tool pane della web part.

Per prima cosa dobbiamo scrivere una classe Typescript che ci aiuti ad effettuare la query tramite le API di SharePoint Online. Per farlo, sfruttiamo la libreria PNP JS Core, che ci aiuta davvero per l'utilizzo di queste API.

import { IDataManager } from './Managers';
import * as Model from '../model/Model';
import { IWebPartContext } from '@microsoft/sp-webpart-base';
import pnp from 'sp-pnp-js';

export class SPDataManager implements IDataManager {
  public GetContactLists(): Promise<Model.IList[]> {
    return new Promise<Model.IList[]>((resolve, reject) => {
      var results: Model.IList[] = [];
      pnp.sp.web.lists.filter("BaseTemplate eq 105").select("Id", "Title").get().then((lists) => {
        lists.forEach(list => {
          results.push({ Id: list.Id, Title: list.Title });
        });
        resolve(results);
      });
    });
  };
}

In questo esempio ho utilizzato la tecnica spiegata in questo post per la gestione del mock dei dati. Leggetevelo, che è sicuramente utile per capire a pieno l'esempio.
Inoltre ho applicato un filtro alla mia query di selezione delle liste, così da recuperare solamente le liste create a partire dal template di lista "Contatti".

Bene, fatto questo dobbiamo inserire la proprietà all'interno della Client Side Web Part e popolarla di valori. Modifichiamo quindi la proprietà getPropertyPaneConfiguration in questo modo:

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: { description: strings.ConfigurationPage },
          groups: [{
            groupName: strings.ConnectionGroup,
            groupFields: [
              PropertyPaneDropdown('listId', { label: strings.ConnectionGroupListName, disabled: false, options: this._contactLists })
            ]
          }]
        }
      ]
    };
  }

Come potete vedere, il controllo per la selezione della lista prende i suoi valori da una variabile locale alla web part chiamata "_contactLists". Ci preoccuperemo tra poco di valorizzare questa variabile con l'elenco delle liste prelevate dal sito SharePoint Online corrente.
Aggiungiamo la nostra proprietà "listId" all'interno dell'interfaccia a definizione delle proprietà della web part:

export interface IMyContactsWebPartProps {
  listId: string;
}

Carichiamo i dati all'interno del campo di selezione:

  private _contactLists: Array<IPropertyPaneDropdownOption>;

  public onInit(): Promise<void> {
    this._dataManger = this._managers[Environment.type.toString()];
    this._dataManger.GetContactLists().then((results) => {
      this._contactLists = new Array<IPropertyPaneDropdownOption>();
      results.forEach(element => {
        this._contactLists.push({ key: element.Id, text: element.Title });
      });
    });

    return super.onInit();
  };

Per questo caricamento, abbiamo scelto il metodo "onInit" così da avere disponibile l'insieme delle liste presenti nel sito corrente prima che la web part venga visualizzata.
L'interfaccia IPropertyPaneDropdownOption ci viene in aiuto per specificare il Title della lista come campo da visualizzare all'interno del menu di selezione e l'ID della lista come campo da utilizzare per il valore selezionato. E' sempre meglio utilizzare gli identificativi delle liste, piuttosto che il loro nome, in quanto il nome può essere modificato anche dopo la creazione della lista, l'ID no.

Se volete imparare a muovere i primi passi con lo SharePoint Framework, fate riferimento alla serie di post che ho scritto sull'argomento.