Conectar el elemento web del lado cliente con SharePoint (parte 2 de Hello World)

Artículo
03/21/2023

Conecte el elemento web con SharePoint para obtener acceso a funcionalidades y datos de SharePoint y proporcionar una experiencia más integrada a los usuarios finales.

También puedes seguir estos pasos viendo este vídeo en el canal de YouTube de la comunidad de plataformas de Microsoft 365 (PnP):

Nota:

Este artículo continúa con la compilación del elemento web Hello World creado en el artículo anterior Build your first SharePoint client-side web part (Hello World part 1) (Compilar el primer elemento web del lado cliente de SharePoint [Hello World, primera parte]).

Ejecución de gulp serve

Asegúrese de que el comando gulp serve está en ejecución. Si no se está ejecutando, vaya al directorio del proyecto helloworld-webpart y ejecútelo mediante los comandos siguientes.

cd helloworld-webpart
gulp serve

Obtener acceso al contexto de la página

El área de trabajo alojada en SharePoint permite el acceso al contexto de la página, que expone las siguientes propiedades clave, como:

Título de la web
Dirección URL absoluta de la web
Dirección URL relativa del servidor web
Nombre de inicio de sesión del usuario

Para obtener acceso al contexto de la página

Para acceder a información contextual en el elemento web, utilizará el siguiente objeto en el código:

this.context.pageContext

En Visual Studio Code, busque &abrir .\src\webparts\helloWorld\HelloWorldWebPart.ts.

Dentro del render() método , reemplace el bloque de innerHTML código por lo siguiente:

this.domElement.innerHTML = `
<section class="${styles.helloWorld} ${!!this.context.sdks.microsoftTeams ? styles.teams : ''}">
  <div class="${styles.welcome}">
    <img alt="" src="${this._isDarkTheme ? require('./assets/welcome-dark.png') : require('./assets/welcome-light.png')}" class="${styles.welcomeImage}" />
    <h2>Well done, ${escape(this.context.pageContext.user.displayName)}!</h2>
    <div>${this._environmentMessage}</div>
  </div>
  <div>
    <h3>Welcome to SharePoint Framework!</h3>
    <div>Web part description: <strong>${escape(this.properties.description)}</strong></div>
    <div>Web part test: <strong>${escape(this.properties.test)}</strong></div>
    <div>Loading from: <strong>${escape(this.context.pageContext.web.title)}</strong></div>
  </div>
</section>`;

Observe que se usa ${ } para generar el valor de la variable en el bloque HTML. Se usa un HTML adicional div para mostrar this.context.pageContext.web.title.
Guarde el archivo. El gulp serve en ejecución en la consola detecta esta operación de guardado y:
- compilar y empaquetar el código actualizado de forma automática
Nota:

Mantenga la ventana de la consola y Visual Studio Code en paralelo para ver cómo gulp se compila automáticamente mientras guarda cambios en Visual Studio Code.
Navegue hasta el área SharePoint de trabajo alojado del sitio. La URL completa es https://your-sharepoint-site-url/_layouts/workbench.aspx. Actualice el área de trabajo alojada para recoger los cambios de la agrupación de código reconstruida.

Debería ver el título del sitio de SharePoint en el elemento web ahora que el contexto de la página está disponible para el elemento web.

Definir modelo de lista

Necesita un modelo de lista para empezar a trabajar con datos de lista de SharePoint. Para recuperar las listas, necesita dos modelos.

En Visual Studio Code, busque y abra .\src\webparts\helloWorld\HelloWorldWebPart.ts.
Defina las interfaces siguientes inmediatamente antes de la declaración de clase HelloWorldWebPart:
```
export interface ISPLists {
  value: ISPList[];
}

export interface ISPList {
  Title: string;
  Id: string;
}
```
La interfaz ISPList contiene la información de lista de SharePoint a la que nos estamos conectando.

Recuperación de listas del sitio de SharePoint

Ahora tiene que recuperar listas del sitio actual. Usará las API de REST de SharePoint para recuperar las listas del sitio, que se encuentran en https://yourtenantprefix.sharepoint.com/_api/web/lists.

SharePoint Framework incluye una clase auxiliar spHttpClient para ejecutar solicitudes de la API de REST con SharePoint. Agrega encabezados predeterminados, administra la síntesis necesaria para escrituras y recopila telemetría que ayuda al servicio a supervisar el rendimiento de una aplicación.

Para usar esta clase auxiliar, impórtelas desde el @microsoft/sp-http módulo

Desplácese a la parte superior del archivo HelloWorldWebPart.ts.
Busque la línea import * as strings from 'HelloWorldWebPartStrings'; y agregue el siguiente código inmediatamente después de ella:
```
import {
  SPHttpClient,
  SPHttpClientResponse
} from '@microsoft/sp-http';
```

Agregue el siguiente método para recuperar listas de SharePoint dentro de la clase HelloWorldWebPart.

private _getListData(): Promise<ISPLists> {
  return this.context.spHttpClient.get(`${this.context.pageContext.web.absoluteUrl}/_api/web/lists?$filter=Hidden eq false`, SPHttpClient.configurations.v1)
    .then((response: SPHttpClientResponse) => {
      return response.json();
    })
    .catch(() => {});
}

