Esercitazione: ottimizzare le query in Microsoft Graph con il componente mgt-get

  • 8 minuti

In questo esercizio viene descritto come utilizzare il componente Get di Microsoft Graph Toolkit. Il componente consente di visualizzare i blocchi appunti di OneNote per l'utente connesso.

Prima di iniziare

Come prerequisito per questo esercizio, assicurarsi di aver completato l'esercizio precedente in questo modulo: "Unità 3: Esercizio: Memorizzare nella cache i dati caricati dai componenti".

Utilizzo del componente Get

Seguire questa procedura per usare il componente Get per visualizzare i blocchi appunti di un utente nell'app.

  1. Aprire il file index.html. Aggiungere il componente Get all'interno del tag <body>, subito dopo il componente Login <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. Aggiungere gli attributi resource e scopes al componente Get, come indicato di seguito:

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

  3. Per ottenere un elenco di blocchi appunti di OneNote e visualizzarli nell'app, eseguire le attività seguenti:

    • Aggiungere <template></template> tra i tag <mgt-get></mgt-get>.
    • Aggiungere <div></div> tra i tag <template></template>.
    • Aggiungere un attributo data-for in <div> per eseguire il ciclo in ogni blocco appunti nell'elenco dei blocchi appunti. Impostare l'attributo data-for su 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. A questo punto si avrà un elenco dei dati dei blocchi appunti nell'app. Per visualizzare l'elenco dei nomi dei blocchi appunti con gli URL associati, aggiungere la riga seguente all'interno dei tag <div></div>:

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

  5. Per visualizzare il profilo della persona che ha modificato il blocco appunti per l'ultima volta e la data e l'ora dell'ultima modifica del blocco appunti, aggiungere il frammento di codice seguente all'interno dei tag <div></div>. Aggiungerlo dopo il tag <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. Per rendere il componente Get più professionale, creare un file index.css nella cartella performance-mgt.

  7. Aggiungere il frammento di codice CSS seguente in 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. Aggiungere la riga seguente nel file index.html, tra i tag <head></head>:

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

  9. Dopo tutte le modifiche, il file index.html dovrebbe avere il seguente aspetto:

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

Test dell'app nel browser

  1. Se è la prima volta che è stato utilizzato il tenant per sviluppatori di Microsoft 365, è possibile che non siano presenti blocchi appunti nel proprio account del tenant per sviluppatori di Microsoft 365. Prima di iniziare a testare l'app, visitare https://www.office.com/launch/onenote e accedere con l'account del tenant per sviluppatori di Microsoft 365. Creare nuovi blocchi appunti in OneNote.

  2. In Visual Studio Code premere la seguente combinazione di tasti e cercare Live Server:

    • Windows: CTRL+MAIUSC+P
    • macOS: COMANDO+MAIUSC+P

    Eseguire Live Server per testare l'applicazione.

  3. Aprire il browser e andare a http://localhost:3000.

  4. Accedere con il proprio account Microsoft 365 Developer. Fornire il consenso alle autorizzazioni necessarie e selezionare Accetta.

  5. Nell'app verrà visualizzato un elenco di file con informazioni sulla persona che ha condiviso il file con l'utente e sull'ora dell'ultima modifica.

Screenshot che mostra il componente People di Microsoft Graph Toolkit.