Microsoft Graph Toolkit en SharePoint Online

Si necesitas tener soluciones rápidas y sencillas en SharePoint Online, que te ahorren escribir código, es muy probable que este artículo te guste y te oriente a como empezar con ello.

Si te quedas hasta el final del artículo, veras cómo crear una solución que muestra el calendario de Outlook con unos sencillos pasos, gracias a Microsoft Graph Toolkit y SharePoint Framework (SPFx).

¿Qué es Microsoft Graph Toolkit?

Contiene una colección de componentes visuales reutilizables, “framework-agnostic” y diferentes proveedores de autenticación para acceder y trabajar con datos de Microsoft Graph desde cualquier plataforma.

Los componentes nos ayudan a despreocuparnos de la conexión con el servicio de Microsoft Graph, a nivel autenticación y petición de datos.

 

En este ejemplo utilizaré Visual Studio Code, junto con la versión 1.13 de SPFx ( detalles de cómo preparar un entorno de desarrollo de SPFx ) para crear un webpart donde mostraré los eventos de mi calendario de Outlook.

Crearemos un proyecto utilizando el comando: “yo @microsoft/sharepoint” y a continuación tendremos que pasar por el asistente de creación seleccionando las opciones necesarias para la creación de un webpart (en mi caso el webpart se llama “MyAgenda”).

¿Qué necesitamos instalar?

Dentro de la solución ya creada será necesario instalar (usando npm i “nombre del paquete”) los siguientes paquetes:

  • @microsoft/mgt-spfx: librería específica de Graph Toolkit para SharePoint, que usaremos para importar los proveedores de autenticación.
  • @microsoft/mgt-react: librería que contiene los componentes web de Graph Toolkit (para usar con React).
  • @microsoft/microsoft-graph-types: dependencia de desarrollo (--save-dev) de los types de graph para TypeScript.

Al estar trabajando en una solución de SharePoint Framework debemos utilizar las librerías específicas, mencionadas anteriormente, tanto para el proveedor de autenticación como para los componentes web en React/SPFx.

¿Cómo usamos los componentes de Graph Toolkit en SharePoint Framework?

Para empezar, necesitamos referenciar en nuestro nuevo webpart el proveedor correspondiente para SharePoint Online.

Para ello debemos ir al fichero principal de nuestro webpart (MyAgendaWebPart.ts) y en la parte superior importar el proveedor de autenticación (1).

Por otra parte, tenemos que sobrescribir el método OnInit y añadir el uso global del proveedor de autenticación de SharePoint (2).

Una vez hecho esto, podemos pasar a la parte visual e importar dentro de nuestro webpart (MyAgenda.tsx) los controles a utilizar desde la librería de “mgt-react”.

Es muy importante que referenciemos los controles desde “mgt-react/dist/es6/spfx” para que otros posibles webpart dentro de la misma página compartan el mismo registro del control. Es decir, podemos tener varios webparts en la misma página que utilicen siempre el mismo conjunto de componente web de Graph Toolkit (ahorro de tiempo de carga y mejora de rendimiento).

En mi caso voy a utilizar el componente de Agenda (mgt-agenda) para mostrar en pantalla un máximo de 6 eventos de calendario de Outlook (podemos jugar con las propiedades del componente para hacer diferentes queries o filtros, limitar el número de días a recuperar de Graph, agrupar los eventos por día, etc).

Por defecto la visualización de estos componentes es muy básica pero el diseño de estos se ajusta perfectamente al diseño de caja de SharePoint Online.

Como posibilidad de diseño están las plantillas personalizadas, que podemos utilizar para ajustar el diseño a nuestro gusto (incorporando los colores del tema de SharePoint Online).

¿Cómo creamos plantillas personalizadas para los componentes?

Dependiendo del componente que estemos utilizando nos permitirá sobrescribir diferentes plantillas que podemos ver en la documentación oficial. El componente de Agenda (mgt-agenda) que yo estoy utilizando ofrece varias plantillas:

  • event: Plantilla usada para representar cada evento.
  • event-other: Plantilla usada para representar contenido adicional para cada evento.
  • header: Plantilla usada para representar el encabezado de cada día.
  • loading: Plantilla que se usa cuando se cargan datos. no-data: Plantilla que se usa cuando no hay eventos disponibles.

Para mi componente he utilizado la plantilla de event, loading y no-data para diseñar la visualización de cada elemento de calendario, la pantalla de “cargando calendario…” y la pantalla sin resultados para mostrar.

A nivel de código he definido las tres plantillas de manera fácil y rápida mezclando:

  • html: para definir la estructura de mi webpart
  • scss: para asignar las clases y estilos a cada elemento a pintar en el webpart
  • FluentUI: para incluir iconos y el spinner de carga de datos en el diseño
  • componentes web de Graph Toolkit anidados: para el componente de Persona que muestra la imagen de cada asistente a los eventos del calendario (plantilla evento)

Además, tenemos diferentes propiedades y eventos que podemos utilizar en cada componente (detalles en la documentación oficial para ver que propiedades y eventos nos ofrece cada componente).

Otra de las funcionalidades que podemos personalizar a nivel visual son los temas de colores y el manejo de estas. Podríamos definir temas (ej: light, dark, contrast, teams, etc..) y aplicarlas según el entorno o la configuración que elija el usuario (ejemplo de webpart que utiliza componentes de Graph Toolkit y temas de colores en GitHub).

Conclusiones:

  • Se desarrolla muy fácil eligiendo los componentes predefinidos de Graph Toolkit que más se ajusten a nuestras necesidades y personalizarlos usando las plantillas que ofrecen.
  • Tenemos varias funcionalidades que nos facilitan aun mas el trabajo: propiedades, eventos, temas de colores, posibilidad de incluir caché, localización de textos estáticos en diferentes idiomas.
  • Si ninguno de los componentes predefinidos nos sirve, podemos echar mano del componente “mgt-get” y hacer cualquier petición GET hacia MS Graph, personalizando los resultados utilizando las plantillas personalizadas.

Links útiles:

Tags

He leído y acepto la política de privacidad
Acepto recibir emails sobre actividades de recruiting NTT DATA