Exercice : optimiser les requêtes Microsoft Graph avec le composant mgt-get

  • 8 minutes

Dans cet exercice, vous allez apprendre à utiliser le composant Obtenir du Kit de ressources Microsoft Graph. Cela vous permet d’afficher des blocs-notes à partir de OneNote pour l’utilisateur connecté.

Avant de commencer

Comme condition préalable à cet exercice, assurez-vous d’avoir terminé l’exercice précédent dans ce module. Unité 3 : Exercice : Mettre en cache les données chargées par les composants.

Consommation du composant Get

Suivez ces étapes pour consommer le composant Get pour afficher les blocs-notes des utilisateurs dans votre application.

  1. Ouvrez le fichier index.html. Ajoutez le composant Get dans la balise <body> juste après le composant de connexion <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. Ajoutez les attributs resource et scopes au composant Obtenir, comme suit :

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

  3. Pour obtenir la liste des blocs-notes OneNote, puis les afficher dans l’application, effectuez les tâches suivantes :

    • Ajoutez <template></template> entre les balises <mgt-get></mgt-get>.
    • Ajoutez <div></div> entre les balises <template></template>.
    • Ajoutez un attribut data-for à <div> pour passer en boucle chaque bloc-notes dans la liste des blocs-notes. Définissez l’attribut sur data-fornote 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. Vous aurez alors une liste des données des blocs-notes dans votre application. Pour afficher la liste des noms de bloc-notes avec leurs URL associées, ajoutez cette ligne à l’intérieur des balises<div></div> :

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

  5. Pour afficher le profil de la personne qui a modifié le bloc-notes en dernier, ainsi que la date et l’heure de la dernière modification du bloc-notes, ajoutez ce extrait de code à l’intérieur des balises <div></div>. Ajoutez cet élément après la balise <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. Pour donner un aspect plus professionnel à votre composant Get, créez un fichier index.css dans le dossier performance-mgt.

  7. Ajoutez l’extrait de code CSS suivant dans 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. Ajoutez cette ligne dans votre fichier index.html entre les balises <head></head> :

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

  9. Le fichier .html doit ressembler à ce qui suit dès que vous avez terminé :

    <!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>

Tester votre application dans un navigateur

  1. Si c’est la première fois que vous utilisez le client de développeur Microsoft 365, il est possible que vous n’ayez aucun bloc-notes dans le OneNote du compte client de développeur Microsoft 365. Avant le démarrage du test de votre application, visitez https://www.office.com/launch/onenote, puis connectez-vous avec votre compte client de développeur Microsoft 365. Créez des blocs-notes dans OneNote.

  2. Dans Visual Studio Code, sélectionnez la combinaison de touches suivante dans Visual Studio Code, puis recherchez Live Server :

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

    Exécutez Live Server pour tester votre application.

  3. Ouvrez votre navigateur, puis accédez à http://localhost:3000.

  4. Connectez-vous à l’aide de votre compte développeur Microsoft 365. Acceptez les autorisations de calendrier requises, puis sélectionnez Accepter.

  5. La liste des fichiers s’affiche dans votre application, avec des informations sur la personne qui a partagé le fichier avec vous ainsi que l’heure de la dernière modification.

Capture d’écran qui affiche le composant Contacts du Kit de ressources Microsoft Graph.