Cómo Mostrar los Elementos de una Lista de SharePoint en una Web Part Utilizando Fluent UI

Si tienes dificultades para mostrar los elementos de una lista de SharePoint en una web part del SharePoint Framework (SPFx) usando React y Fluent UI, esta guía te ayudará a construir una solución paso a paso. Si recibes errores como undefined o si los elementos de la lista no se están pasando correctamente a tu componente .tsx, este artículo te guiará para crear una solución que funcione correctamente.

Introducción

En este artículo te mostraré cómo:

1. Configurar la web part SPFx.
2. Recuperar los elementos de una lista de SharePoint utilizando PnPjs en tu archivo .ts.
3. Pasar estos elementos de la lista como props al componente .tsx y visualizarlos utilizando React.

Paso 1: Configurar la Web Part SPFx

Primero, crearemos una web part básica de SPFx usando el generador Yeoman e instalaremos PnPjs para manejar las operaciones con las listas.

1. Crear un Nuevo Proyecto SPFx

Abre tu terminal y crea un nuevo proyecto SPFx usando Yeoman. Selecciona React como framework cuando te lo pida.

yo @microsoft/sharepoint

Asegúrate de configurar el entorno para React.

2. Instalar PnPjs

PnPjs es una poderosa biblioteca que simplifica el trabajo con SharePoint. La usaremos para recuperar los elementos de una lista de SharePoint.

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

Paso 2: Recuperar los Elementos de la Lista en el Archivo .ts

A continuación, configuraremos el archivo TypeScript principal (WebPart.ts) para recuperar los elementos de una lista de SharePoint y pasarlos al componente React.

1. Importar las Librerías Necesarias

En tu archivo WebPart.ts, importa las librerías necesarias para PnPjs y 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. Inicializar PnPjs en onInit()

A continuación, inicializa PnPjs en el método onInit() para poder usarlo para recuperar los elementos de la lista.

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

3. Crear una Función para Recuperar los Elementos de la Lista

Crea una función privada que recupere los elementos de la lista y los devuelva como Promise. Luego, llama a esta función en el método render() y pasa los datos 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('Error al recuperar los elementos de la lista: ', error);
    return [];
  }
}

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

  const element: React.ReactElement<IPnPGetListItemsProps> = React.createElement(
    PnPGetListItems,
    {
      items: items // Pasar los elementos de la lista al componente React
    }
  );

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

En este código:

• Sustituye 'YourListName' con el nombre real de tu lista de SharePoint.
• La función _getListItems() recupera los elementos de la lista, y render() los pasa como props al componente React PnPGetListItems.

Paso 3: Mostrar los Elementos de la Lista con React

Ahora que estamos pasando los elementos de la lista al archivo .tsx, veamos cómo mostrarlos en el componente React.

1. Definir los Props para el Componente

En el archivo PnPGetListItems.tsx, define una interfaz para los props que contendrán los elementos de la lista.

export interface IPnPGetListItemsProps {
  items: any[];
}

2. Mostrar los Elementos de la Lista

Ahora escribe la lógica para mostrar los elementos de la lista. En este ejemplo, los mostraremos en una tabla HTML.

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

const PnPGetListItems: React.FC<IPnPGetListItemsProps> = (props) => {
  return (
    <div>
      <h2>Elementos de la Lista de 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;

En este componente:

• Los items se muestran en una tabla HTML.
• Cada elemento de la lista se representa como una fila que muestra su ID y Title.

Consejos para Depurar: Verificación de State y Props

Para asegurarte de que los elementos de la lista se están pasando correctamente, puedes agregar sentencias console.log en el componente para verificar el valor de props.items.

console.log(props.items);

Esto te ayudará a verificar si los datos se están pasando y mapeando correctamente en el componente.

Prueba de la Web Part

Después de completar la configuración, ejecuta el siguiente comando para iniciar tu web part y probarla en el SharePoint Workbench.

gulp serve

Cuando abras el SharePoint Workbench, deberías ver tu web part y los elementos de tu lista mostrados en forma de tabla.

Conclusión

En esta guía, construimos una web part SPFx que recupera los elementos de una lista de SharePoint usando PnPjs y los muestra en un componente React. Al pasar los elementos de la lista desde el archivo .ts al componente .tsx a través de props, puedes garantizar un flujo de datos fluido y una visualización correcta en pantalla.

Si aún encuentras errores undefined o problemas para mostrar la lista, verifica lo siguiente:

• Asegúrate de que el nombre de la lista sea correcto.
• Usa console.log para depurar los props y el estado.

Esta guía debería ayudarte a resolver los problemas que has encontrado y a crear una web part funcional para mostrar los elementos de tus listas de SharePoint utilizando Fluent UI o cualquier otro framework de tu elección