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