Ändern der Darstellung von Daten mithilfe von Vorlagen

Abgeschlossen

Das Microsoft Graph-Toolkit bietet Unterstützung für die Erstellung von benutzerdefinierten Vorlagen, mit denen Sie ändern können, wie die Daten durch Komponenten angezeigt werden.

Angenommen, Sie planen die Erstellung einer Webanwendung, die dem angemeldeten Benutzer anstehende Ereignisse anzeigt. Anstatt für dieses Projekt die Microsoft Graph-Toolkit-Standardkomponente „Anmelden“ zu verwenden, wollen Sie die Angemeldet-Schaltfläche anpassen, die das Profil des Benutzers anzeigt.

Sie können die Vorlagen der Anmelde-Komponente verwenden, um auf einfache Weise die Darstellung des Profils des angemeldeten Benutzers zu ändern. Sie können auch die spezifischen Daten auswählen, die angezeigt werden sollen, z. B. den Anzeigenamen, den Vornamen, die Berufsbezeichnung, die E-Mail oder die Telefonnummer des Benutzers.

Um den Microsoft Graph-Toolkit-Komponenten Vorlagen hinzuzufügen, können Sie das HTML-Element <template> verwenden. Sie können beispielsweise der Anmelde-Komponente Vorlagen hinzufügen.

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

Definieren eines Teils der Komponente, die Sie als Vorlage verwenden möchten

Für jede Komponente stehen mehrere Datenteile als Vorlage zur Verfügung. Sie können den Teil, den Sie als Vorlage verwenden möchten, über das Attribut data-type im Element <template> definieren. Wenn Sie z. B. den Teil der Angemeldet-Schaltfläche in der Komponente „Anmelden“ als Vorlage verwenden wollen, fügen Sie ein data-type-Attribut mit einem Wert von signed-in-button-content hinzu.

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

Auswählen der Daten, die an eine Vorlage gebunden werden sollen

Die Vorlagen für Microsoft Graph-Toolkitkomponenten helfen Ihnen, einen bestimmten Datenkontext in Ihrer App auszuwählen und anzuzeigen. Nachdem Sie jetzt signed-in-button-content als Datentypwert auf der Vorlage definiert haben, gehen wird davon aus, dass Sie den Vornamen des Benutzers auf der Angemeldet-Schaltfläche anzeigen wollen.

Die Anmelde-Komponente übergibt zur Laufzeit ein {personDetails}-Objekt an die Komponente. Das {personDetails}-Objekt liefert alle Details über den Benutzer. Sie können das {personDetails}-Objekt in der Vorlage verwenden, um beliebige von Ihnen gewünschte Benutzerdaten anzuzeigen. Um z. B. den Vornamen des Benutzers anzuzeigen, fügen Sie {personDetails.givenName} zur Vorlage hinzu.

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

Tipp

Um zu sehen, welche Daten in der Vorlage verfügbar sind, geben Sie {{ this }} ein. Dieser Schritt zeigt Ihnen das gesamte an die Vorlage gebundene Objekt an. Wenn der {personDetails.givenName} Wert ist Waldek, sieht der Schaltflächeninhalt wie im folgenden Beispiel aus.

In der nächsten Übung lernen Sie, wie Sie Vorlagen mit Microsoft Graph-Toolkitkomponenten verwenden, um die Darstellung von Daten zu ändern.

Weiter