El método usa la clase auxiliar spHttpClient y realiza una solicitud HTTP GET. Usa la interfaz ISPLists y también aplica un filtro para no recuperar listas ocultas.

Guarde el archivo.
Cambie a la ventana de consola que ejecuta gulp serve y compruebe si hay errores. Si hay errores, Gulp informa de ellos en la consola y tendrá que solucionarlos antes de continuar.

Agregar nuevos estilos

SharePoint Framework usa SASS como preprocesador de CSS y usa específicamente la sintaxis SCSS, que es totalmente compatible con la sintaxis CSS normal. SASS amplía el lenguaje CSS y le permite usar características como variables, reglas anidadas e importaciones en línea para organizar y crear hojas de estilos eficaces para los elementos web. El SharePoint Framework ya incluye un compilador SCSS que convierte los archivos Sass en archivos CSS normales y también proporciona una versión con tipo que se usará durante el desarrollo.

Para agregar nuevos estilos

Abra HelloWorldWebPart.module.scss. Se trata del archivo SCSS en el que se definen los estilos.

De manera predeterminada, los estilos se aplican al elemento web. Puede comprobarlo usted mismo, ya que los estilos se definen en .helloWorld.

Agregue los siguientes estilos después del estilo .links:

.list {
  color: #333333;
  font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  box-sizing: border-box;
  margin: 10;
  padding: 10;
  line-height: 50px;
  list-style-type: none;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}

.listItem {
  color: #333333;
  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: 9px 28px 3px;
  position: relative;
}

Guarde el archivo.

Gulp vuelve a compilar el código en la consola nada más guardar el archivo. Esto genera la escritura correspondiente en el archivo HelloWorldWebPart.module.scss.ts. Una vez compilado en TypeScript, puede importar y hacer referencia a estos estilos en el código del elemento web.

Sugerencia

Este archivo se genera dinámicamente cuando se compila el proyecto. Está oculto en la vista Explorador de VS Code mediante el archivo .vscode/settings.json.

Puede comprobarlo en el método render() del elemento web:
```
<div class="${styles.welcome}">
```

Representar información de listas

Abra la clase HelloWorldWebPart.

Nota:

SharePoint Framework proporciona opciones para detectar los detalles del entorno y la ubicación del host mediante la propiedad isServedFromLocalhost o con los detalles de EnvironmentType. En este caso, nos centraremos en la conexión con los datos del sitio que hospeda el área de trabajo en línea.

Agregue el siguiente método privado dentro de la clase HelloWorldWebPart:

private _renderList(items: ISPList[]): void {
  let html: string = '';
  items.forEach((item: ISPList) => {
    html += `
  <ul class="${styles.list}">
    <li class="${styles.listItem}">
      <span class="ms-font-l">${item.Title}</span>
    </li>
  </ul>`;
  });

  if(this.domElement.querySelector('#spListContainer') != null) {
    this.domElement.querySelector('#spListContainer')!.innerHTML = html;
  }
}

Este método hace referencia a los nuevos estilos CSS agregados anteriormente mediante la variable styles y se usa para presentar la información de la lista que se recibirá desde la API de REST.

Guarde el archivo.

Agregue el siguiente método privado en la clase HelloWorldWebPart para llamar al método para que recupere los datos de lista:

private _renderListAsync(): void {
  this._getListData()
    .then((response) => {
      this._renderList(response.value);
    })
    .catch(() => {});
}

Guarde el archivo.

Recuperar datos de lista

Vaya al método render() y reemplace el código del método por el código siguiente:

this.domElement.innerHTML = `
<section class="${styles.helloWorld} ${!!this.context.sdks.microsoftTeams ? styles.teams : ''}">
  <div class="${styles.welcome}">
    <img alt="" src="${this._isDarkTheme ? require('./assets/welcome-dark.png') : require('./assets/welcome-light.png')}" class="${styles.welcomeImage}" />
    <h2>Well done, ${escape(this.context.pageContext.user.displayName)}!</h2>
    <div>${this._environmentMessage}</div>
  </div>
  <div>
    <h3>Welcome to SharePoint Framework!</h3>
    <div>Web part description: <strong>${escape(this.properties.description)}</strong></div>
    <div>Web part test: <strong>${escape(this.properties.test)}</strong></div>
    <div>Loading from: <strong>${escape(this.context.pageContext.web.title)}</strong></div>
  </div>
  <div id="spListContainer" />
</section>`;

this._renderListAsync();

Guarde el archivo.

Observe que en la ventana de la consola gulp serve se vuelve a compilar el código. Asegúrese de que no vea ningún error.
Si usa SharePoint Framework v1.12.1 o versiones anteriores, por ejemplo, si está en un servidor local de SharePoint, cambie a su área de trabajo local y agregue el elemento web HelloWorld.

Debería ver los datos de la lista devueltos.
Ahora puede detener la ejecución del servidor. Vaya a la consola y detenga gulp serve. Presione CTRL+C para finalizar la tarea de gulp.

Pasos siguientes

Ha conectado el elemento web a los datos de lista de SharePoint.

Puede seguir creando el elemento web de Hola mundo en el siguiente artículo Implementación del elemento web en una página de SharePoint. Obtendrá información acerca de cómo implementar y previsualizar el elemento web Hello World en una página de SharePoint.