Microsoft Graph Toolkit の Planner コンポーネント
Planner コンポーネントを使用すると、ユーザーは Microsoft Planner からタスクを表示、追加、削除、完了、または編集できます。
さらに、ユーザーは 1 人または複数の Microsoft Graph ユーザーを 1 つのタスクに割り当てることができます。 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;
/** 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: Planner タスク オブジェクト | は、既定のタスク全体を置き換えます。 |
| task-details | task: Planner タスク オブジェクト | テンプレートは、タスクの詳細セクションを置き換えます。 |
次の例では、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 ごとに、ユーザーには、一覧表示されているアクセス許可の少なくとも 1 つが必要です。
| 構成 | アクセス許可 | API |
|---|---|---|
| すべての構成で | User.Read、User.ReadWrite | /me |
| 既定の動作 | 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 |
| タスクの作成、更新、または削除 | Group.ReadWrite, Group.Readwrite.All | POST /planner/tasks, PATCH /planner/tasks/${taskId}, DELETE /planner/tasks/${taskId} |
サブコンポーネント
コンポーネントは mgt-tasks 1 つ以上のサブコンポーネントで構成され、前に一覧に示した権限以外のアクセス許可が必要な場合があります。 詳細については、各サブコンポーネントのドキュメントを参照してください。
認証
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 |