Microsoft Graph ツールキットの Tasks コンポーネントTasks component in the Microsoft Graph Toolkit

タスクコンポーネントを使用すると、ユーザーはタスクの表示、追加、削除、完了、または編集を行うことができます。The Tasks component enables the user to view, add, remove, complete, or edit tasks. Microsoft Planner または Microsoft のタスクで機能します。It works with tasks in Microsoft Planner or Microsoft To-Do.

さらに、ユーザーは1つまたは複数の Microsoft Graph ユーザーをタスクに割り当てることができます。In addition, a user is able to assign a single or multiple Microsoft Graph users to a task. Microsoft Graph の割り当ての詳細については、「 plan の割り当て」を参照してください。For more details about Microsoft Graph assignments, see plannerAssignments.

Example

次の例では、サインインしているユーザーの Microsoft Planner タスクをコンポーネントを使用して表示し mgt-tasks ます。The following example displays the signed-in user's Microsoft Planner tasks using the mgt-tasks component. コードエディターを使用すると、 プロパティ がコンポーネントの動作を変更する方法を確認できます。You can use the code editor to see how properties change the behavior of the component.

この例は、次のようにしてください。Open this example in mgt.dev

プロパティProperties

属性Attribute プロパティProperty 説明Description
データソース = "todo/planner"data-source="todo/planner" データdataSource タスクのデータソースを構成するための列挙。 Microsoft To Do または Microsoft Planner のいずれかです。An enumeration to configure the data source for tasks - either Microsoft To-Do, or Microsoft Planner. 既定値は planner です。Default is planner.
読み取り専用read-only 該当readOnly タスクのインターフェイスを読み取り専用に設定するブール値 (タスクを追加または削除しない)。A Boolean to set the task interface to be read only (no adding or removing tasks). 既定値は false です。Default is false.
ヘッダーを表示しないhide-header hideHeaderhideHeader コンポーネントのヘッダーを表示または非表示にするブール値。A Boolean to show or hide the header of the component. 既定値は false です。Default is false.
非表示オプションhide-options hideOptionshideOptions タスクのオプションを表示または非表示にするブール値。A Boolean to show or hide the options in tasks. 既定値は false です。Default is false.
最初の id = "planner_id/folder_id"initial-id="planner_id/folder_id" initialIdinitialId 最初に表示されたプランナーまたはフォルダーを、指定された ID に設定する文字列 ID。A string ID to set the initially displayed planner or folder to the provided ID.
最初のバケット id = "bucket_id"initial-bucket-id="bucket_id" initialBucketIdinitialBucketId 最初に表示されるバケット (Planner データソースのみ) を指定した ID に設定する文字列 ID。A string ID to set the initially displayed bucket (Planner Data-Source Only) to the provided ID.
ターゲット id = "planner_id/folder_id"target-id="planner_id/folder_id" targetIdtargetId タスクのインターフェイスを、指定されたプランナーまたはフォルダー ID にロックする文字列 ID。A string ID to lock the tasks interface to the provided planner or folder ID.
ターゲット-バケット id = "bucket_id"target-bucket-id="bucket_id" targetBucketIdtargetBucketId タスクインターフェイスを指定されたバケット ID にロックする文字列 ID (Planner データソースのみ)。A string ID to lock the tasks interface to the provided bucket ID (Planner Data-Source Only).
グループ idgroup-id groupIdgroupId タスクインターフェイスをグループ ID にロックする文字列 ID (Planner データソースのみ)。A string ID to lock the tasks interface to the group ID (Planner Data-Source Only).
N/AN/A isNewTaskVisibleisNewTaskVisible 新しいタスクビューがレンダリングで表示されるかどうかを指定します。Determines whether new task view is visible at render.
N/AN/A taskFiltertaskFilter ユーザーに表示するタスクをフィルター処理するためのオプションの関数。An optional function to filter which tasks are shown to the user.

次の例は、ID 12345 の Planner からのタスクのみを表示し、ユーザーが新しいタスクを作成することを許可しません。The following example shows only tasks from Planner with ID 12345 and does not allow the user to create new tasks.

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

次の例は、 category3 が設定されているタスクをフィルター処理する方法を示しています。The following example shows how to filter tasks that only have category3 set.

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

カスタム CSS 変数Custom CSS variables

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
}

イベントEvents

イベントEvent 詳細Detail 説明Description
taskClicktaskClick 詳細には、それぞれのオブジェクトが含まれています。 taskThe detail contains the respective task object ユーザーがタスクをクリックまたはタップしたときに発生します。Fired when the user clicks or taps on a task.

テンプレートTemplates

コンポーネントは、 tasks コンポーネントの特定の部分を置き換えることができるいくつかの テンプレート をサポートしています。The tasks component supports several templates that allow you to replace certain parts of the component. テンプレートを指定するには、 <template> コンポーネント内に要素を含め、 data-type 値を次のいずれかに設定します。To specify a template, include a <template> element inside a component and set the data-type value to one of the following:

データ型Data type データコンテキストData context 説明Description
タスクtask タスク: planner または to do のタスクオブジェクトtask: a planner or to-do task object 既定のタスク全体を置換します。replaces the whole default task.
タスク-詳細task-details タスク: planner または to do のタスクオブジェクトtask: a planner or to-do task object タスクの [詳細] セクションがテンプレートによって置き換えられます。template replaces the details section of the task.

次の例では、タスクコンポーネントのテンプレートを定義します。The following example defines a template for the tasks component.

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

Microsoft Graph のアクセス許可Microsoft Graph permissions

このコントロールでは、次の Microsoft Graph Api とアクセス許可を使用します。This control uses the following Microsoft Graph APIs and permissions.

ResourceResource アクセス許可Permission
プラン/プラン/me/planner/plans Group.Read.AllGroup.Read.All
/planner/plans/$ {id}/planner/plans/${id} Group.Read.All、Group.ReadWrite.AllGroup.Read.All, Group.ReadWrite.All
/プラン/planner/tasks Group.ReadWrite.AllGroup.ReadWrite.All
/Me/Outlook/taskgroups/me/outlook/taskGroups Tasks.ReadTasks.Read
/Me/Outlook/taskfolders/me/outlook/taskFolders タスク. 読み取り、タスクの読み取り/書き込みTasks.Read, Tasks.ReadWrite
/me/outlook/tasks/me/outlook/tasks Tasks.ReadWriteTasks.ReadWrite
/グループ/$ {group-id}/プラン/groups/${group-id}/planner/plans Group.Read.All、Group.ReadWrite.AllGroup.Read.All, Group.ReadWrite.All

Microsoft Planner データソースの場合、フェッチおよび読み取りタスクには、グループの読み取り権限が必要です。For the Microsoft Planner data source, fetching and reading tasks requires the Groups.Read.All permission. タスクを追加、更新、または削除するには、すべてのアクセス許可が必要です。Adding, updating, or removing tasks requires the Groups.ReadWrite.All permission.

Microsoft Todo データソースの場合は、タスクを取得および読み取りするための読み取りアクセス許可が必要です。For the Microsoft Todo data source, the Tasks.Read permission is required for fetching and reading tasks. タスクを追加、更新、または削除するには、タスクの読み取りアクセス許可が必要です。Adding, updating, or removing tasks requires the Tasks.ReadWrite permission.

認証Authentication

タスクコンポーネントは、 認証のドキュメントで説明されているグローバル認証プロバイダを使用します。The tasks component uses the global authentication provider described in the authentication documentation.