Microsoft Graph 工具包中的 Planner 组件

项目
11/07/2024

Planner 组件使用户能够查看、添加、删除、完成或编辑 Microsoft Planner 中的任务。

此外，用户还可以将一个或多个Microsoft Graph 用户分配给任务。有关Microsoft Graph 分配的详细信息，请参阅 plannerAssignments。

重要

随着版本 4 的 @microsoft/mgt-components 发布，planner 组件将替换旧的任务组件，并且不再支持使用 Outlook 任务作为数据源。

示例

以下示例使用组件显示已登录用户的 Microsoft Planner 任务 mgt-planner 。可以使用代码编辑器来查看属性如何更改组件的行为。

HTML
React

在 mgt.dev 中打开此示例。

属性

属性	属性	说明
只读	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	一个可选函数，用于筛选向用户显示的任务。

以下示例仅显示来自 Planner 且 ID 为 12345 的任务，不允许用户创建新任务。

<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;
  
  /** affects the options menu */
  --dot-options-menu-background-color: yellow;
  --dot-options-menu-shadow-color: yellow;
  --dot-options-menu-item-color: maroon;
  --dot-options-menu-item-hover-background-color: white;
}

若要了解详细信息，请参阅设置组件样式。

事件

事件	何时发出	自定义数据	可取消	泡沫	使用自定义模板
`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`

通过

Microsoft Graph 工具包中的 Planner 组件

示例

属性

自定义 CSS 变量

事件

模板

Microsoft Graph 权限

子组件

身份验证

缓存

本地化

反馈

其他资源