Modifier la présentation des données à l’aide de modèles

  • 5 minutes

Le Kit de ressources Microsoft Graph fournit une assistance pour la création de modèles personnalisés qui peuvent modifier l’affichage des données par composants.

Supposons que vous envisagez de créer une application web pour afficher les événements à venir sur le système de l’utilisateur connecté. Pour ce projet, au lieu d’utiliser l’expérience du composant Login du Kit de ressources Microsoft Graph par défaut, vous voulez modifier le bouton de connexion qui affiche le profil de l’utilisateur.

Vous pouvez utiliser de la création de modèles du composant Login pour modifier facilement la présentation du profil de l’utilisateur connecté. Vous pouvez également choisir les données spécifiques à afficher, telles que le nom complet, le prénom, la fonction, l’e-mail ou le numéro de téléphone de l’utilisateur.

Pour ajouter la création de modèles aux composants du Kit de ressources Microsoft Graph, vous pouvez utiliser l’élément HTML <template>. Par exemple, vous pouvez ajouter la création de modèles au composant Login.

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

Définir une partie du composant à modéliser

Plusieurs parties de données sont disponibles pour modèle pour chaque composant. Vous pouvez définir la partie que vous voulez modéliser à l’aide de l’attribut data-type sur l’élément <template>. Par exemple, si vous voulez modéliser la partie du bouton connexion dans le composant Login, ajoutez un attribut data-type avec une valeur de signed-in-button-content.

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

Sélectionnez les données à lier à un modèle

Les modèles des composants du Kit de ressources Microsoft Graph vous permettent de sélectionner, puis d’afficher un contexte de données spécifique dans votre application. À présent que vous avez défini signed-in-button-content comme valeur du type de données du modèle, supposons que vous vouliez afficher le prénom de l’utilisateur dans le bouton de connexion.

Le composant Login transmet un objet {personDetails} au composant au moment de l’exécution. L’objet {personDetails} fournit tous les détails sur l’utilisateur. Vous pouvez utiliser l’objet {personDetails} dans le modèle pour afficher toutes les données utilisateur souhaitées. Par exemple, pour afficher le prénom de l’utilisateur, ajoutez {personDetails.givenName} dans le modèle.

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

Conseil

Pour consulter les données disponibles dans le modèle, entrez {{ this }}. Cette étape affiche ainsi tout l’objet lié au modèle. Si la {personDetails.givenName} valeur est Waldek, le contenu du bouton ressemble à l’exemple suivant.

Capture d’écran représentant des composants du Kit de ressources Microsoft Graph avec des modèles.

Au cours de l’exercice suivant, vous allez découvrir comment utiliser des modèles avec les composants du Kit de ressources Microsoft Graph pour modifier la présentation des données.