Crear un elemento web de SharePoint con el Kit de herramientas de Microsoft Graph

  • Artículo

En este tema se explica cómo usar los componentes del Kit de herramientas de Microsoft Graph en un elemento web del lado cliente de SharePoint. La introducción incluye los pasos siguientes:

  1. Configurar el entorno de desarrollo y crear un elemento web.
  2. Agregar el paquete de SharePoint Framework del Kit de herramientas de Microsoft Graph.
  3. Agregar el proveedor de SharePoint.
  4. Agregar componentes.
  5. Configurar permisos.
  6. Implementar el paquete de SharePoint Framework del Kit de herramientas de Microsoft Graph.
  7. Compilar e implementar el elemento web.
  8. Probar el elemento web.

Configurar el entorno de desarrollo de SharePoint Framework y crear un nuevo elemento web

Siga los pasos para Configurar el entorno de desarrollo de SharePoint Framework y crear un nuevo elemento web.

Agregar el paquete de SharePoint Framework del Kit de herramientas de Microsoft Graph

Para evitar que varios componentes de SharePoint Framework registren su propio conjunto de componentes del Kit de herramientas de Microsoft Graph en la página, debería implementar el paquete de SharePoint Framework del Kit de herramientas de Microsoft Graph en el espacio empresarial y hacer referencia a los componentes del Kit de herramientas de Microsoft Graph que usa en la solución desde este paquete.

El paquete de SharePoint Framework del Kit de herramientas de Microsoft Graph contiene una biblioteca de SharePoint Framework que registra una única instancia de componentes del Kit de herramientas de Microsoft Graph en SharePoint.

Instale el paquete npm de SharePoint Framework del Kit de herramientas de Microsoft Graph con el siguiente comando:

npm install @microsoft/mgt-spfx

Agregar el proveedor de SharePoint

Los proveedores del Kit de herramientas de Microsoft Graph permiten la autenticación y el acceso a Microsoft Graph para los componentes. Para más información, vea Usar los proveedores. Los elementos web de SharePoint siempre existen en un contexto autenticado porque el usuario ya ha tenido que iniciar sesión para acceder a la página que hospeda el elemento web. Use este contexto para inicializar el proveedor de SharePoint.

En primer lugar, agregue el proveedor al elemento web. Busque el archivo src\webparts\<your-project>\<your-web-part>.ts en la carpeta del proyecto y agregue la siguiente línea a la parte superior del archivo, justo debajo de las instrucciones import existentes:

import { Providers, SharePointProvider } from '@microsoft/mgt-spfx';

