Упражнение — изменение поведения компонентов с помощью атрибутов

  • 2 мин

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

Перед началом работы

Выполните следующие действия в качестве необходимых условий для этого упражнения.

1. Настройка приложения Microsoft Entra

Для этого модуля потребуется приложение со следующими параметрами.

  • Имя: My app
  • Платформа: одностраничное приложение (SPA)
  • Поддерживаемые типы учетных записей: учетные записи в любом каталоге организации (любой каталог Microsoft Entra — мультитенантный) и личные учетные записи Майкрософт (например, Skype, Xbox).
  • URI перенаправления: http://localhost:3000

Чтобы создать это приложение, выполните указанные ниже действия.

  1. В браузере перейдите к Центр администрирования Microsoft Entra, войдите в систему и перейдите в Microsoft Entra ID.

  2. В расположенной слева области выберите пункт Регистрация приложений и щелкните Новая регистрация.

    Снимок экрана, на котором выбран пункт

  3. На экране Регистрация приложения введите следующие значения:

    • Имя: введите имя вашего приложения.
    • Поддерживаемые типы учетных записей: выберите Учетные записи в любом каталоге организации (любой каталог Microsoft Entra — мультитенантный) и личные учетные записи Майкрософт (например, Skype, Xbox).
    • URI перенаправления (необязательно): выберите Одностраничное приложение (SPA) и введите http://localhost:3000.
    • Нажмите Зарегистрировать.

    Снимок экрана: регистрация приложения в Microsoft Entra ID.

2. Настройте свою среду

  1. На рабочем столе создайте папку customize-mgt.

  2. Откройте папку customize-mgt в Visual Studio Code.

  3. В Visual Studio Code в папке customize-mgt создайте файл index.html.

  4. Вставьте указанный ниже код в файл index.html. Замените YOUR-CLIENT-ID скопированным идентификатором приложения (клиента) из приложения Microsoft Entra, созданного ранее.

    <!DOCTYPE html>
<html lang="en">
  <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></mgt-agenda>
  </body>
</html>

  5. Добавьте папку с именем .vscode в корневую папку проекта.

  6. Добавьте файл с именем settings.json в папку .vscode. Скопируйте и вставьте следующий код в settings.json и сохраните файл.

    {
  "liveServer.settings.host": "localhost",
  "liveServer.settings.port": 3000
}

Изменение поведения компонента Agenda с помощью атрибутов

Для компонента Agenda доступно несколько различных атрибутов. Давайте рассмотрим несколько атрибутов и узнаем, как с их помощью можно изменить поведение компонента Agenda.

  • С помощью атрибута date можно задать дату начала для событий.

  • С помощью атрибута days можно отобразить список событий для определенного количества дней.

  • С помощью атрибута group-by-day можно отобразить события для связанного дня и отображаемой даты.

    <mgt-agenda
  date="June 27, 2023"
  days="3"
  group-by-day>
</mgt-agenda>

Добавьте эти атрибуты в существующий компонент mgt-agenda в файле index.html. Окончательная версия файла index.html будет выглядеть, как в этом примере:

<!DOCTYPE html>
<html lang="en">
  <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
        date="June 27, 2023"
        days="3"
        group-by-day>
    </mgt-agenda>

  </body>
</html>

Тестирование приложения в браузере

  1. Если вы впервые используете клиент Microsoft 365 для разработчиков, в календаре учетной записи этого клиента, возможно, не будет никаких событий. Прежде чем приступить к тестированию приложения, перейдите по адресу https://outlook.office.com/calendar и войдите в систему, используя свою учетную запись клиента Microsoft 365 для разработчиков. Добавьте примеры событий для дат 9, 10 и 11 марта 2022 г. в календарь.

  2. В Visual Studio Code нажмите указанные ниже клавиши и найдите Live Server.

    • Windows: CTRL+SHIFT+P
    • macOS: COMMAND+SHIFT+P

    Запустите Live Server, чтобы протестировать приложение.

  3. В браузере перейдите по адресу http://localhost:3000. Если файл index.html открыт при запуске Live Server, браузер откроет http://localhost:3000/Index.html. Обязательно измените URL-адрес на http://localhost:3000, прежде чем входить с помощью учетной записи разработчика Microsoft 365. Если не обновить URL-адрес, появится следующая ошибка.

    The redirect URI 'http://localhost:3000/Index.html' specified in the request does not match the redirect URIs configured for the application <Your client ID>. Make sure the redirect URI sent in the request matches one added to your application in the Azure portal. Navigate to https://aka.ms/redirectUriMismatchError to learn more about how to fix this.

  4. Войдите в систему, используя свою учетную запись разработчика Microsoft 365. Предоставьте необходимые разрешения и нажмите кнопку Принять.

  5. После этого будут отображены три дня событий календаря, начиная с 9 марта 2021 г. Они будут сгруппированы по дням.

Поведение компонента Agenda с атрибутами в Microsoft Graph Toolkit.