Изменение представления данных с помощью шаблонов

  • 5 мин

Microsoft Graph Toolkit поддерживает создание настраиваемых шаблонов, которые могут изменять способ отображения данных компонентами.

Предположим, вы планируете создать веб-приложение, которое будет показывать предстоящие события пользователю, вошедшему в систему. Для этого проекта вместо использования компонента входа Microsoft Graph Toolkit по умолчанию необходимо изменить кнопку входа, которая отображает профиль пользователя.

Вы можете использовать шаблон компонента входа, чтобы легко изменить представление профиля пользователя, вошедшего в систему. Вы также можете выбрать определенную информацию для показа, например отображаемое имя пользователя, заданное имя, должность, почту или номер телефона.

Чтобы добавить шаблон в компоненты Microsoft Graph Toolkit, можно использовать элемент HTML <template>. Например, можно добавить шаблон к компоненту входа.

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

Определение части компонента, для которой нужен шаблон

Для шаблона каждого компонента доступны несколько частей данных. Вы можете определить часть для шаблона с помощью атрибута data-type элемента <template>. Например, если вы хотите с помощью шаблона добавить часть кнопки входа в компонент входа, добавьте атрибут data-type со значением signed-in-button-content.

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

Выбор данных для привязки к шаблону

Шаблоны для компонентов Microsoft Graph Toolkit помогают выбрать и отобразить определенный контекст данных в приложении. Теперь, когда вы определили signed-in-button-content как значение типа данных шаблона, предположим, что вы хотите отобразить имя пользователя на кнопке после входа.

Компонент входа передает объект {personDetails} компоненту в среде выполнения. Объект {personDetails} предоставляет все сведения о пользователе. Объект {personDetails} шаблона можно использовать для отображения любых пользовательских данных. Например, чтобы отобразить заданное имя пользователя, добавьте {personDetails.givenName} в шаблон.

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

Совет

Для просмотра доступных данных в шаблоне введите {{ this }}. На этом шаге показан весь объект, привязанный к шаблону. {personDetails.givenName} Если значение равно Waldek, содержимое кнопки выглядит так, как показано в следующем примере.

Снимок экрана: компоненты Microsoft Graph Toolkit с шаблонами.

В следующем упражнении вы узнаете, как использовать шаблоны с компонентами Microsoft Graph Toolkit для изменения представления данных.