Planner componente no Microsoft Graph Toolkit
O componente Planner permite que o usuário exiba, adicione, remova, conclua ou edite tarefas de Microsoft Planner.
Além disso, um usuário pode atribuir um único ou vários usuários do Microsoft Graph a uma tarefa. Para obter mais informações sobre atribuições do Microsoft Graph, consulte plannerAssignments.
Importante
Com a versão 4, o componente planner substitui o componente de tarefa antigo e não dá mais suporte ao uso do @microsoft/mgt-components Outlook Tasks como fonte de dados.
Exemplo
O exemplo a seguir exibe as tarefas de Microsoft Planner do usuário conectado usando o mgt-planner componente. Você pode usar o editor de código para ver como as propriedades alteram o comportamento do componente.
Propriedades
| Atributo | Propriedade | Descrição |
|---|---|---|
| somente leitura | Readonly | Um booliano para definir a interface da tarefa a ser lida apenas (sem adicionar ou remover tarefas). O padrão é false. |
| hide-header | hideHeader | Um booliano para mostrar ou ocultar o cabeçalho do componente. O padrão é false. |
| ocultar opções | hideOptions | Um booliano para mostrar ou ocultar as opções em tarefas. O padrão é false. |
| initial-id="planner_id/folder_id" | initialId | Uma ID de cadeia de caracteres para definir o plano exibido inicialmente para a ID fornecida. |
| initial-bucket-id="bucket_id" | initialBucketId | Uma ID de cadeia de caracteres para definir o bucket exibido inicialmente para a ID fornecida. |
| target-id="planner_id/folder_id" | Targetid | Uma ID de cadeia de caracteres para bloquear a interface de tarefas para a ID do plano fornecida. |
| target-bucket-id="bucket_id" | targetBucketId | Uma ID de cadeia de caracteres para bloquear a interface de tarefas para a ID do bucket fornecida. |
| id de grupo | groupId | Uma ID de cadeia de caracteres para bloquear a interface de tarefas para a ID do grupo. |
| - | isNewTaskVisible | Determina se o novo modo de exibição de tarefas está visível na renderização. |
| - | taskFilter | Uma função opcional para filtrar quais tarefas são mostradas ao usuário. |
O exemplo a seguir mostra apenas tarefas de Planner com a ID 12345 e não permite que o usuário crie novas tarefas.
<mgt-planner read-only initial-id="12345"></mgt-planner>
O exemplo a seguir mostra como filtrar tarefas que têm apenas categoria3 definida.
let taskView = document.querySelector("mgt-planner");
taskView.taskFilter = (task) => task.appliedCategories.category3 === true;
Variáveis CSS personalizadas
<mgt-planner class="tasks"></mgt-planner>
.tasks {
--tasks-header-padding: 28px 14px;
--tasks-header-margin: 0 14px;
--tasks-header-font-size: large;
--tasks-header-font-weight: 800;
--tasks-header-text-color: blue;
--tasks-header-text-hover-color: gray;
--tasks-new-button-width: 300px;
--tasks-new-button-height: 50px;
--tasks-new-button-text-color: orange;
--tasks-new-button-text-font-weight: 400;
--tasks-new-button-background: black;
--tasks-new-button-border: 2px dotted golden;
--tasks-new-button-background-hover: gray;
--tasks-new-button-background-active: red;
--task-add-new-button-width: 60px;
--task-add-new-button-height: 35px;
--task-add-new-button-text-color: orange;
--task-add-new-button-text-font-weight: 400;
--task-add-new-button-background: black;
--task-add-new-button-border: 2px dotted white;
--task-add-new-button-background-hover: gray;
--task-add-new-button-background-active: red;
--task-cancel-new-button-width: 60px;
--task-cancel-new-button-height: 35px;
--task-cancel-new-button-text-color: yellow;
--task-cancel-new-button-text-font-weight: 400;
--task-cancel-new-button-background: red;
--task-cancel-new-button-border: 2px dashed white;
--task-cancel-new-button-background-hover: brown;
--task-cancel-new-button-background-active: red;
--task-complete-checkbox-background-color: red;
--task-complete-checkbox-text-color: yellow;
--task-incomplete-checkbox-background-color: orange;
--task-incomplete-checkbox-background-hover-color: yellow;
--task-title-text-font-size: large;
--task-title-text-font-weight: 500;
--task-complete-title-text-color: green;
--task-incomplete-title-text-color: purple;
--task-icons-width: 32px;
--task-icons-height: 32px;
--task-icons-background-color: purple;
--task-icons-text-font-color: black;
--task-icons-text-font-size: 16px;
--task-icons-text-font-weight: 400;
--task-complete-background-color: powderblue;
--task-incomplete-background-color: salmon;
--task-complete-border: 2px dashed green;
--task-incomplete-border: 2px double red;
--task-complete-border-radius: 8px;
--task-incomplete-border-radius: 12px;
--task-complete-padding: 8px;
--task-incomplete-padding: 12px;
--tasks-gap: 8px;
--tasks-background-color: violet;
--tasks-border: 2px dashed green;
--tasks-border-radius: 12px;
--tasks-padding: 16px;
/** affects the date picker and the text-input field **/
--task-new-input-border: 2px solid green;
--task-new-input-border-radius: 8px;
--task-new-input-background-color: yellow;
--task-new-input-hover-background-color: yellowgreen;
--task-new-input-placeholder-color: black;
/** affects the date picker and the text-input field **/
--task-new-dropdown-border: 2px solid green;
--task-new-dropdown-border-radius: 8px;
--task-new-dropdown-background-color: yellow;
--task-new-dropdown-hover-background-color: yellowgreen;
--task-new-dropdown-placeholder-color: red;
--task-new-dropdown-option-text-color: blue;
--task-new-dropdown-list-background-color: yellow;
--task-new-dropdown-option-hover-background-color: yellowgreen;
--task-new-person-icon-text-color: blue;
--task-new-person-icon-color: blue;
}
Para saber mais, confira componentes de estilo.
Eventos
| Evento | Quando ele é emitido | Dados personalizados | Cancelável | Bolhas | Funciona com modelo personalizado |
|---|---|---|---|---|---|
taskAdded |
Dispara quando uma nova tarefa é criada | PlannerTask recém-criado | Não | Não | Sim |
taskChanged |
Dispara quando os metadados de tarefa são alterados, como a marcação concluída | Atualização de um plannerTask | Não | Não | Não |
taskClick |
Dispara quando o usuário seleciona uma tarefa | taskpropriedade com o plannerTask selecionado |
Não | Não | Não |
taskRemoved |
Dispara quando uma tarefa existente é excluída | taskpropriedade com o plannerTask selecionado |
Não | Não | Não |
Para obter mais informações sobre como lidar com eventos, consulte eventos.
Modelos
O planner componente dá suporte a vários modelos que permitem substituir determinadas partes do componente. Para especificar um modelo, inclua um <template> elemento dentro de um componente e defina a data-type propriedade como um dos seguintes valores:
| Tipo de dados | Contexto de dados | Descrição |
|---|---|---|
| tarefa | tarefa: um objeto de tarefa de planejador | substitui toda a tarefa padrão. |
| detalhes da tarefa | tarefa: um objeto de tarefa de planejador | template substitui a seção de detalhes da tarefa. |
O exemplo a seguir define um modelo para o componente do planejador.
<mgt-planner>
<template data-type="task-details">
<div>Owner: {{task.owner}}</div>
<div>Importance Level: {{task.importance}}</div>
</template>
</mgt-planner>
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 |
|---|---|---|
| em todas as configurações | User.Read, User.ReadWrite | /Me |
| comportamento padrão | Tasks.Read, Group.Read.All, Tasks.ReadWrite, Group.ReadWrite.All | /me/planner/plans, /planner/plans/${planId}/buckets, /planner/buckets/${bucketId}/tasks |
groupId Definir |
Tasks.Read, Group.Read.All, Tasks.ReadWrite, Group.ReadWrite.All | /groups/${group-id}/planner/plans, /planner/plans/${planId}/buckets, /planner/buckets/${bucketId}/tasks |
targetId Definir |
Tasks.Read, Group.Read.All, Tasks.ReadWrite, Group.ReadWrite.All | /planner/plans/${planId}, /planner/plans/${planId}/buckets, /planner/buckets/${bucketId}/tasks |
| criar, atualizar ou excluir tarefa | Tasks.ReadWrite, Group.ReadWrite.All | POST /planner/tasks, PATCH /planner/tasks/${taskId}, DELETE /planner/tasks/${taskId} |
Subcomponentes
O mgt-tasks componente consiste em um ou mais subcomponentes que podem exigir outras permissões do que as listadas anteriormente. Para obter mais informações, confira a documentação de cada subcomponente:
Autenticação
O componente tarefas usa o provedor de autenticação global descrito na documentação de autenticação.
Cache
O mgt-tasks componente não armazena em cache nenhum dado.
Localização
O controle expõe as variáveis a seguir que podem ser localizadas. Para obter detalhes sobre a localização, consulte Localizando componentes.
| Nome da cadeia de caracteres | Valor padrão |
|---|---|
| removeTaskSubtitle | Delete Task |
| cancelNewTaskSubtitle | Cancel |
| newTaskPlaceholder | Adding a task... |
| addTaskButtonSubtitle | Add |
| Devido | Due |
| addTaskDate | Add the task date |
| Atribuir | Assign |
| planNotFound | Plan not found |
| plansSelfAssigned | All Plans |
| bucketNotFound | Bucket not found |
| bucketsSelfAssigned | All Tasks |
| baseSelfAssigned | Assigned to Me |
Comentários
Em breve: Ao longo de 2024, eliminaremos os problemas do GitHub como o mecanismo de comentários para conteúdo e o substituiremos por um novo sistema de comentários. Para obter mais informações, consulte https://aka.ms/ContentUserFeedback.
Enviar e exibir comentários de