Упражнение — устранение неполадок отрисовки

8 мин

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

Подготовка веб-приложения

В Visual Studio Code откройте файл index.html.
Выполните сброс его содержимого, чтобы получить приведенный ниже код HTML. Вы замените YOUR-CLIENT-IDидентификатором приложения (клиента) из приложения Microsoft Entra, зарегистрированного в предыдущем модуле Настройка и стиль компонентов Microsoft Graph Toolkit с помощью атрибутов и CSS:
```
<html>
  <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 days="3" group-by-day></mgt-agenda>
  </body>
</html>
```
Убедитесь, что веб-приложение работает надлежащим образом. В Visual Studio Code запустите Live Server, чтобы протестировать приложение. В браузере перейдите по адресу http://localhost:3000. Должен появиться список событий.

Отладка шаблона компонента

Теперь, когда мы убедились, что веб-приложение работает, давайте настроим отображение событий в компоненте Повестка дня.

Чтобы в компоненте Повестка дня отображались только названия событий, добавьте в шаблон приведенный ниже код.
```
<mgt-agenda days="3" group-by-day>
  <template>{{ event.title }}</template>
</mgt-agenda>
```
Компонент Повестка дня сейчас ничего не отображает. Давайте исправим это.
Так как нам нужно изменить метод отрисовки событий, воспользуемся шаблоном event, указав атрибут data-type.
```
<mgt-agenda days="3" group-by-day>
  <template data-type="event">{{ event.title }}</template>
</mgt-agenda>
```
Вы увидите список дней, но в компоненте по-прежнему не отображаются названия событий. Давайте посмотрим, какие данные доступны в шаблоне, изменив его.
```
<mgt-agenda days="3" group-by-day>
  <template data-type="event">{{ console.log(this) }}</template>
</mgt-agenda>
```
Изучив данные в консоли средств разработки в браузере, вы увидите, что название события хранится в свойстве subject.
Обновите шаблон так, чтобы он ссылался на свойство subject, а не title.
```
<mgt-agenda days="3" group-by-day>
  <template data-type="event">{{ event.subject }}</template>
</mgt-agenda>
```
Теперь должны отображаться названия всех событий.

Давайте изменим цвет шрифта в веб-приложении.

В Visual Studio Code откройте файл index.html. Измените глобальный цвет шрифта в веб-приложении, добавив приведенный ниже элемент style в раздел head.
```
<style>
  body {
    color: blue;
  }
</style>
```
Добавьте в основной текст приветствие для пользователя.
```
<h1>Hello</h1>
```

Удалите из компонента mgt-agenda пользовательский шаблон, добавленный в предыдущем упражнении. Полный HTML-код веб-приложения должен выглядеть так, как показано в этом примере.

<html>
    <head>
      <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
      <style>
        body {
          color: blue;
        }
      </style>
    </head>

    <body>
      <h1>Hello</h1>
      <mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>
      <mgt-login></mgt-login>
      <mgt-agenda days="3" group-by-day></mgt-agenda>
    </body>
</html>

В Visual Studio Code запустите Live Server, чтобы протестировать приложение. В браузере перейдите по адресу http://localhost:3000. Должен появиться список событий.

В списке событий не используется выбранный цвет шрифта. Давайте исправим это.
В Visual Studio Code расширьте определение style, добавив пользовательские свойства CSS для применения стилей к событиям.
```
<style>
  body {
    color: blue;
  }
  mgt-agenda {
    --agenda-header-color: blue;
    --agenda-event-time-color: blue;
    --agenda-event-subject-color: blue;
  }
</style>
```
В Visual Studio Code запустите Live Server, чтобы протестировать приложение. В браузере перейдите по адресу http://localhost:3000. Должен появиться список событий с использованием цвета шрифта вашего веб-приложения.

Упражнение — устранение неполадок отрисовки

Подготовка веб-приложения

Отладка шаблона компонента

Обратная связь