Компонент To Do в Microsoft Graph Toolkit

  • Статья

Компонент To Do используется, чтобы позволить вошедшему пользователю просматривать, добавлять, удалять, выполнять и/или изменять задачи из Microsoft To Do с помощью API To Do в Microsoft Graph.

Пример

В следующем примере отображаются задачи Microsoft To Do вошедшего пользователя с помощью компонента mgt-todo. Вы можете использовать редактор кода, чтобы узнать, как свойства изменяют поведение компонента.

Свойства

Для настройки компонента можно использовать следующие атрибуты и свойства.

Атрибут Свойство Описание
read-only readOnly Логическое значение для настройки интерфейса задачи только для чтения (без добавления или удаления задач). Значение по умолчанию: false.
hide-header hideHeader Логическое значение для отображения или скрытия заголовка компонента. Значение по умолчанию: false.
hide-options hideOptions Логическое значение для отображения или скрытия параметров в задачах. Значение по умолчанию: false.
initial-id="folder_id" initialId Строковый идентификатор, чтобы настроить для изначально отображаемой папки указанный идентификатор.
target-id="folder_id" targetId Строковый идентификатор для блокировки интерфейса задач по указанному идентификатору папки.
Н/Д isNewTaskVisible Определяет, отображается ли новое представление задач при визуализации.
Н/Д taskFilter Необязательная функция для фильтрации задач, демонстрируемых пользователю.

В следующем примере показаны только задачи из папки с идентификатором 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 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 и разрешения Microsoft Graph. Для каждого вызываемого API пользователь должен иметь по крайней мере одно из перечисленных разрешений.

Конфигурация Разрешение 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