Crear un evento de calendario con MS Graph
Lo primero que vamos a hacer es crear el web part, para ello, como siempre:
Abre una ventana de comandos y sitúate en la carpeta donde quieras
generar el web part.
Ejecuta yeoman para generar el web part de sharepoint
yo @microsoft/sharepoint
Continúa
el asistente de SharePoint
- What is your solution
name?: EventosGraphSPFx
- Which baseline packages
do you want to target for your component(s)?: SharePoint Online only (latest)
- Where do you want to
place the files?: Use the current folder
- Do you want to allow the
tenant admin the choice of being able to deploy the solution to all sites
immediately without running any feature deployment or adding apps in
sites?: No
- Will the components in
the solution require permissions to access web APIs that are unique and
not shared with other components in the tenant?: No
- Which type of client-side
component to create?: WebPart
- What is your Web part
name?: EventosGraphSPFx
- What is your Web part
description?: EventosGraphSPFx
Descripción.
- Which framework would
you like to use?: React
Cuando
se complete el asistente de creación del web part, vamos a instalar los
siguientes modulos:
npm install @microsoft/microsoft-graph-types --save-dev
A continuación,
empezamos a modificar el codigo Fuente. El primer paso es añadir las siguientes
dependencias al fichero .ts que nos ha generado el web part:
import { MSGraphClient } from '@microsoft/sp-http';
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
Hay que
modificar la function render que nos ha dado por defecto, en su lugar la
dejaremos así:
this.context.msGraphClientFactory.getClient()
.then((client: MSGraphClient): void => {
const
element: React.ReactElement<IEventosGraphProps> = React.createElement(
EventosGraph,
{
graphClient: client
}
);
ReactDom.render(element,
this.domElement);
});
Como se puede
apreciar, le estamos pasando al componente de react una propiedad llamada
graphClient, por lo tanto debemos incluirla en el interfaz de propiedades IEventosGraphProps
import { MSGraphClient } from '@microsoft/sp-http';
export interface IEventosGraphProps {
graphClient: MSGraphClient;
}
NOTA: para añadir un MSGraphClient hay que
hacer un import:
import { MSGraphClient } from '@microsoft/sp-http';
A
continuación pasamos a modificar el codigo del fichero .tsx correspondiente al
componente react que se mostrará en el web part.
En este
caso, lo que voy a hacer es simplemente incluir un botón que cuando haga clic,
introduzca un evento en el calendario del usuario conectado. Evidentemente
podríamos modificar el formulario para que el evento se genere en función de
unas fechas seleccionadas.
La función
render quedará entonces así:
public render(): React.ReactElement {
return (
<Primarybutton nbsp="" onclick="{this._alertClicked} /" text="Crear Evento" />
); }
Como
estoy incluyendo un botón de ui fabric, recordad que hay que añadir un import:
import { DefaultButton, PrimaryButton, Stack, IStackTokens } from 'office-ui-fabric-react';
Como
vamos a utilizar MSGraphClient desde el fichero tsx, también tenemos que hacer
un import a éste modulo:
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
Por
último, en el render puede verse que el clic del botón lanza una función llamada
alertClicked. El código de esta función es el siguiente:
public _alertClicked(): void {
const event : MicrosoftGraph.Event = {
subject: "Evento
desde SPFX creado",
body: {
content: "Hemos
creado un evento desde un web part SPFX”
},
start: {
dateTime: "2019-11-15T12:00:00",
timeZone: "Romance Standard Time"
},
end: {
dateTime: "2019-11-15T14:00:00",
timeZone: "Romance Standard Time"
},
location:{
displayName:"Lugar
preferido de David?"
},
attendees: [
{
emailAddress: {
address:"david@mysite.onmicrosoft.com",
name: "David Alonso"
},
type: "required"
}
]
};
this.props.graphClient
.api('https://graph.microsoft.com/v1.0/me/calendar/events')
.post(event, (err, res) = > {
alert(res);
})
}
NOTA: para poder utilizar en la función el
this, hay que bindearla.
NOTA2. En el evento que creo estoy metiendo como asistentes a David Alonso. Puedes generar el evento sin asistentes.
NOTA2. En el evento que creo estoy metiendo como asistentes a David Alonso. Puedes generar el evento sin asistentes.
Hasta
aquí tenemos el codigo para poder generar un evento desde SPFX, pero lo
importante ahora es que este componente spfx tenga permisos de Graph para
insertar el evento. Para ello es necesario añadir en el fichero
config\package-solution.json las siguientes líneas
"webApiPermissionRequests": [
{
"resource": "Microsoft Graph",
"scope": "Calendars.ReadWrite"
}
]
Quedando
ese fichero de la siguiente forma:
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
"name": "graphemail-client-side-solution",
"id": "7d871ed2-27a7-474c-b468-a838f043703c",
"version": "1.0.0.1",
"includeClientSideAssets": true,
"isDomainIsolated": false,
"webApiPermissionRequests": [
{
"resource": "Microsoft Graph",
"scope": "Calendars.ReadWrite"
}
]
},
"paths": {
"zippedPackage": "solution/graphemail.sppkg"
}
}
NOTA: Fijaros que le he subido un 1 a la versión
;)
A
continuación procedemos a desplegar la solución ejecutando los siguientes
comandos.
gulp bundle --ship
gulp package-solution --ship
Buscamos
el archive de la solucion y lo desplegamos en el catálogo de aplicaciones de
SharePoint.
Ahora
solo nos queda aprobar los permisos solicitados. Para ello desde el panel de
Administración de SharePoint, buscar Administración de Api
En otro
post mostraré como visualizar los eventos introducidos en un web part.
No hay comentarios:
Publicar un comentario