トレーニング
モジュール
属性と CSS を使用して Microsoft Graph ツールキット コンポーネントを構成およびスタイル設定する - Training
Microsoft Graph ツールキット コンポーネントは、カスタマイズに柔軟に対応します。 属性を使用してコンポーネントの動作を変更できます。 CSS のカスタム プロパティを使用して、アプリのブランドに合わせてコンポーネントのスタイル設定をカスタマイズすることもできます。
このブラウザーはサポートされなくなりました。
Microsoft Edge にアップグレードすると、最新の機能、セキュリティ更新プログラム、およびテクニカル サポートを利用できます。
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>
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 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 |
トレーニング
モジュール
属性と CSS を使用して Microsoft Graph ツールキット コンポーネントを構成およびスタイル設定する - Training
Microsoft Graph ツールキット コンポーネントは、カスタマイズに柔軟に対応します。 属性を使用してコンポーネントの動作を変更できます。 CSS のカスタム プロパティを使用して、アプリのブランドに合わせてコンポーネントのスタイル設定をカスタマイズすることもできます。