Partilhar via

Componente planner no Microsoft Graph Toolkit

  • Artigo

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.

Exemplo

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.

Propriedades

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;

  /** 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, veja Componentes de estilo.

Eventos

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 taskpropriedade com o plannerTask selecionado Não Não Não
taskRemoved Aciona quando uma tarefa existente é eliminada taskpropriedade com o plannerTask selecionado Não Não Não

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

Modelos

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:

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.

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}

Subcomponentes

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:

Autenticação

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

Cache

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

Localização

O controlo expõe as seguintes variáveis que podem ser localizadas. Para obter detalhes sobre a localização, veja Localizar componentes.

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