Esercitazione: modifica del comportamento dei componenti tramite l’uso degli attributi

  • 2 minuti

In questo esercizio si apprenderà come usare gli attributi con i componenti di Microsoft Graph Toolkit per personalizzare l'output del componente nell'applicazione.

Prima di iniziare

Completare i seguenti passaggi come prerequisiti per questo esercizio.

1. Configurare un'app Microsoft Entra

Per questo modulo è necessaria un'applicazione con le impostazioni seguenti:

  • Nome: My app
  • Piattaforma: SPA (Single Page Application)
  • Tipi di account supportati: account in qualsiasi directory organizzativa (qualsiasi directory Microsoft Entra - Multi-tenant) e account Microsoft personali (ad esempio, Skype, Xbox)
  • URI di reindirizzamento: http://localhost:3000

A tale scopo, attenersi alla seguente procedura:

  1. Nel browser passare alla Interfaccia di amministrazione di Microsoft Entra, accedere e passare a Microsoft Entra ID.

  2. Selezionare Registrazioni app nel riquadro a sinistra e selezionare Nuova registrazione.

    Screenshot che mostra la selezione di Nuova registrazione per creare una nuova registrazione dell'app.

  3. Nella schermata Registra un'applicazione, immetti i valori seguenti:

    • In Nome: immetti un nome per l'applicazione.
    • Tipi di account supportati: selezionare Account in qualsiasi directory organizzativa (Qualsiasi directory Microsoft Entra - Multitenant) e account Microsoft personali (ad esempio Skype, Xbox).
    • URI di reindirizzamento (facoltativo): seleziona Applicazione a pagina singola (SPA) e premi http://localhost:3000.
    • Selezionare Registra.

    Screenshot che mostra la registrazione dell'applicazione in Microsoft Entra ID.

2. Impostare l'ambiente

  1. Creare una cartella sul desktop denominata customize-mgt.

  2. Aprire la cartella customize-mgt in Visual Studio Code.

  3. In Visual Studio Code, creare un file denominato index.html nella cartella customize-mgt.

  4. Copiare il codice seguente in index.html. Sostituire YOUR-CLIENT-ID con l'ID applicazione (client) copiato dall'app Microsoft Entra creata in precedenza.

    <!DOCTYPE html>
<html lang="en">
  <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"></mgt-msal2-provider>
    <mgt-login></mgt-login>
    <mgt-agenda></mgt-agenda>
  </body>
</html>

  5. Aggiungere una cartella denominata .vscode nella radice della cartella del progetto.

  6. Aggiungere un file denominato settings.json nella cartella .vscode. Copiare e incollare il codice seguente in settings.json e salvare il file.

    {
  "liveServer.settings.host": "localhost",
  "liveServer.settings.port": 3000
}

Usare gli attributi per modificare il comportamento del componente Agenda

Sono disponibili diversi attributi per il componente Agenda. Esaminiamo alcuni attributi e vediamo come possono essere usati per modificare il comportamento del componente Agenda:

  • L'attributo date può essere usato per definire la data di inizio per gli eventi.

  • L'attributo days può essere usato per visualizzare un elenco di eventi per un numero di giorni specifico.

  • L'attributo group-by-day può essere usato per elencare gli eventi nel giorno correlato e nella data visualizzata.

    <mgt-agenda
  date="June 27, 2023"
  days="3"
  group-by-day>
</mgt-agenda>

Aggiungere questi attributi al componente mgt-agenda in index.html. La versione finale di index.html sarà simile all'esempio seguente:

<!DOCTYPE html>
<html lang="en">
  <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"></mgt-msal2-provider>
    <mgt-login></mgt-login>

    <mgt-agenda
        date="June 27, 2023"
        days="3"
        group-by-day>
    </mgt-agenda>

  </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 eventi nel calendario del proprio account. Prima di iniziare a testare l'app, visitare https://outlook.office.com/calendar e accedere con l'account del tenant per sviluppatori di Microsoft 365. Aggiungere eventi di esempio il 9, 10 e 11 marzo 2022 nel calendario.

  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. Se il file index.html aperto all'avvio di Live Server, verrà aperto http://localhost:3000/Index.htmlil browser . Assicurarsi di modificare l'URL http://localhost:3000in , prima di accedere con l'account per sviluppatori di Microsoft 365. Se non si aggiorna l'URL, verrà visualizzato l'errore seguente.

    The redirect URI 'http://localhost:3000/Index.html' specified in the request does not match the redirect URIs configured for the application <Your client ID>. Make sure the redirect URI sent in the request matches one added to your application in the Azure portal. Navigate to https://aka.ms/redirectUriMismatchError to learn more about how to fix this.

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

  5. I successivi tre giorni di eventi del calendario verranno visualizzati e raggruppati per giorno, a partire dal 9 marzo 2021.

Comportamento del componente Agenda di Microsoft Graph Toolkit con gli attributi.