Componente do Planner 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 Planner permite ao usuário exibir, adicionar, remover, concluir ou editar tarefas do Microsoft Planner.

Além disso, um usuário pode atribuir um 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 o lançamento da versão 4, o componente do planejador substitui o componente de tarefa antigo e não oferece mais suporte ao uso de tarefas do Outlook como fonte de @microsoft/mgt-components dados.

Exemplo

O exemplo a seguir exibe as tarefas do usuário conectado ao Microsoft Planner 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 de tarefas para ser somente leitura (sem adicionar ou remover tarefas). O padrão é false.
ocultar cabeçalho hideHeader Um booliano para mostrar ou ocultar o cabeçalho do componente. O padrão é false.
opções de ocultação hideOptions Um booliano para mostrar ou ocultar as opções nas tarefas. O padrão é false.
id-inicial="planner_id/folder_id" initialId Uma ID de cadeia de caracteres para definir o plano exibido inicialmente como a ID fornecida.
initial-bucket-id="bucket_id" initialBucketId Um ID de string para definir o bucket exibido inicialmente como o ID fornecido.
target-id="planner_id/folder_id" targetId Uma ID de cadeia de caracteres para bloquear a interface de tarefas à 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 à ID do grupo.
- isNewTaskVisible Determina se a nova visualização de tarefas está visível na renderização.
- taskFilter Uma função opcional para filtrar quais tarefas são mostradas para o usuário.

O exemplo a seguir mostra apenas tarefas do Planner com 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 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;

  /** 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;
  
  /** affects the options menu */
  --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, consulte Componentes de estilo.

Eventos

Evento Quando é emitido Dados personalizados Cancelável Bolhas Funciona com modelo personalizado
taskAdded Acionado quando uma nova tarefa é criada Tarefa do planner recém-criada Não Não Sim
taskChanged Acionado quando os metadados da tarefa são alterados, como marcar como concluído Atualizou uma plannerTask Não Não Não
taskClick Acionado quando o usuário seleciona uma tarefa taskcom a propriedade plannerTask selecionada Não Não Não
taskRemoved Acionado quando uma tarefa existente é excluída taskcom a propriedade plannerTask selecionada Não Não Não

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

Modelos

O planner 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 a data-type propriedade como um dos seguintes valores:

Tipo de dados Contexto de dados Descrição
tarefa Tarefa: um objeto de tarefa do Planner Substitui toda a tarefa padrão.
Detalhes da tarefa Tarefa: um objeto de tarefa do Planner 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 conjunto Tasks.Read, Group.Read.All, Tasks.ReadWrite, Group.ReadWrite.All /groups/${group-id}/planner/plans, /planner/plans/${planId}/buckets, /planner/buckets/${bucketId}/tasks
targetId conjunto 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 além das listadas anteriormente. Para obter mais informações, consulte a documentação de cada subcomponente:

Autenticação

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

Cache

O mgt-tasks 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 detalhes sobre localização, consulte Localizando componentes.

Nome da cadeia de caracteres Valor padrão
removeTaskSubtitle Delete Task
cancelNewTaskSubtitle Cancel
newTaskPlaceholder Adding a task...
addTaskButtonSubtitle Add
Vencimento 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
  • Last updated on