Componente To Do no Microsoft Graph Toolkit

Cuidado

O Microsoft Graph Toolkit foi preterido. O período de aposentadoria começa em 1º de setembro de 2025, com aposentadoria total planejada para 28 de agosto de 2026. Os desenvolvedores devem migrar para o uso dos SDKs do Microsoft Graph ou outras ferramentas do Microsoft Graph com suporte para criar experiências na Web. Para obter mais informações, consulte o anúncio de substituição.

O componente To Do é usado para permitir que o usuário conectado exiba, adicione, remova, complete e/ou edite tarefas do Microsoft To Do usando a API To Do no Microsoft Graph.

Exemplo

O exemplo a seguir exibe as tarefas do Microsoft To Do do usuário conectado usando o mgt-todo componente. Você pode usar o editor de código para ver como as propriedades alteram o comportamento do componente.

Propriedades

Você pode usar os seguintes atributos e propriedades para personalizar o componente.

Atributo Propriedade Descrição
somente leitura readOnly Um booliano para definir a interface de tarefas para ser somente leitura (sem adicionar ou remover tarefas). O padrão é false.
id-inicial="folder_id" initialId Uma ID de cadeia de caracteres para definir a pasta exibida inicialmente como a ID fornecida.
target-id="folder_id" targetId Uma ID de cadeia de caracteres para bloquear a interface de tarefas para a ID de pasta fornecida.
N/D isNewTaskVisible Determina se a nova visualização de tarefas está visível na renderização.
N/D taskFilter Uma função opcional para filtrar quais tarefas são mostradas para o usuário.

O exemplo a seguir mostra somente as tarefas da pasta com a ID 12345 e não permite que o usuário 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 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, consulte Componentes de estilo.

Eventos

Os eventos a seguir são disparados do componente.

Evento Quando é emitido Dados personalizados Cancelável Bolhas Funciona com modelo personalizado
taskClick Acionado quando o usuário clica ou toca em uma tarefa Tarefa selecionada Não Não Não

Para obter mais informações sobre como lidar com eventos, consulte eventos.

Modelos

O todo componente suporta vários modelos que permitem substituir certas 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 task: um objeto de tarefa pendente Substitui toda a tarefa padrão.
Detalhes da tarefa task: um objeto de tarefa pendente O modelo substitui a seção de detalhes da tarefa.

O exemplo a seguir 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

Esse controle usa as seguintes APIs e permissões do Microsoft Graph. Para cada API chamada, o usuário deve ter pelo menos uma das permissões listadas.

Configuração Permissão API
targetId ou initialId defina 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 excluir tarefa Tasks.ReadWrite /me/todo/lists/{todoTaskListId}/tasks/{taskId}

Autenticação

O componente todo usa o provedor de autenticação global descrito na documentação de autenticação.

Cache

O mgt-todo componente não armazena nenhum dado em cache.

Localização

O controle expõe as variáveis a seguir que podem ser localizadas. Para obter mais informações, consulte Localização de componentes.

Nome da cadeia de caracteres 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