Come Visualizzare gli Elementi di una Lista SharePoint in una Web Part Utilizzando Fluent UI

Se stai riscontrando difficoltà nel visualizzare gli elementi di una lista SharePoint in una web part del SharePoint Framework (SPFx) utilizzando React e Fluent UI, questa guida ti aiuterà a costruire una soluzione funzionante passo dopo passo. Se ricevi errori come undefined o se gli elementi della lista non vengono passati correttamente al tuo componente .tsx, questo articolo ti guiderà nella creazione di una soluzione funzionante.

Introduzione

In questo articolo, ti mostrerò come:

1. Configurare la web part SPFx.
2. Recuperare gli elementi di una lista SharePoint con PnPjs nel tuo file .ts.
3. Passare questi elementi della lista come props al tuo componente .tsx e visualizzarli con React.

Fase 1: Configurazione della Web Part SPFx

Per prima cosa, creeremo una web part SPFx di base utilizzando il generatore Yeoman e installeremo PnPjs per gestire le operazioni sulle liste.

1. Creare un Nuovo Progetto SPFx

Apri il terminale e crea un nuovo progetto SPFx utilizzando Yeoman. Seleziona React come framework quando richiesto.

yo @microsoft/sharepoint

Assicurati di configurare l’ambiente per React.

2. Installare PnPjs

PnPjs è una libreria potente che semplifica il lavoro con SharePoint. La utilizzeremo per recuperare gli elementi di una lista SharePoint.

npm install @pnp/sp @pnp/spfx-controls-react --save

Fase 2: Recupero degli Elementi della Lista nel File .ts

Successivamente, configureremo il file TypeScript principale (WebPart.ts) per recuperare gli elementi di una lista SharePoint e passarli al componente React.

1. Importare le Librerie Necessarie

Nel tuo file WebPart.ts, importa le librerie necessarie per PnPjs e React.

import { spfi, SPFx } from '@pnp/sp';
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import PnPGetListItems, { IPnPGetListItemsProps } from './components/PnPGetListItems';

2. Inizializzare PnPjs in onInit()

Successivamente, inizializza PnPjs nel metodo onInit() in modo da poterlo utilizzare per recuperare gli elementi della lista.

protected onInit(): Promise<void> {
  spfi().using(SPFx(this.context));
  return super.onInit();
}

3. Creare una Funzione per Recuperare gli Elementi della Lista

Crea una funzione privata che recupera gli elementi della lista e li restituisce come Promise. Successivamente, chiama questa funzione nel metodo render() e passa i dati al componente React.

private async _getListItems(): Promise<any[]> {
  try {
    const items: any[] = await spfi().web.lists.getByTitle('YourListName').items();
    return items;
  } catch (error) {
    console.error('Errore nel recupero degli elementi della lista: ', error);
    return [];
  }
}

public async render(): Promise<void> {
  const items: any[] = await this._getListItems();

  const element: React.ReactElement<IPnPGetListItemsProps> = React.createElement(
    PnPGetListItems,
    {
      items: items // Passaggio degli elementi della lista al componente React
    }
  );

  ReactDom.render(element, this.domElement);
}

In questo codice:

• Sostituisci 'YourListName' con il nome effettivo della tua lista SharePoint.
• La funzione _getListItems() recupera gli elementi della lista, e render() li passa come props al componente React PnPGetListItems.

Fase 3: Visualizzazione degli Elementi della Lista con React

Ora che stiamo passando gli elementi della lista al file .tsx, vediamo come visualizzarli nel componente React.

1. Definire i Props per il Componente

Nel file PnPGetListItems.tsx, definisci un’interfaccia per i props che conterranno gli elementi della lista.

export interface IPnPGetListItemsProps {
  items: any[];
}

2. Visualizzare gli Elementi della Lista

Ora scrivi la logica per visualizzare gli elementi della lista. In questo esempio, li mostreremo in una tabella HTML.

import * as React from 'react';
import { IPnPGetListItemsProps } from './IPnPGetListItemsProps';

const PnPGetListItems: React.FC<IPnPGetListItemsProps> = (props) => {
  return (
    <div>
      <h2>Elementi della Lista SharePoint</h2>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Title</th>
          </tr>
        </thead>
        <tbody>
          {props.items.map((item) => (
            <tr key={item.Id}>
              <td>{item.Id}</td>
              <td>{item.Title}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default PnPGetListItems;

In questo componente:

• Gli items vengono visualizzati in una tabella HTML.
• Ogni elemento della lista è rappresentato da una riga che mostra il suo ID e Title.

Suggerimenti per il Debug: Verifica di State e Props

Per assicurarti che gli elementi della lista vengano passati correttamente, puoi aggiungere dichiarazioni console.log nel componente per controllare il valore di props.items.

console.log(props.items);

Questo ti aiuterà a verificare se i dati vengono passati e mappati correttamente nel componente.

Test della Web Part

Dopo aver completato la configurazione, esegui il seguente comando per avviare la tua web part e testarla nel SharePoint Workbench.

gulp serve

Quando apri il SharePoint Workbench, dovresti vedere la tua web part e gli elementi della tua lista visualizzati sotto forma di tabella.

Conclusione

In questa guida, abbiamo costruito una web part SPFx che recupera gli elementi di una lista SharePoint utilizzando PnPjs e li visualizza in un componente React. Passando gli elementi della lista dal file .ts al componente .tsx tramite props, puoi garantire un flusso di dati fluido e una corretta visualizzazione sullo schermo.

Se riscontri ancora errori undefined o problemi nella visualizzazione della lista, verifica quanto segue:

• Assicurati che il nome della lista sia corretto.
• Usa console.log per fare il debug di props e state.

Questa guida dovrebbe aiutarti a risolvere i problemi che hai riscontrato e a creare una web part funzionante per visualizzare gli elementi delle tue liste SharePoint utilizzando Fluent UI o qualsiasi altro framework a tua scelta.