Componente Tareas en Microsoft Graph Toolkit

El componente Tareas permite al usuario ver, agregar, quitar, completar o editar tareas de Microsoft Planner.

Además, un usuario puede asignar uno o varios usuarios de Microsoft Graph a una tarea. Para obtener más información sobre las asignaciones de Microsoft Graph, consulte plannerAssignments.

Ejemplo:

En el ejemplo siguiente se muestran las tareas de Microsoft Planner del usuario que ha iniciado sesión mediante el mgt-tasks componente . Puede usar el editor de código para ver cómo cambian las propiedades el comportamiento del componente.

Abra este ejemplo en mgt.dev

Propiedades

Atributo	Propiedad	Descripción
solo lectura	Readonly	Un valor booleano para establecer que la interfaz de tarea sea de solo lectura (sin agregar ni quitar tareas). El valor predeterminado es false.
hide-header	hideHeader	Boolean para mostrar u ocultar el encabezado del componente. El valor predeterminado es false.
hide-options	hideOptions	Un valor booleano para mostrar u ocultar las opciones de las tareas. El valor predeterminado es false.
initial-id="planner_id/folder_id"	initialId	Identificador de cadena para establecer el organizador o la carpeta mostrados inicialmente en el identificador proporcionado.
initial-bucket-id="bucket_id"	initialBucketId	Identificador de cadena para establecer el cubo mostrado inicialmente (Solo Data-Source Planner) en el identificador proporcionado.
target-id="planner_id/folder_id"	targetId	Un identificador de cadena para bloquear la interfaz de tareas en el identificador de la carpeta o el planificador proporcionados.
target-bucket-id="bucket_id"	targetBucketId	Identificador de cadena para bloquear la interfaz de tareas en el identificador de cubo proporcionado (solo Data-Source Planner).
group-id	groupId	Identificador de cadena para bloquear la interfaz de tareas en el identificador de grupo.
N/D	isNewTaskVisible	Determina si la nueva vista de tareas está visible en la representación.
N/D	taskFilter	Función opcional para filtrar qué tareas se muestran al usuario.

En el ejemplo siguiente se muestran solo las tareas de Planner con el identificador 12345 y no se permite al usuario crear nuevas tareas.

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

En el ejemplo siguiente se muestra cómo filtrar las tareas que solo tienen establecida la categoría 3 .

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

Variables CSS personalizadas

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
}

Eventos

Evento	Cuándo se emite	Datos personalizados	Cancelable	Burbujas	Funciona con una plantilla personalizada
taskAdded	Se desencadena cuando se ha creado una nueva tarea.	Tarea recién creada que puede ser plannerTask nuestra outlookTask	No	No	Sí
taskChanged	Se desencadena cuando se han cambiado los metadatos de la tarea, como marcar completado	Tarea actualizada que puede ser plannerTask nuestra outlookTask	No	No	No
taskClick	Se activa cuando el usuario hace clic o pulsa en una tarea.	task con el plannerTask seleccionadoTask nuestra outlookTask	No	No	No
taskRemoved	Se desencadena cuando se ha eliminado una tarea existente.	task con el plannerTask seleccionadoTask nuestra outlookTask	No	No	No

Para obtener más información sobre el control de eventos, vea eventos.

Plantillas

El tasks componente admite varias plantillas que permiten reemplazar ciertas partes del componente. Para especificar una plantilla, incluya un <template> elemento dentro de un componente y establezca el data-type valor en uno de los siguientes:

Tipo de datos	Contexto de datos	Descripción
tarea	task: un objeto de tarea de planner	reemplaza toda la tarea predeterminada.
task-details	task: un objeto de tarea de planner	template reemplaza la sección de detalles de la tarea.

En el ejemplo siguiente se define una plantilla para el componente de tareas.

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

Permisos de Microsoft Graph

Este control usa las siguientes API y permisos de Microsoft Graph.

Configuración	Permiso	API
groupId establecer y dataSource establecer en TasksSource.planner	Group.Read.All	/groups/${group-id}/planner/plans, /planner/plans/${planId}/buckets, /planner/buckets/${bucketId}/tasks
targetId establecer y dataSource establecer en TasksSource.todo	Tasks.Read	/me/outlook/taskGroups, /me/outlook/taskGroups/${groupId}/taskFolders, /me/outlook/taskFolders/${folderId}/tasks
targetId establecer y dataSource establecer en otra cosa que TasksSource.todo	Group.Read.All	/planner/plans/${planId}, /planner/plans/${planId}/buckets, /planner/buckets/${bucketId}/tasks
dataSource establecer en TasksSource.planner	Group.Read.All	/me/planner/plans, /planner/plans/${planId}/buckets, /planner/buckets/${bucketId}/tasks
dataSource establecer en TasksSource.todo	Tasks.Read	/me/outlook/taskGroups, /me/outlook/taskGroups/${groupId}/taskFolders, /me/outlook/taskFolders/${folderId}/tasks
addTasktrue establecer en y dataSource establecer enTasksSource.planner	Group.ReadWrite.All	/planner/tasks
addTasktrue establecer en y dataSource establecer enTasksSource.todo	Tasks.ReadWrite	/me/outlook/taskFolders/${parentFolderId}/tasks

Para el origen de datos Microsoft Planner, las tareas de captura y lectura requieren el permiso Groups.Read.All. Agregar, actualizar o quitar tareas requiere el permiso Groups.ReadWrite.All.

Autenticación

El componente de tareas usa el proveedor de autenticación global descrito en la documentación de autenticación.

Caché

El mgt-tasks componente no almacena en caché ningún dato.