Componente tarefas no Microsoft Graph ToolkitTasks component in the Microsoft Graph Toolkit

O componente tarefas permite que o usuário exiba, adicione, remova, conclua ou edite tarefas do Microsoft Planner.The Tasks component enables the user to view, add, remove, complete, or edit tasks from Microsoft Planner.

Além disso, um usuário pode atribuir um único ou vários usuários do Microsoft Graph a uma tarefa.In addition, a user is able to assign a single or multiple Microsoft Graph users to a task. Para obter mais detalhes sobre as atribuições do Microsoft Graph, consulte plannerAssignments.For more details about Microsoft Graph assignments, see plannerAssignments.

ExemploExample

O exemplo a seguir exibe as tarefas do Microsoft Planner do usuário conectado usando o mgt-tasks componente.The following example displays the signed-in user's Microsoft Planner tasks using the mgt-tasks component. Você pode usar o editor de código para ver como as propriedades alteram o comportamento do componente.You can use the code editor to see how properties change the behavior of the component.

Abra este exemplo em gerenciamento de. devOpen this example in mgt.dev

PropriedadesProperties

AtributoAttribute PropriedadeProperty DescriçãoDescription
somente leituraread-only readOnlyreadOnly Um booliano para definir a interface de tarefa como somente leitura (sem adicionar ou remover tarefas).A Boolean to set the task interface to be read only (no adding or removing tasks). O padrão é false.Default is false.
Ocultar-cabeçalhohide-header hideHeaderhideHeader Um booliano para mostrar ou ocultar o cabeçalho do componente.A Boolean to show or hide the header of the component. O padrão é false.Default is false.
Hide-opçõeshide-options hideoptionshideOptions Um booliano para mostrar ou ocultar as opções nas tarefas.A Boolean to show or hide the options in tasks. O padrão é false.Default is false.
Initial-ID = "planner_id/folder_id"initial-id="planner_id/folder_id" initialidinitialId Uma ID de cadeia de caracteres para definir o planejador ou pasta inicialmente exibido para a ID fornecida.A string ID to set the initially displayed planner or folder to the provided ID.
Initial-Bucket-ID = "bucket_id"initial-bucket-id="bucket_id" initialBucketIdinitialBucketId Uma ID de cadeia de caracteres para definir o Bucket exibido inicialmente (planejador Data-Source somente) para a ID fornecida.A string ID to set the initially displayed bucket (Planner Data-Source Only) to the provided ID.
Target-ID = "planner_id/folder_id"target-id="planner_id/folder_id" targetIdtargetId Uma ID de cadeia de caracteres para bloquear a interface de tarefas para o planejador ou ID de pasta fornecido.A string ID to lock the tasks interface to the provided planner or folder ID.
Target-Bucket-ID = "bucket_id"target-bucket-id="bucket_id" targetBucketIdtargetBucketId Uma ID de cadeia de caracteres para bloquear a interface de tarefas para a ID de Bucket fornecida (somente planejador Data-Source).A string ID to lock the tasks interface to the provided bucket ID (Planner Data-Source Only).
ID de grupogroup-id groupIdgroupId Uma ID de cadeia de caracteres para bloquear a interface de tarefas para a ID do grupo.A string ID to lock the tasks interface to the group ID.
N/DN/A isNewTaskVisibleisNewTaskVisible Determina se a exibição de nova tarefa é visível no processamento.Determines whether new task view is visible at render.
N/DN/A taskFiltertaskFilter Uma função opcional para filtrar quais tarefas são exibidas para o usuário.An optional function to filter which tasks are shown to the user.

O exemplo a seguir mostra apenas as tarefas do Planner com a ID 12345 e não permite que o usuário crie novas tarefas.The following example shows only tasks from Planner with ID 12345 and does not allow the user to create new tasks.

<mgt-tasks read-only initial-id="12345"></mgt-tasks>

O exemplo a seguir mostra como filtrar tarefas que têm apenas category3 definido.The following example shows how to filter tasks that only have category3 set.

let taskView = document.querySelector('mgt-tasks');
taskView.taskFilter = task => task.appliedCategories.category3 === true;

Variáveis CSS personalizadasCustom CSS variables

