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).
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”).
Dentro de la solución ya creada será necesario instalar (usando npm i “nombre del paquete”) los siguientes paquetes:
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.
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).
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:
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:
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).
Links útiles: