Neste exercício, você incorporará o Microsoft Graph ao aplicativo.In this exercise you will incorporate Microsoft Graph into the application. Para este aplicativo, você usará a biblioteca microsoft-graph-client para fazer chamadas para o Microsoft Graph.For this application, you will use the microsoft-graph-client library to make calls to Microsoft Graph.

Obter eventos de calendário do OutlookGet calendar events from Outlook

Comece adicionando uma API para obter uma exibição de calendário do calendário do usuário.Start by adding an API to get a calendar view from the user's calendar.

  1. Abra ./src/api/graph.ts e adicione as instruções a import seguir na parte superior do arquivo.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. Adicione a função a seguir para inicializar o SDK do Microsoft Graph e retornar um Cliente.Add the following function to initialize the Microsoft Graph SDK and return a Client.

  3. Adicione a função a seguir para obter o fuso horário do usuário a partir de suas configurações de caixa de correio e converter esse valor em um identificador de fuso horário 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. Adicione a seguinte função (abaixo da const graphRouter = Router(); linha) para implementar um ponto de extremidade de API ( GET /graph/calendarview ).Add the following function (below the const graphRouter = Router(); line) to implement an API endpoint (GET /graph/calendarview).

    Considere o que esse código faz.Consider what this code does.

    • Ele obtém o fuso horário do usuário e o usa para converter o início e o fim da exibição de calendário solicitada em 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.
    • Ele faz um GET para o ponto de extremidade da API do /me/calendarview Graph.It does a GET to the /me/calendarview Graph API endpoint.
      • Ele usa a função para definir o header, fazendo com que as horas de início e término dos eventos retornados sejam ajustadas para o header Prefer: outlook.timezone fuso horário do usuário.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.
      • Ele usa a query função para adicionar os startDateTime endDateTime parâmetros, definindo o início e o fim do ponto de vista de calendário.It uses the query function to add the startDateTime and endDateTime parameters, setting the start and end of the calendar view.
      • Ele usa select a função para solicitar apenas os campos usados pelo complemento.It uses the select function to request only the fields used by the add-in.
      • Ela usa orderby a função para classificar os resultados pela hora de início.It uses the orderby function to sort the results by the start time.
      • Ela usa top a função para limitar os resultados em uma única solicitação a 25.It uses the top function to limit the results in a single request to 25.
    • Ele usa um objeto PageIteratorCallback para iterar pelos resultados e para fazer solicitações adicionais se mais páginas de resultados estão disponíveis.It uses a PageIteratorCallback object to iterate through the results and to make additional requests if more pages of results are available.

Atualizar a interface do usuárioUpdate the UI

Agora vamos atualizar o painel de tarefas para permitir que o usuário especifique uma data de início e de término para a exibição de calendário.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 e substitua a função showMainUi existente pelo seguinte.Open ./src/addin/taskpane.js and replace the existing showMainUi function with the following.

    Este código adiciona um formulário simples para que o usuário possa especificar uma data de início e de término.This code adds a simple form so the user can specify a start and end date. Ele também implementa um segundo formulário para criar um novo evento.It also implements a second form for creating a new event. Esse formulário não faz nada por enquanto, você implementará esse recurso na próxima seção.That form doesn't do anything for now, you'll implement that feature in the next section.

  2. Adicione o código a seguir ao arquivo para criar uma tabela na planilha ativa contendo os eventos recuperados da exibição de calendário.Add the following code to the file to create a table in the active worksheet containing the events retrieved from the calendar view.

  3. Adicione a função a seguir para chamar a API de exibição de calendário.Add the following function to call the calendar view API.

  4. Salve todas as suas alterações, reinicie o servidor e atualize o painel de tarefas no Excel (feche todos os painéis de tarefas abertos e reaberto).Save all of your changes, restart the server, and refresh the task pane in Excel (close any open task panes and re-open).

    Uma captura de tela do formulário de importação

  5. Escolha as datas de início e término e escolha Importar.Choose start and end dates and choose Import.

    Uma captura de tela da tabela de eventos