Compartilhar via

Componente To Do no Microsoft Graph Toolkit

Cuidado

O Toolkit do Microsoft Graph foi preterido. O período de reforma começa a 1 de setembro de 2025, com a reforma completa prevista para 28 de agosto de 2026. Os programadores devem migrar para utilizar os SDKs do Microsoft Graph ou outras ferramentas suportadas do Microsoft Graph para criar experiências Web. Para obter mais informações, veja o anúncio de preterição.

O componente To Do é utilizado para permitir que o utilizador com sessão iniciada veja, adicione, remova, conclua e/ou edite tarefas do Microsoft To Do com a API To Do no Microsoft Graph.

Exemplo

O exemplo seguinte apresenta as tarefas do Microsoft To Do do utilizador com sessão iniciada com o mgt-todo componente . Pode utilizar o editor de código para ver como as propriedades alteram o comportamento do componente.

Propriedades

Pode utilizar os seguintes atributos e propriedades para personalizar o componente.

Atributo Propriedade Descrição
só de leitura readOnly Um Booleano para definir a interface de tarefa como só de leitura (sem adicionar ou remover tarefas). O padrão é false.
initial-id="folder_id" initialId Um ID de cadeia para definir a pasta apresentada inicialmente para o ID fornecido.
target-id="folder_id" targetId Um ID de cadeia para bloquear a interface de tarefas para o ID de pasta fornecido.
N/D isNewTaskVisible Determina se a nova vista de tarefas está visível na composição.
N/D taskFilter Uma função opcional para filtrar as tarefas que são apresentadas ao utilizador.

O exemplo seguinte mostra apenas as tarefas da pasta com o ID 12345 e não permite que o utilizador crie novas tarefas.

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

Variáveis CSS personalizadas

O mgt-todo componente define as seguintes propriedades personalizadas do 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;
}

Para saber mais, veja Componentes de estilo.

Eventos

Os seguintes eventos são acionados a partir do componente.

Evento Quando é emitido Dados personalizados Cancelável Bolhas Funciona com um modelo personalizado
taskClick É acionado quando o utilizador clica ou toca numa tarefa Tarefa selecionada Não Não Não

Para obter mais informações sobre o processamento de eventos, veja eventos.

Modelos

O todo componente suporta vários modelos que lhe permitem substituir determinadas partes do componente. Para especificar um modelo, inclua um <template> elemento dentro de um componente e defina como data-type um dos seguintes valores.

Tipo de dados Contexto de dados Descrição
tarefa tarefa: um objeto de tarefa To Do Substitui toda a tarefa predefinida.
detalhes da tarefa tarefa: um objeto de tarefa To Do O modelo substitui a secção de detalhes da tarefa.

O exemplo seguinte define um modelo para o componente de tarefas.

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

Permissões do Microsoft Graph

Este controlo utiliza as seguintes APIs e permissões do Microsoft Graph. Para cada API chamada, o utilizador tem de ter, pelo menos, uma das permissões listadas.

Configuração Permissão API
targetId ou initialId definir Tasks.Read, Tasks.ReadWrite /me/todo/lists/${listId}, /me/todo/lists/{todoTaskListId}/tasks
targetId não definido Tasks.Read, Tasks.ReadWrite /me/todo/lists, /me/todo/lists/{todoTaskListId}/tasks
criar, atualizar ou eliminar tarefa Tasks.ReadWrite /me/todo/lists/{todoTaskListId}/tasks/{taskId}

Autenticação

O componente todo utiliza o fornecedor de autenticação global descrito na documentação de autenticação.

Cache

O mgt-todo componente não coloca dados em cache.

Localização

O controlo expõe as seguintes variáveis que podem ser localizadas. Para obter mais informações, veja Localizar componentes.

Nome da cadeia Valor padrão
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