Después, debe inicializar el proveedor con el contexto autenticado dentro del método onInit() del elemento web. En el mismo archivo, agregue el código siguiente justo antes de la línea public render(): void {:

protected async onInit() {
  if (!Providers.globalProvider) {
    Providers.globalProvider = new SharePointProvider(this.context);
  }
}

Agregar componentes

Ahora, puede empezar a agregar componentes al elemento web. Simplemente agregue los componentes al código HTML dentro del método render() y los componentes usarán el contexto de SharePoint para acceder a Microsoft Graph. Por ejemplo, para agregar el componente Persona, el código tendrá el siguiente aspecto:

public render(): void {
    this.domElement.innerHTML = `
      <mgt-person person-query="me" view="twolines"></mgt-person>
    `;
}

Nota:

Si va a crear un elemento web con React, consulte la documentación de @microsoft/mgt-spfx para obtener información sobre cómo usar @microsoft/mgt-react.

Configurar permisos

Para llamar a Microsoft Graph desde la aplicación de SharePoint Framework, debe solicitar los permisos necesarios en el paquete de solución y un administrador de espacios empresariales de Microsoft 365 debe aprobar los permisos solicitados.

Para agregar los permisos al paquete de solución, busque y abra el archivo config\package-solution.json y establezca:

"isDomainIsolated": false,

Justo debajo de esa línea, agregue lo siguiente:

"webApiPermissionRequests":[],

Determine qué permisos de API de Microsoft Graph necesita en función de los componentes que use. La página de documentación de cada componente proporciona una lista de los permisos que requiere el componente. Tendrá que agregar cada permiso necesario a webApiPermissionRequests. Por ejemplo, si usa el componente Persona y el componente Agenda, webApiPermissionRequests podría tener el siguiente aspecto:

"webApiPermissionRequests": [
  {
    "resource": "Microsoft Graph",
    "scope": "User.Read"
  },
  {
    "resource": "Microsoft Graph",
    "scope": "Calendars.Read"
  }
]

Implementar el paquete de SharePoint Framework del Kit de herramientas de Microsoft Graph

Antes de implementar el paquete de SharePoint Framework en el espacio empresarial, deberá implementar el paquete de SharePoint Framework del Kit de herramientas de Microsoft Graph en el espacio empresarial. Puede descargar el paquete correspondiente a la versión del Kit de herramientas de Microsoft Graph que usó en el proyecto desde la sección Versiones en GitHub.

Importante

Dado que solo se puede instalar una versión de la biblioteca de SharePoint Framework para el Kit de herramientas de Microsoft Graph en el espacio empresarial, antes de usar el Kit de herramientas de Microsoft Graph en la solución, determine si su organización o cliente ya tiene una versión de la biblioteca de SharePoint Framework implementada y use la misma versión.

Después de descargar el paquete .sppkg de SharePoint Framework del Kit de herramientas de Microsoft Graph, cárguelo en el catálogo de aplicaciones de SharePoint Online. Vaya a la página Más características del Centro de administración de SharePoint. Seleccione Abrir en Aplicaciones y haga clic en Catálogo de aplicaciones y en Distribuir aplicaciones para SharePoint. Cargue el archivo .sppkg y haga clic en Implementar.

Compilar e implementar el elemento web

Ahora, compilará la aplicación y la implementará en SharePoint. Compile la aplicación mediante la ejecución de los siguientes comandos:

gulp build
gulp bundle
gulp package-solution

En la carpeta sharepoint/solution, habrá un nuevo archivo .sppkg. Tendrá que cargar este archivo en el catálogo de aplicaciones de SharePoint Online. Vaya a la página Más características del Centro de administración de SharePoint. Seleccione Abrir en Aplicaciones y haga clic en Catálogo de aplicaciones y en Distribuir aplicaciones para SharePoint. Cargue el archivo .sppkg y haga clic en Implementar.

Después, debe aprobar los permisos como administrador.

Vaya al Centro de administración de SharePoint. En el panel de navegación izquierdo, seleccione Avanzado y Acceso de API. Debería ver solicitudes pendientes para cada uno de los permisos que agregó en el archivo config\package-solution.json. Seleccionar y aprobar cada permiso.

Probar el elemento web

Ahora está listo para agregar el elemento web a una página de SharePoint y probarlo. Tendrá que usar el área de trabajo hospedada para probar los elementos web que usan el Kit de herramientas de Microsoft Graph, ya que los componentes necesitan el contexto autenticado para llamar a Microsoft Graph. Puede encontrar el área de trabajo hospedada en https://< YOUR_TENANT.sharepoint.com/_layouts/15/workbench.aspx>.

Abra el archivo en el config\serve.json proyecto y reemplace el valor de initialPage por la dirección URL del área de trabajo hospedada:

"initialPage": "https://<YOUR_TENANT>.sharepoint.com/_layouts/15/workbench.aspx",

Guarde el archivo y ejecute el siguiente comando en la consola para compilar y obtener una vista previa del elemento web:

gulp serve

El área de trabajo hospedada se abrirá automáticamente en el explorador. Agregue el elemento web a la página y debería ver el elemento web con los componentes del Kit de herramientas de Microsoft Graph en acción. Siempre que el comando gulp serve siga ejecutándose en la consola, puede seguir realizando modificaciones en el código y, después, actualizar el explorador para ver los cambios.

Siguientes pasos