Artigo 07/11/2024
4 colaboradores
Comentários
Neste artigo
Exemplo
Propriedades
Variáveis CSS personalizadas
Eventos
Modelos
Permissões do Microsoft Graph
Autenticação
Cache
Localização
Mostrar mais 5
O componente Planner permite ao utilizador ver, adicionar, remover, concluir ou editar tarefas do Microsoft Planner.
Além disso, um utilizador pode atribuir um único ou vários utilizadores do Microsoft Graph a uma tarefa. Para obter mais informações sobre as atribuições do Microsoft Graph, consulte plannerAssignments .
Importante
Com o lançamento da versão 4, o componente planner substitui o componente de tarefa antigo e já não suporta a utilização de @microsoft/mgt-components
Tarefas do Outlook como origem de dados.
O exemplo seguinte apresenta as tarefas do Microsoft Planner do utilizador com sessão iniciada com o mgt-planner
componente . Pode utilizar o editor de código para ver como as propriedades alteram o comportamento do componente.
Expandir a tabela
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
.
ocultar cabeçalho
hideHeader
Um Booleano para mostrar ou ocultar o cabeçalho do componente. O padrão é false
.
ocultar opções
hideOptions
Um Booleano para mostrar ou ocultar as opções nas tarefas. O padrão é false
.
initial-id="planner_id/folder_id"
initialId
Um ID de cadeia para definir o plano apresentado inicialmente para o ID fornecido.
initial-bucket-id="bucket_id"
initialBucketId
Um ID de cadeia para definir o registo apresentado inicialmente para o ID fornecido.
target-id="planner_id/folder_id"
targetId
Um ID de cadeia para bloquear a interface de tarefas para o ID do plano fornecido.
target-bucket-id="bucket_id"
targetBucketId
Um ID de cadeia para bloquear a interface de tarefas para o ID de registo fornecido.
group-id
groupId
Um ID de cadeia para bloquear a interface de tarefas para o ID de grupo.
-
isNewTaskVisible
Determina se a nova vista de tarefas está visível na composição.
-
taskFilter
Uma função opcional para filtrar as tarefas que são apresentadas ao utilizador.
O exemplo seguinte mostra apenas as tarefas do Planner com o ID 12345 e não permite que o utilizador crie novas tarefas.
<mgt-planner read-only initial-id ="12345" > </mgt-planner >
O exemplo seguinte mostra como filtrar tarefas que têm apenas a 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 ;
--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;
--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;
--dot-options-menu-background-color : yellow;
--dot-options-menu-shadow-color : yellow;
--dot-options-menu-item-color : maroon;
--dot-options-menu-item-hover-background-color : white;
}
Para saber mais, veja Componentes de estilo .
Expandir a tabela
Evento
Quando é emitido
Dados personalizados
Cancelável
Bolhas
Funciona com um modelo personalizado
taskAdded
É acionada quando é criada uma nova tarefa
PlannerTask recém-criado
Não
Não
Sim
taskChanged
É acionado quando os metadados da tarefa são alterados, como a marcação concluída
Foi atualizado um plannerTask
Não
Não
Não
taskClick
É acionado quando o utilizador seleciona uma tarefa
task
propriedade com o plannerTask selecionado
Não
Não
Não
taskRemoved
Aciona quando uma tarefa existente é eliminada
task
propriedade com o plannerTask selecionado
Não
Não
Não
Para obter mais informações sobre o processamento de eventos, veja eventos .
O planner
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 a data-type
propriedade para um dos seguintes valores:
Expandir a tabela
Tipo de dados
Contexto de dados
Descrição
tarefa
tarefa: um objeto de tarefa do Planner
substitui toda a tarefa predefinida.
detalhes da tarefa
tarefa: um objeto de tarefa do Planner
O modelo substitui a secção de detalhes da tarefa.
O exemplo seguinte define um modelo para o componente planner.
<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
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.
Expandir a tabela
Configuração
Permissão
API
em todas as configurações
User.Read, User.ReadWrite
/me
comportamento predefinido
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 eliminar tarefa
Tasks.ReadWrite, Group.ReadWrite.All
POST /planner/tasks , PATCH /planner/tasks/${taskId} , DELETE /planner/tasks/${taskId}
O mgt-tasks
componente é composto por um ou mais subcomponentes que podem exigir outras permissões do que as listadas anteriormente. Para obter mais informações, veja a documentação de cada subcomponente:
O componente de tarefas utiliza o fornecedor de autenticação global descrito na documentação de autenticação .
O mgt-tasks
componente não coloca dados em cache.
O controlo expõe as seguintes variáveis que podem ser localizadas. Para obter detalhes sobre a localização, veja Localizar componentes .
Expandir a tabela
Nome da cadeia
Valor padrão
removeTaskSubtitle
Delete Task
cancelNewTaskSubtitle
Cancel
newTaskPlaceholder
Adding a task...
addTaskButtonSubtitle
Add
para conclusão
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