Microsoft Graph 工具包中的任务组件

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

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

示例

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

在 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	用于将最初显示的存储桶 (Planner Data-Source仅) 设置为提供的 ID 的字符串 ID。
target-id=“planner_id/folder_id”	targetId	用于将任务接口锁定为提供的规划器或文件夹 ID 的字符串 ID。
target-bucket-id=“bucket_id”	targetBucketId	一个字符串 ID，用于将任务接口锁定到提供的存储桶 ID (Planner Data-Source仅限) 。
group-id	groupId	用于将任务接口锁定为组 ID 的字符串 ID。
不适用	isNewTaskVisible	确定新的任务视图在呈现时是否可见。
不适用	taskFilter	一个可选函数，用于筛选向用户显示的任务。

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

<mgt-tasks read-only initial-id="12345"></mgt-tasks>

以下示例演示如何筛选仅设置了 category3 的任务。

let taskView = document.querySelector('mgt-tasks');
taskView.taskFilter = task => task.appliedCategories.category3 === true;

自定义 CSS 变量

mgt-tasks {
--tasks-header-padding
--tasks-header-margin 

--tasks-title-padding
--tasks-plan-title-font-size
--tasks-plan-title-padding

--tasks-new-button-width
--tasks-new-button-height
--tasks-new-button-color
--tasks-new-button-background
--tasks-new-button-border
--tasks-new-button-hover-background
--tasks-new-button-active-background

--tasks-new-task-name-margin

--task-margin
--task-box-shadow
--task-background
--task-border

--task-header-color
--task-header-margin

--task-detail-icon-margin

--task-new-margin
--task-new-border
--task-new-line-margin
--tasks-new-line-border
--task-new-input-margin
--task-new-input-padding
--task-new-input-font-size
--task-new-input-active-border
--task-new-select-border

--task-new-add-button-background
--task-new-add-button-disabled-background
--task-new-cancel-button-color

--task-complete-background
--task-complete-border
--task-complete-header-color
--task-complete-detail-color
--task-complete-detail-icon-color

--task-icon-background-completed
--task-icon-background

--task-icon-border-completed
--task-icon-border

--task-icon-color
--task-icon-color-completed

--task-icon-border-radius

--task-icon-alignment: flex-start (default) | center | flex-end
}

事件

Event	何时发出	自定义数据	可取消	泡沫	使用自定义模板
taskAdded	创建新任务时触发	新创建的任务，可以是 plannerTask 我们的 outlookTask	否	否	是
taskChanged	在更改任务元数据（例如标记为已完成）时触发	更新的任务，可以是 plannerTask 我们的 outlookTask	否	否	否
taskClick	当用户单击或点击任务时触发	task 属性与所选 plannerTask 我们的 outlookTask	否	否	否
taskRemoved	删除现有任务时触发	task 属性与所选 plannerTask 我们的 outlookTask	否	否	否

有关处理事件的详细信息，请参阅 事件。

模板

组件 tasks 支持多个 模板 ，可用于替换组件的某些部分。 若要指定模板，请在组件中包含元素 <template> ， data-type 并将值设置为以下值之一：

数据类型	数据上下文	说明
task	任务：规划器任务对象	替换整个默认任务。
task-details	任务：规划器任务对象	template 替换任务的详细信息部分。

以下示例为任务组件定义模板。

    <mgt-tasks>
      <template data-type="task-details">
        <div>
          Owner: {{task.owner}}
        </div>
        <div>
          Importance Level: {{task.importance}}
        </div>
      </template>
    </mgt-tasks>

Microsoft Graph 权限

此控件使用以下 Microsoft Graph API 和权限。

配置	权限	API
groupId将 设置为dataSourceTasksSource.planner	Group.Read.All	/groups/${group-id}/planner/plans， /planner/plans/${planId}/buckets， /planner/buckets/${bucketId}/tasks
targetId将 设置为dataSourceTasksSource.todo	Tasks.Read	/me/outlook/taskGroups、 /me/outlook/taskGroups/${groupId}/taskFolders、 /me/outlook/taskFolders/${folderId}/tasks
targetId 设置并 dataSource 设置为除 TasksSource.todo	Group.Read.All	/planner/plans/${planId}， /planner/plans/${planId}/buckets， /planner/buckets/${bucketId}/tasks
dataSource 设置为 TasksSource.planner	Group.Read.All	/me/planner/plans、 /planner/plans/${planId}/buckets、 /planner/buckets/${bucketId}/tasks
dataSource 设置为 TasksSource.todo	Tasks.Read	/me/outlook/taskGroups、 /me/outlook/taskGroups/${groupId}/taskFolders、 /me/outlook/taskFolders/${folderId}/tasks
addTasktrue设置为 ，并将 dataSource 设置为TasksSource.planner	Group.ReadWrite.All	/planner/tasks
addTasktrue设置为 ，并将 dataSource 设置为TasksSource.todo	Tasks.ReadWrite	/me/outlook/taskFolders/${parentFolderId}/tasks

对于Microsoft Planner数据源，提取和读取任务需要 Groups.Read.All 权限。 添加、更新或删除任务需要 Groups.ReadWrite.All 权限。

身份验证

任务组件使用身份验证文档中所述的全局 身份验证提供程序。

缓存

组件 mgt-tasks 不缓存任何数据。