mgt-tasks {
--tasks-header-padding
--tasks-header-margin 

--tasks-title-padding
--tasks-plan-title-font-size
--tasks-plan-title-padding

--tasks-new-button-width
--tasks-new-button-height
--tasks-new-button-color
--tasks-new-button-background
--tasks-new-button-border
--tasks-new-button-hover-background
--tasks-new-button-active-background

--tasks-new-task-name-margin

--task-margin
--task-box-shadow
--task-background
--task-border

--task-header-color
--task-header-margin

--task-detail-icon-margin

--task-new-margin
--task-new-border
--task-new-line-margin
--tasks-new-line-border
--task-new-input-margin
--task-new-input-padding
--task-new-input-font-size
--task-new-input-active-border
--task-new-select-border

--task-new-add-button-background
--task-new-add-button-disabled-background
--task-new-cancel-button-color

--task-complete-background
--task-complete-border
--task-complete-header-color
--task-complete-detail-color
--task-complete-detail-icon-color

--task-icon-background-completed
--task-icon-background

--task-icon-border-completed
--task-icon-border

--task-icon-color
--task-icon-color-completed

--task-icon-border-radius

--task-icon-alignment: flex-start (default) | center | flex-end
}

EventosEvents

EventoEvent DetalheDetail DescriçãoDescription
taskAddedtaskAdded O detalhe contém o respectivo task objetoThe detail contains the respective task object Dispara quando uma nova tarefa é criada.Fires when a new task has been created.
taskchangedtaskChanged O detalhe contém o respectivo task objetoThe detail contains the respective task object Dispara quando os metadados da tarefa são alterados, como marcação concluída.Fires when task metadata has been changed, such as marking completed.
taskClicktaskClick O detalhe contém o respectivo task objetoThe detail contains the respective task object Dispara quando o usuário clica ou toca em uma tarefa.Fires when the user clicks or taps on a task.
taskRemovedtaskRemoved O detalhe contém o respectivo task objetoThe detail contains the respective task object Dispara quando uma tarefa existente foi excluída.Fires when an existing task has been deleted.

ModelosTemplates

O tasks componente oferece suporte a vários modelos que permitem substituir determinadas partes do componente.The tasks component supports several templates that allow you to replace certain parts of the component. Para especificar um modelo, inclua um <template> elemento dentro de um componente e defina o data-type valor como um dos seguintes:To specify a template, include a <template> element inside a component and set the data-type value to one of the following:

Tipo de dadosData type Contexto de dadosData context DescriçãoDescription
tarefatask tarefa: um objeto de tarefa do Plannertask: a planner task object Substitui toda a tarefa padrão.replaces the whole default task.
tarefa-detalhestask-details tarefa: um objeto de tarefa do Plannertask: a planner task object o modelo substitui a seção de detalhes da tarefa.template replaces the details section of the task.

O exemplo a seguir define um modelo para o componente tarefas.The following example defines a template for the tasks component.

    <mgt-tasks>
      <template data-type="task-details">
        <div>
          Owner: {{task.owner}}
        </div>
        <div>
          Importance Level: {{task.importance}}
        </div>
      </template>
    </mgt-tasks>

Permissões do Microsoft GraphMicrosoft Graph permissions

Este controle usa as seguintes APIs e permissões do Microsoft Graph.This control uses the following Microsoft Graph APIs and permissions.

RecursoResource PermissãoPermission
/me/planner/plans/me/planner/plans Group.Read.AllGroup.Read.All
/Planner/Plans/$ {ID}/planner/plans/${id} Group.Read.All, Group.ReadWrite.AllGroup.Read.All, Group.ReadWrite.All
/planner/tasks/planner/tasks Group.ReadWrite.AllGroup.ReadWrite.All
/groups/$ {Group-ID}/Planner/Plans/groups/${group-id}/planner/plans Group.Read.All, Group.ReadWrite.AllGroup.Read.All, Group.ReadWrite.All

Para a fonte de dados do Microsoft Planner, as tarefas de busca e leitura exigem a permissão groups. Read. All.For the Microsoft Planner data source, fetching and reading tasks requires the Groups.Read.All permission. Adicionar, atualizar ou remover tarefas requer a permissão groups. ReadWrite. All.Adding, updating, or removing tasks requires the Groups.ReadWrite.All permission.

AutenticaçãoAuthentication

O componente tarefas usa o provedor de autenticação global descrito na documentação de autenticação.The tasks component uses the global authentication provider described in the authentication documentation.