Leer una lista de Sharepoint Online en un WebPart de SharePoint Framework (SPFx) con React

Sin comentarios

En este artículo vamos a leer una lista de Sharepoint Online en un WebPart de SharePoint Framework (SPFx) con React. 

En primer lugar entramos en nuestro tenant de SharePoint Online y cremos una lista de ejemplo llamada MiLista. Para ello vamos al contenido del sitio en https://yourtenantprefix.sharepoint.com/_layouts/15/viewlsts.aspx?view=14 y Seleccionamos ‘Nuevo‘ y después ‘Lista‘.

Nombramos la lista como ‘MiLista’ y agregamos algunos items.

Ahora vamos con el código. Abrimos PowerShell y creamos con Yeoman nuestro WebPart de SharePoint Framework (SPFx). Para eso creamos la carpeta LeerListaWebPart y escribimos:

PS C:\LeerListaWebPart> yo @microsoft/sharepoint

Indicamos las siguientes opciones:

Let's create a new SharePoint solution.
? What is your solution name? leer-lista-web-part
? Which baseline packages do you want to target for your component(s)? SharePoint Online only (latest)
? Where do you want to place the files? Use the current folder
Found npm version 6.14.4
? Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites? No
? Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant? No
? Which type of client-side component to create? WebPart
Add new Web part to solution leer-lista-web-part.
? What is your Web part name? Leer lista Web Part
? What is your Web part description? Leer lista Web Part description
? Which framework would you like to use? React

Ahora abrimos Visual Studio Code escribiendo:

code .

Y creamos la carpeta models con los archivos:

  • ButtonClickedCallback.ts
  • ILeerMiListaListItem.ts
  • index.ts

El código de cada uno es el siguiente:

  • ButtonClickedCallback.ts
export type ButtonClickedCallback = () => void;
  • ILeerMiListaListItem.ts
export interface ILeerMiListaListItem {
    Id: string;
    Title: string;
  }
  • index.ts
export * from './ButtonClickedCallback';
export * from './ILeerMiListaListItem';
 
 
Y en src\webparts\leerListaWebPart\components\ILeerListaWebPartProps.ts
 
Cambiamos el código por este:
import {
  ButtonClickedCallback,
  ILeerMiListaListItem
} from '../../../models';

export interface ILeerListaWebPartProps {
  spListItems: ILeerMiListaListItem[];
  onGetListItems?: ButtonClickedCallback;
}
 
Seguidamente agregamos dos nuevos estilos en el fichero de estilos Sass:
src\webparts\leerListaWebPart\components\LeerListaWebPart.module.scss
 
 
.list {
    color: $ms-color-themeDark;
    background-color: $ms-color-themeLight;
    font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    box-sizing: border-box;
    margin: 0 0;
    padding: 10px 0 100px 0;
    line-height: 50px;
    list-style-type: none;
  }
  .item {
    color: $ms-color-themeDark;
    background-color: $ms-color-themeLighterAlt;
    vertical-align: center;
    font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    box-shadow: none;
    *zoom: 1;
    padding: 0 15px;
    position: relative;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
  }
 
Ahora vamos con la visualización, en src\webparts\leerListaWebPart\components\LeerListaWebPart.tsx cambiamos el método render() por:
 
public render(): React.ReactElement<ILeerListaWebPartProps> {
    return (
      <div className={ styles.leerListaWebPart }>
  <div className={ styles.container }>
    <div className={ styles.row }>
      <div className={ styles.column }>
        <p className={ styles.title }>Leyendo contenido de SharePoint</p>
        <a href="#" className={ styles.button } onClick={ this.onGetListItemsClicked }>
          <span className={ styles.label }>Leer mi lista</span>
        </a>
      </div>
    </div>

    <div className={ styles.row }>
      <ul className={ styles.list }>
        { this.props.spListItems &&
          this.props.spListItems.map((list) =>
            <li key={list.Id} className={styles.item}>
              <strong>Id:</strong> {list.Id}, <strong>Título:</strong> {list.Title}
            </li>
          )
        }
      </ul>
    </div>

  </div>
</div>
    );
  }

  private onGetListItemsClicked = (event: React.MouseEvent<HTMLAnchorElement>): void => {
    event.preventDefault();
  
    this.props.onGetListItems();
  }
 
En src\webparts\leerListaWebPart\LeerListaWebPartWebPart.ts agregamos estos imports al principio del fichero:
import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
import { ILeerMiListaListItem } from '../../models';
 
y cambiamos el método render() por:
 
private _MiLista: ILeerMiListaListItem[] = [];

  public render(): void {
    const element: React.ReactElement<ILeerListaWebPartProps> = React.createElement(
      LeerListaWebPart,
      {
        spListItems: this._MiLista,
        onGetListItems: this._onGetListItems
      }
    );

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

  private _onGetListItems = (): void => {
    this._getListItems()
      .then(response => {
        this._MiLista = response;
        this.render();
      });
  }

  private _getListItems(): Promise<ILeerMiListaListItem[]> {
    return this.context.spHttpClient.get(
      this.context.pageContext.web.absoluteUrl + `/_api/web/lists/getbytitle('MiLista')/items?$select=Id,Title`,
      SPHttpClient.configurations.v1)
      .then(response => {
        return response.json();
      })
      .then(jsonResponse => {
        return jsonResponse.value;
      }) as Promise<ILeerMiListaListItem[]>;
  }
 
Si ejecutamos gulp serve y entramos en nuestro sitio de SharePoint Online y vamos a nuestra página de workbench.aspx (siempre con gulp serve arrancado) 
https://[yourtenantprefix].sharepoint.com/_layouts/15/workbench.aspx
 
Agregamos el WebPart creado y veremos como también aparece un botón de ‘Leer mi lista’ y al pulsar aparecen los elementos de la lista. 
 

Deja una respuesta