componente Planner no Microsoft Graph Toolkit

O componente Planner permite ao utilizador ver, adicionar, remover, concluir ou editar tarefas de 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.

Exemplo

O exemplo seguinte apresenta as tarefas de 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

O exemplo seguinte mostra apenas as tarefas de 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

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:

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.

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:

• mgt-people
• mgt-people-picker

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.