Ejercicio: Optimización de consultas de Microsoft Graph con el componente mgt-get

  • 8 minutos

En este ejercicio, aprenderá a usar el componente Obtener del Kit de herramientas de Microsoft Graph. Esto le permite mostrar cuadernos de OneNote para el usuario que ha iniciado sesión.

Antes de empezar

Como requisito previo para este ejercicio, asegúrese de que ha completado el ejercicio anterior de este módulo: "Unidad 3: Ejercicio: Almacenamiento en caché de los datos cargados por los componentes".

Consumir el componente Get

Siga estos pasos para consumir el componente Get a fin de mostrar los cuadernos de un usuario en la aplicación.

  1. Abra el archivo index.html. Agregue el componente Get dentro de la etiqueta <body>, justo después del componente de inicio de sesión <mgt-login></mgt-login>.

    <!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
</head>
<body>
  <mgt-msal2-provider client-id="YOUR-CLIENT-ID-HERE"></mgt-msal2-provider>
  <mgt-login></mgt-login>
  <mgt-get></mgt-get>
</body>
</html>

  2. Agregue los atributos resource y scopes al componente Get, como se indica a continuación:

    <mgt-get resource="me/onenote/notebooks" scopes="Notes.Read, Notes.Read.All">
</mgt-get>

  3. Para obtener una lista de cuadernos de OneNote y mostrarlos en la aplicación, realice las siguientes tareas:

    • Agregue <template></template> entre las etiquetas <mgt-get></mgt-get>.
    • Agregue <div></div> entre las etiquetas <template></template>.
    • Agregue un atributo data-for en <div> para recorrer en bucle cada cuaderno de la lista de cuadernos. Establezca el data-for atributo en note in value.
    <mgt-get resource="me/onenote/notebooks" scopes="Notes.Read, Notes.Read.All">
  <template>
    <div class="note" data-for="note in value">
    </div>
  </template>
</mgt-get>

  4. Ahora tendrá una lista de los datos de los cuadernos en la aplicación. Para mostrar la lista de nombres de cuaderno con sus direcciones URL asociadas, agregue la siguiente línea dentro de las etiquetas <div></div>:

    <a href="{{ note.links.oneNoteWebUrl.href}}"> {{ note.displayName }} </a>

  5. Para mostrar el perfil de la persona que ha modificado por última vez el cuaderno, así como la fecha y hora de la última modificación, agregue el siguiente fragmento de código dentro de las etiquetas <div></div>. Agréguelo después de la etiqueta <a></a>.

    <h4> Last modified by:
   <mgt-person person-query="{{note.lastModifiedBy.user.displayName}}" view="oneline" person-card="hover"></mgt-person>
</h4>
<h5>Last modified date: {{note.lastModifiedDateTime}}</h5>

  6. Para que el componente Get tenga un aspecto más profesional, cree un archivo index.css en la carpeta performance-mgt.

  7. Agregue el siguiente fragmento de código CSS a index.css:

    .note {
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  padding: 10px;
  margin: 8px 4px;
  font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif;
}

.note a {
  font-size: 14px;
  margin-top: 8px;
}

.note h4 {
  font-size: 9px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: gray;
  margin-top: 4px;
  margin-bottom: 0px;
}
.note h5 {
  font-size: 7px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: royalblue;
  margin-top: 4px;
  margin-bottom: 0px;
}

.note mgt-person {
  --person-line1-font-size: 10px;
  --avatar-size-s: 12px;
  display: inline-block;
  vertical-align: middle;
}

  8. Agregue la línea siguiente en el archivo index.html, entre las etiquetas <head></head>:

    <link rel='stylesheet' href='index.css'>

  9. Cuando haya terminado, el archivo index.html debería ser similar al siguiente:

    <!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
  <link rel='stylesheet' href='index.css'>
</head>

<body>
  <mgt-msal2-provider client-id="YOUR-CLIENT-ID-HERE"></mgt-msal2-provider>
  <mgt-login></mgt-login>
  <mgt-get resource="/me/onenote/notebooks" scopes="Notes.Read, Notes.Read.All">
    <template>
      <div class="note" data-for="note in value">
        <a href="{{note.links.oneNoteWebUrl.href}}">{{ note.displayName }} </a>
        <h4> Last modified by:
          <mgt-person person-query="{{note.lastModifiedBy.user.displayName}}" view="oneline" person-card="hover">
          </mgt-person>
        </h4>
        <h5>Last modified date: {{note.lastModifiedDateTime}}</h5>
      </div>
    </template>
  </mgt-get>
</body>
</html>

Probar la aplicación en el explorador

  1. Si es la primera vez que ha usado el espacio empresarial de desarrollador de Microsoft 365, es posible que no tenga ningún cuaderno en la instancia de OneNote de la cuenta de espacio empresarial de desarrollador de Microsoft 365. Antes de empezar a probar la aplicación, visite https://www.office.com/launch/onenote e inicie sesión con la cuenta de espacio empresarial de desarrollador de Microsoft 365. Cree cuadernos en OneNote.

  2. Seleccione la siguiente combinación de teclas en Visual Studio Code y busque Live Server:

    • Windows: CTRL+SHIFT+P
    • macOS: COMMAND+SHIFT+P

    Ejecute Live Server para probar la aplicación.

  3. Abra el explorador y vaya a http://localhost:3000.

  4. Inicie sesión con su cuenta de desarrollador de Microsoft 365. Dé su consentimiento a los permisos necesarios y seleccione Aceptar.

  5. Aparecerá una lista de archivos en la aplicación, con información sobre la persona que ha compartido el archivo con usted y la hora de la última modificación.

Captura de pantalla en la que se muestra el componente Personas del Kit de herramientas de Microsoft Graph.