Microsoft Graph 工具包中的Planner组件
Planner 组件使用户能够查看、添加、删除、完成或编辑Microsoft Planner任务。
此外，用户还可以向任务分配一个或多个 Microsoft Graph 用户。 有关 Microsoft Graph 分配的详细信息，请参阅 plannerAssignments。
重要
随着版本 4 的 @microsoft/mgt-components 发布，planner 组件将替换旧的任务组件，并且不再支持使用 Outlook 任务作为数据源。
示例
以下示例使用 组件显示已登录用户的Microsoft Planner任务mgt-planner。 可以使用代码编辑器来查看 属性 如何更改组件的行为。
属性
| 属性 | 属性 | 说明 |
|---|---|---|
| 只读 | readOnly | 一个布尔值，用于将任务接口设置为只读 (不添加或删除任务) 。 默认值为“false”。 |
| hide-header | hideHeader | 一个布尔值，用于显示或隐藏组件的标头。 默认值为“false”。 |
| hide-options | hideOptions | 一个布尔值，用于显示或隐藏任务中的选项。 默认值为“false”。 |
| initial-id=“planner_id/folder_id” | initialId | 用于将最初显示的计划设置为提供的 ID 的字符串 ID。 |
| initial-bucket-id=“bucket_id” | initialBucketId | 一个字符串 ID，用于将最初显示的存储桶设置为提供的 ID。 |
| target-id=“planner_id/folder_id” | targetId | 用于将任务接口锁定为提供的计划 ID 的字符串 ID。 |
| target-bucket-id=“bucket_id” | targetBucketId | 用于将任务接口锁定为提供的存储桶 ID 的字符串 ID。 |
| group-id | groupId | 用于将任务接口锁定为组 ID 的字符串 ID。 |
| - | isNewTaskVisible | 确定新的任务视图在呈现时是否可见。 |
| - | taskFilter | 一个可选函数，用于筛选向用户显示的任务。 |
以下示例仅显示 ID 为 12345 的Planner任务，不允许用户创建新任务。
<mgt-planner read-only initial-id="12345"></mgt-planner>
以下示例演示如何筛选仅设置了 category3 的任务。
let taskView = document.querySelector("mgt-planner");
taskView.taskFilter = (task) => task.appliedCategories.category3 === true;
自定义 CSS 变量
<mgt-planner class="tasks"></mgt-planner>
.tasks {
--tasks-header-padding: 28px 14px;
--tasks-header-margin: 0 14px;
--tasks-header-font-size: large;
--tasks-header-font-weight: 800;
--tasks-header-text-color: blue;
--tasks-header-text-hover-color: gray;
--tasks-new-button-width: 300px;
--tasks-new-button-height: 50px;
--tasks-new-button-text-color: orange;
--tasks-new-button-text-font-weight: 400;
--tasks-new-button-background: black;
--tasks-new-button-border: 2px dotted golden;
--tasks-new-button-background-hover: gray;
--tasks-new-button-background-active: red;
--task-add-new-button-width: 60px;
--task-add-new-button-height: 35px;
--task-add-new-button-text-color: orange;
--task-add-new-button-text-font-weight: 400;
--task-add-new-button-background: black;
--task-add-new-button-border: 2px dotted white;
--task-add-new-button-background-hover: gray;
--task-add-new-button-background-active: red;
--task-cancel-new-button-width: 60px;
--task-cancel-new-button-height: 35px;
--task-cancel-new-button-text-color: yellow;
--task-cancel-new-button-text-font-weight: 400;
--task-cancel-new-button-background: red;
--task-cancel-new-button-border: 2px dashed white;
--task-cancel-new-button-background-hover: brown;
--task-cancel-new-button-background-active: red;
--task-complete-checkbox-background-color: red;
--task-complete-checkbox-text-color: yellow;
--task-incomplete-checkbox-background-color: orange;
--task-incomplete-checkbox-background-hover-color: yellow;
--task-title-text-font-size: large;
--task-title-text-font-weight: 500;
--task-complete-title-text-color: green;
--task-incomplete-title-text-color: purple;
--task-icons-width: 32px;
--task-icons-height: 32px;
--task-icons-background-color: purple;
--task-icons-text-font-color: black;
--task-icons-text-font-size: 16px;
--task-icons-text-font-weight: 400;
--task-complete-background-color: powderblue;
--task-incomplete-background-color: salmon;
--task-complete-border: 2px dashed green;
--task-incomplete-border: 2px double red;
--task-complete-border-radius: 8px;
--task-incomplete-border-radius: 12px;
--task-complete-padding: 8px;
--task-incomplete-padding: 12px;
--tasks-gap: 8px;
--tasks-background-color: violet;
--tasks-border: 2px dashed green;
--tasks-border-radius: 12px;
--tasks-padding: 16px;
/** affects the date picker and the text-input field **/
--task-new-input-border: 2px solid green;
--task-new-input-border-radius: 8px;
--task-new-input-background-color: yellow;
--task-new-input-hover-background-color: yellowgreen;
--task-new-input-placeholder-color: black;
/** affects the date picker and the text-input field **/
--task-new-dropdown-border: 2px solid green;
--task-new-dropdown-border-radius: 8px;
--task-new-dropdown-background-color: yellow;
--task-new-dropdown-hover-background-color: yellowgreen;
--task-new-dropdown-placeholder-color: red;
--task-new-dropdown-option-text-color: blue;
--task-new-dropdown-list-background-color: yellow;
--task-new-dropdown-option-hover-background-color: yellowgreen;
--task-new-person-icon-text-color: blue;
--task-new-person-icon-color: blue;
}
若要了解详细信息，请参阅 设置组件样式。
事件
| 事件 | 何时发出 | 自定义数据 | 可取消 | 泡沫 | 使用自定义模板 |
|---|---|---|---|---|---|
taskAdded |
创建新任务时触发 | 新创建的 plannerTask | 否 | 否 | 是 |
taskChanged |
更改任务元数据（例如标记为已完成）时触发 | 更新了 plannerTask | 否 | 否 | 否 |
taskClick |
当用户选择任务时触发 | task 具有所选 plannerTask 的属性 |
否 | 否 | 否 |
taskRemoved |
删除现有任务时触发 | task 具有所选 plannerTask 的属性 |
否 | 否 | 否 |
有关处理事件的详细信息，请参阅 事件。
模板
组件 planner 支持多个 模板 ，可用于替换组件的某些部分。 若要指定模板，请在组件中包含元素 <template> ， data-type 并将 属性设置为以下值之一：
| 数据类型 | 数据上下文 | 说明 |
|---|---|---|
| task | 任务：规划器任务对象 | 替换整个默认任务。 |
| task-details | 任务：规划器任务对象 | template 替换任务的详细信息部分。 |
以下示例定义 planner 组件的模板。
<mgt-planner>
<template data-type="task-details">
<div>Owner: {{task.owner}}</div>
<div>Importance Level: {{task.importance}}</div>
</template>
</mgt-planner>
Microsoft Graph 权限
此控件使用以下 Microsoft Graph API 和权限。 对于每个名为 的 API，用户必须至少具有列出的权限之一。
| 配置 | 权限 | API |
|---|---|---|
| 在所有配置中 | User.Read、User.ReadWrite | /我 |
| 默认行为 | Tasks.Read、Group.Read.All、Tasks.ReadWrite、Group.ReadWrite.All | /me/planner/plans、 /planner/plans/${planId}/buckets、 /planner/buckets/${bucketId}/tasks |
groupId 设置 |
Tasks.Read、Group.Read.All、Tasks.ReadWrite、Group.ReadWrite.All | /groups/${group-id}/planner/plans， /planner/plans/${planId}/buckets， /planner/buckets/${bucketId}/tasks |
targetId 设置 |
Tasks.Read、Group.Read.All、Tasks.ReadWrite、Group.ReadWrite.All | /planner/plans/${planId}， /planner/plans/${planId}/buckets， /planner/buckets/${bucketId}/tasks |
| 创建、更新或删除任务 | Tasks.ReadWrite，Group.ReadWrite.All | POST /planner/tasks、 PATCH /planner/tasks/${taskId}、 DELETE /planner/tasks/${taskId} |
子组件
组件 mgt-tasks 由一个或多个子组件组成，这些子组件可能需要除前面列出的权限以外的其他权限。 有关详细信息，请参阅每个子组件的文档：
身份验证
任务组件使用身份验证文档中所述的全局 身份验证提供程序。
缓存
组件 mgt-tasks 不缓存任何数据。
本地化
控件公开以下可本地化的变量。 有关本地化的详细信息，请参阅 本地化组件。
| 字符串名称 | 默认值 |
|---|---|
| removeTaskSubtitle | Delete Task |
| cancelNewTaskSubtitle | Cancel |
| newTaskPlaceholder | Adding a task... |
| addTaskButtonSubtitle | Add |
| 由于 | Due |
| addTaskDate | Add the task date |
| 分配 | Assign |
| planNotFound | Plan not found |
| plansSelfAssigned | All Plans |
| bucketNotFound | Bucket not found |
| bucketsSelfAssigned | All Tasks |
| baseSelfAssigned | Assigned to Me |
反馈
即将发布：在整个 2024 年，我们将逐步淘汰作为内容反馈机制的“GitHub 问题”，并将其取代为新的反馈系统。 有关详细信息，请参阅：https://aka.ms/ContentUserFeedback。
提交和查看相关反馈