Modificare la presentazione dei dati con i modelli

Completato

Microsoft Graph Toolkit offre supporto per la creazione di modelli personalizzati che possono cambiare la modalità di visualizzazione dei dati da parte dei componenti.

Supponiamo di pianificare la creazione di un'applicazione Web che mostri gli eventi imminenti all'utente connesso. Per questo progetto, anziché usare l'esperienza predefinita del componente di accesso di Microsoft Graph Toolkit, si vuole modificare il pulsante di accesso che mostra il profilo dell'utente.

È possibile usare la creazione di modelli del componente di accesso per cambiare facilmente la presentazione del profilo dell'utente connesso. È inoltre possibile scegliere i dati specifici da visualizzare, ad esempio il nome visualizzato dell'utente, il nome specificato, la posizione, l'e-mail o il numero di telefono.

Per aggiungere la creazione di modelli ai componenti di Microsoft Graph Toolkit, è possibile usare l'elemento HTML <template>. Ad esempio, è possibile aggiungere la creazione di modelli al componente di accesso.

<mgt-login>
  <template>
  </template>
</mgt-login>

Definizione di una parte del componente da creare come modello

Per ogni componente sono disponibili più parti di dati. È possibile definire la parte da creare come modello usando l'attributo data-type nell'elemento <template>. Ad esempio, se si vuole creare come modello la parte del pulsante nel componente di accesso, aggiungere un attributo data-type con il valore signed-in-button-content.

<mgt-login>
  <template data-type="signed-in-button-content">
  </template>
</mgt-login>

Selezione dei dati da associare al modello

I modelli per i componenti di Microsoft Graph Toolkit permettono di selezionare e visualizzare nell'app il contesto dei dati specifico. Una volta definito signed-in-button-content come valore del tipo di dati del modello, supponiamo di voler visualizzare il nome dell'utente nel pulsante di accesso.

Il componente di accesso passa un oggetto {personDetails} al componente in fase di esecuzione. L'oggetto {personDetails} fornisce tutti i dettagli sull'utente. È possibile usare l'oggetto {personDetails} nel modello per visualizzare i dati utente desiderati. Ad esempio, per visualizzare il nome specificato dell'utente, aggiungere {personDetails.givenName} nel modello.

<mgt-login>
  <template data-type="signed-in-button-content">
    <div>{{personDetails.givenName}}</div>
  </template>
</mgt-login>

Consiglio

Per visualizzare i dati disponibili nel modello, immettere {{ this }}. Questo passaggio mostra l'intero oggetto associato al modello. Se il {personDetails.givenName} valore è Waldek, il contenuto del pulsante sarà simile all'esempio seguente.

Nell'esercizio successivo sarà illustrato come usare i modelli con i componenti di Microsoft Graph Toolkit per modificare la presentazione dei dati.