En este ejercicio incorporará Microsoft Graph a la aplicación.In this exercise you will incorporate Microsoft Graph into the application. Para esta aplicación, usará la biblioteca de microsoft-graph-client para realizar llamadas a Microsoft Graph.For this application, you will use the microsoft-graph-client library to make calls to Microsoft Graph.

Obtener eventos de calendario de OutlookGet calendar events from Outlook

Empiece por agregar una API para obtener una vista de calendario del calendario del usuario.Start by adding an API to get a calendar view from the user's calendar.

  1. Abra ./src/api/graph.ts y agregue las siguientes instrucciones en import la parte superior del archivo.Open ./src/api/graph.ts and add the following import statements to the top of the file.

    import { zonedTimeToUtc } from 'date-fns-tz';
    import { findOneIana } from 'windows-iana';
    import * as graph from '@microsoft/microsoft-graph-client';
    import { Event, MailboxSettings } from 'microsoft-graph';
    import 'isomorphic-fetch';
    import { getTokenOnBehalfOf } from './auth';
    
  2. Agregue la siguiente función para inicializar el SDK de Microsoft Graph y devolver un cliente.Add the following function to initialize the Microsoft Graph SDK and return a Client.

  3. Agregue la siguiente función para obtener la zona horaria del usuario de su configuración de buzón de correo y para convertir ese valor en un identificador de zona horaria IANA.Add the following function to get the user's time zone from their mailbox settings, and to convert that value to an IANA time zone identifier.

  4. Agregue la siguiente función (debajo de la const graphRouter = Router(); línea) para implementar un punto de conexión de API ( GET /graph/calendarview ).Add the following function (below the const graphRouter = Router(); line) to implement an API endpoint (GET /graph/calendarview).

    Ten en cuenta lo que hace este código.Consider what this code does.

    • Obtiene la zona horaria del usuario y la usa para convertir el inicio y el final de la vista de calendario solicitada en valores UTC.It gets the user's time zone and uses that to convert the start and end of the requested calendar view into UTC values.
    • Realiza una llamada al GET punto de conexión de la API de /me/calendarview Graph.It does a GET to the /me/calendarview Graph API endpoint.
      • Usa la función para establecer el encabezado, lo que hace que las horas de inicio y finalización de los eventos devueltos se ajusten a la zona horaria header Prefer: outlook.timezone del usuario.It uses the header function to set the Prefer: outlook.timezone header, causing the start and end times of the returned events to be adjusted to the user's time zone.
      • Usa la función query para agregar los parámetros startDateTime endDateTime and, estableciendo el inicio y el final de la vista de calendario.It uses the query function to add the startDateTime and endDateTime parameters, setting the start and end of the calendar view.
      • Usa la función select para solicitar solo los campos usados por el complemento.It uses the select function to request only the fields used by the add-in.
      • Usa la función orderby para ordenar los resultados por hora de inicio.It uses the orderby function to sort the results by the start time.
      • Usa la función top para limitar los resultados en una sola solicitud a 25.It uses the top function to limit the results in a single request to 25.
    • Usa un objeto PageIteratorCallback para recorrer en iteración los resultados y realizar solicitudes adicionales si hay más páginas de resultados disponibles.It uses a PageIteratorCallback object to iterate through the results and to make additional requests if more pages of results are available.

Actualizar la interfaz de usuarioUpdate the UI

Ahora vamos a actualizar el panel de tareas para permitir al usuario especificar una fecha de inicio y finalización para la vista de calendario.Now let's update the task pane to allow the user to specify a start and end date for the calendar view.

  1. Abra ./src/addin/taskpane.js y reemplace la función showMainUi existente por lo siguiente.Open ./src/addin/taskpane.js and replace the existing showMainUi function with the following.

    Este código agrega un formulario simple para que el usuario pueda especificar una fecha de inicio y finalización.This code adds a simple form so the user can specify a start and end date. También implementa un segundo formulario para crear un nuevo evento.It also implements a second form for creating a new event. Ese formulario no hace nada por ahora, implementará esa característica en la siguiente sección.That form doesn't do anything for now, you'll implement that feature in the next section.

  2. Agregue el siguiente código al archivo para crear una tabla en la hoja de cálculo activa que contenga los eventos recuperados de la vista de calendario.Add the following code to the file to create a table in the active worksheet containing the events retrieved from the calendar view.

  3. Agregue la siguiente función para llamar a la API de vista de calendario.Add the following function to call the calendar view API.

  4. Guarde todos los cambios, reinicie el servidor y actualice el panel de tareas en Excel (cierre los paneles de tareas abiertos y vuelva a abrir).Save all of your changes, restart the server, and refresh the task pane in Excel (close any open task panes and re-open).

    Captura de pantalla del formulario de importación

  5. Elija fechas de inicio y finalización y elija Importar.Choose start and end dates and choose Import.

    Captura de pantalla de la tabla de eventos