次の方法で共有

Microsoft Graph Toolkit でコンポーネントを実行するには

注意

Microsoft Graph Toolkit は非推奨です。 2025 年 9 月 1 日から、2026 年 8 月 28 日に完全な退職が予定されています。 開発者は、Web エクスペリエンスを構築するために、Microsoft Graph SDK またはその他のサポートされている Microsoft Graph ツールを使用して移行する必要があります。 詳細については、 非推奨のお知らせを参照してください。

To Do コンポーネントは、サインインしているユーザーが Microsoft Graph の To Do API を使用して、Microsoft To Do からタスクを表示、追加、削除、完了、または編集できるようにするために使用されます。

例

次の例では、 mgt-todo コンポーネントを使用してサインインしているユーザーの Microsoft To Do タスクを表示します。 コード エディターを使用して、プロパティ がコンポーネントの動作をどのように変更させるかを確認することができます。

プロパティ

次の属性とプロパティを使用して、コンポーネントをカスタマイズできます。

属性 プロパティ 説明
読み取り専用 readOnly タスク インターフェイスを読み取り専用に設定するブール値 (タスクの追加または削除なし)。 既定値は false です。
initial-id="folder_id" initialId 最初に表示されたフォルダーを指定された ID に設定する文字列 ID。
target-id="folder_id" targetId タスク インターフェイスを指定されたフォルダー ID にロックする文字列 ID。
該当なし isNewTaskVisible レンダー時に新しいタスク ビューを表示するかどうかを指定します。
該当なし taskFilter ユーザーに表示されるタスクをフィルター処理する省略可能な関数。

次の例では、ID が 12345 のフォルダーのタスクのみを示しており、ユーザーが新しいタスクを作成することはできません。

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

カスタム CSS 変数

mgt-todo コンポーネントは、以下の CSS カスタム プロパティを定義します。

<mgt-todo class="todo"></mgt-todo>

.todo {
    --task-new-cancel-button-color: blue;
    --task-detail-color: purple;
    --task-color: black;
    --task-background-color: white;
    --task-complete-background-color: grey;
    --task-date-input-active-color: blue;
    --task-date-input-hover-color: green;
    --task-background-color-hover: grey;
    --task-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    --task-border: 1px solid black;
    --task-border-completed: 1px solid grey;
    --task-radio-background-color: green;
}

詳細については、「コンポーネントのスタイリング」を参照してください。

イベント

コンポーネントから次のイベントが発生します。

イベント いつ出力されるか カスタム データ キャンセル 泡 カスタム テンプレートを使用する
taskClick ユーザーがタスクをクリックまたはタップしたときに発生します 選択した タスク 不要 不要 不要

イベントの処理の詳細については、「 イベント」を参照してください。

テンプレート

todo コンポーネントは、いくつかの テンプレート をサポートしており、コンポーネントの特定の部分を置き換えることができます。 テンプレートを指定するには、コンポーネント内に <template> 要素を含め、 data-type を次のいずれかの値に設定します。

データ型 データ コンテキスト 説明
タスク task: To Do タスク オブジェクト 既定のタスク全体を置き換えます。
task-details task: To Do タスク オブジェクト テンプレートは、タスクの詳細セクションを置き換えます。

次の例では、タスク コンポーネントのテンプレートを定義します。

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

Microsoft Graph のアクセス許可

このコントロールは、以下の Microsoft Graph API とアクセス許可を使用します。 呼び出される API ごとに、ユーザーには、一覧表示されているアクセス許可の少なくとも 1 つが必要です。

構成 アクセス許可 API
targetId または initialId セット Tasks.Read、Tasks.ReadWrite /me/todo/lists/${listId}, /me/todo/lists/{todoTaskListId}/tasks
targetId 設定されていません Tasks.Read、Tasks.ReadWrite /me/todo/lists, /me/todo/lists/{todoTaskListId}/tasks
タスクの作成、更新、または削除 Tasks.ReadWrite /me/todo/lists/{todoTaskListId}/tasks/{taskId}

認証

todo コンポーネントは、 認証ドキュメントで説明されているグローバル認証プロバイダーを使用します。

キャッシュ

mgt-todo コンポーネントはデータをキャッシュしません。

ローカリゼーション

コントロールは、ローカライズできる次の変数を公開します。 詳細については、「 コンポーネントのローカライズ」を参照してください。

文字列名 既定値
cancelNewTaskSubtitle Cancel
newTaskPlaceholder Add a task
newTaskLabel New Task Input
addTaskButtonSubtitle Add
deleteTaskLabel Delete Task
dueDate Due date
newTaskDateInputLabel New Task Date Input
newTaskNameInputLabel New Task Name Input
cancelAddingTask Cancel adding a new task
  • Last updated on