练习 - 通过使用属性更改组件的行为

  • 2 分钟

在本练习中，你将了解如何将特性与 Microsoft Graph Toolkit 组件配合使用，以自定义应用程序中的组件输出。

准备工作

作为本练习的先决条件,完成以下步骤。

1.配置 Microsoft Entra 应用

对于本模块，你需要具有以下设置的应用程序：

  • 名称： 我的应用
  • 平台： 单页应用程序 (SPA)
  • 支持的帐户类型：任何组织目录中的帐户 (任何 Microsoft Entra 目录 - 多租户) 和个人 Microsoft 帐户 (，例如 Skype、Xbox)
  • 重定向 URI：http://localhost:3000

若要创建此应用程序，请执行以下步骤：

  1. 在浏览器中，转到 Microsoft Entra 管理中心，登录，然后转到 Microsoft Entra ID。

  2. 在左窗格中选择应用注册，然后选择新建注册。

    显示选择

  3. 在“注册应用”屏幕中，输入以下值：

    • 名称：输入应用程序的名称。
    • 支持的帐户类型：选择 任何组织目录中的帐户 (任何 Microsoft Entra 目录 - 多租户) 和个人 Microsoft 帐户 (，例如 Skype、Xbox) 。
    • 重定向 URI (可选)：选择“单页应用程序 (SPA)”，然后输入http://localhost:3000。
    • 选择“注册”。

    显示在 Microsoft Entra ID 中注册应用程序的屏幕截图。

2. 设置环境

  1. 在桌面上创建名为 customize-mgt 的文件夹。

  2. 在 Visual Studio Code 中打开 customize-mgt 文件夹。

  3. 在 Visual Studio Code 中，在 customize-mgt 文件夹中创建名为 index.html 的文件。

  4. 将以下代码复制到 index.html。 将 替换为 YOUR-CLIENT-ID 之前创建的 Microsoft Entra 应用中复制 的应用程序 (客户端) ID 。

    <!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
}

使用属性更改“议程”组件的行为

“议程”组件有多种不同的可用属性。 我们来看看几个属性，了解如何使用它们来更改“议程”组件的行为：

  • date 属性可用于定义事件的开始日期。

  • days 属性可用于显示特定天数的事件列表。

  • group-by-day 属性可用于列出相关日期和显示日期下的事件。

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

将这些属性添加到 index.html 中的现有的 mgt-agenda 组件。 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 开发人员租户帐户登录。 在日历中添加 2022 年 3 月 9 日、10 日和 11 日的示例事件。

  2. 在 Visual Studio Code 中，选择以下 Visual Studio Code 中的组合键，然后搜索 Live Server：

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

    运行 Live Server 以测试应用。

  3. 打开浏览器并转到 http://localhost:3000。 如果在启动 Live Server 时 index.html 打开该文件，浏览器将打开 http://localhost:3000/Index.html。 在使用 Microsoft 365 开发人员帐户登录之前，请确保将 URL http://localhost:3000更改为 。 如果不更新 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. 从 2021 年 3 月 9 日开始，接下来三天的日历事件将按天显示和分组。

Microsoft Graph Toolkit 议程组件行为和特性。