Con la salida de la versión 1.4.1 de SharePoint Framework, ahora tenemos en modo preview acceso a la API de Microsoft Graph. Qué excitante!!!

En este artículo realizaremos una prueba de concepto y utilizaremos la API de Microsoft Graph con SharePoint Framework.

Vamos a crear un webpart que tenga acceso a mi calendario y podamos mostrar un evento que tengamos almacenado. En este artículo asumimos que tienes ciertos conocimientos a la hora de crear un WebPart con SharePoint Framework. De no ser así, te invito a que primero veas algún artículo de cómo se crea un WebPart y como se publica en tu tenant de O365.

Para hacer funcionar esta prueba de concepto, será necesario poner las preferencias de publicación en versión First Release para nuestro tenant. Para ponerla en este modo será necesario acceder a la url: https://portal.office.com/adminportal/home#/companyprofile

Modificar las preferencias de publicación y ponerlo en «First Release» como se muestra en la siguiente imagen.

 

Vamos a crear un evento en nuestro calendario para poder obtener sus datos con la API de MS Graph.

 

 

Ahora entramos en materia y utilizaremos el generador de Yeoman para crear un Webpart, con la versión de SPFx 1.4.1. En mi caso he utilizado React como librería javascript.

Para ayudarnos a detectar errores instalamos el paquete de tipado de Microsoft Graph que no viene incluido en el scaffolding del proyecto:

npm install @microsoft/microsoft-graph-types –save-dev

Dentro del proyecto. Lo primero será modificar el archivo package-solution.json para pedir permisos de lectura sobre Microsoft Graph en los ambitos de Calendar y User. Debemos recordar que la opción de webApiPermissionRequests solo está disponible a partir de la versión 1.4.1 de SharePoint Framework.

{
"$schema": "https://dev.office.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
"name": "ms-graph-sp-fx-rock-client-side-solution",
"id": "233abe9f-0ebb-4df3-a102-dce1a6c210a1",
"version": "1.0.0.0",
"includeClientSideAssets": true,
"skipFeatureDeployment": true,
"webApiPermissionRequests": [
{
"resource": "Microsoft Graph",
"scope": "Calendars.Read"
},
{
"resource": "Microsoft Graph",
"scope": "User.ReadBasic.All"
}
]
},
"paths": {
"zippedPackage": "solution/ms-graph-sp-fx-rock.sppkg"
}
}

Para ver que permisos necesitamos usar en la api recomiendo este enlace:

También podemos testear la API gracias a este enlace:

  • Graph Explorer: con este enlace podemos realizar peticiones de prueba a la API.

Procedemos a modificar el código del WebPart para hacer la llamada a nuestra API. Lo primero llamamos a las librerías de MSGraph.

import { MSGraphClient } from '@microsoft/sp-client-preview';
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';

La llamada se encarga de obtener todos los eventos de mi usuario:

const client: MSGraphClient = this.props.spContext.serviceScope.consume(MSGraphClient.serviceKey);
client
.api('/me/events?$select=subject,body,bodyPreview,organizer,attendees,start,end,location')
.get((error, response: any, rawResponse?: any) => {
let events:[MicrosoftGraph.Event] = response.value;
console.log(events);
if(events.length>0){
this.setState({ event: events[0] });
}
});

Una vez que hemos insertado el código procedemos a crear el paquete de solución utilizando los siguientes comandos:

gulp clean
gulp bundle --ship
gulp package-solution--ship

Cogemos el paquete de solución alojado en la carpeta SharePoint de nuestro proyecto y lo instalamos en el App Catalog.

Ahora debemos aprobar los permisos que hemos dado en el package-solution.json a nuesto WebPart. Para ello debemos acceder a la administración de SharePoint de nuestro tenant y probar la nueva versión del centro de administración.

En la parte de Administración de la API vemos los permisos pendientes de aprobar.

Aprobamos dichas peticiones de permisos.

Una vez aceptadas las peticiones de acceso a la API de Graph, lo último que haremos será crear una Modern Page para insertar nuestro WebPart.

Aquí tenemos el resultado :

El código está subido en github:

https://github.com/AlbertoNR/RockYourOffice/tree/master/MSGraphSPFxRock

 

Happy coding amigos.