componente Planner en Microsoft Graph Toolkit
El componente Planner 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.
Importante
Con la versión 4, el componente planner reemplaza el componente de tarea anterior y ya no admite el uso de @microsoft/mgt-components Tareas de Outlook como origen de datos.
Ejemplo
En el ejemplo siguiente se muestran las tareas de Microsoft Planner del usuario que ha iniciado sesión mediante el mgt-planner componente . Puede usar el editor de código para ver cómo cambian las propiedades el comportamiento del componente.
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 plan mostrado inicialmente en el identificador proporcionado. |
| initial-bucket-id="bucket_id" | initialBucketId | Identificador de cadena para establecer el cubo mostrado inicialmente en el identificador proporcionado. |
| target-id="planner_id/folder_id" | targetId | Identificador de cadena para bloquear la interfaz de tareas en el identificador de plan proporcionado. |
| target-bucket-id="bucket_id" | targetBucketId | Identificador de cadena para bloquear la interfaz de tareas en el identificador de cubo proporcionado. |
| group-id | groupId | Identificador de cadena para bloquear la interfaz de tareas en el identificador de grupo. |
| - | isNewTaskVisible | Determina si la nueva vista de tareas está visible en la representación. |
| - | 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-planner read-only initial-id="12345"></mgt-planner>
En el ejemplo siguiente se muestra cómo filtrar las tareas que solo tienen establecida la categoría 3 .
let taskView = document.querySelector("mgt-planner");
taskView.taskFilter = (task) => task.appliedCategories.category3 === true;
Variables 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;
}
Para obtener más información, consulte Componentes de estilo.
Eventos
| Evento | Cuándo se emite | Datos personalizados | Cancelable | Burbujas | Funciona con una plantilla personalizada |
|---|---|---|---|---|---|
taskAdded |
Se desencadena cuando se crea una nueva tarea. | PlannerTask recién creado | No | No | Sí |
taskChanged |
Se desencadena cuando se cambian los metadatos de la tarea, como marcar completado | Se ha actualizado un plannerTask | No | No | No |
taskClick |
Se desencadena cuando el usuario selecciona una tarea. | taskcon la clase plannerTask seleccionada |
No | No | No |
taskRemoved |
Se desencadena cuando se elimina una tarea existente. | taskcon la clase plannerTask seleccionada |
No | No | No |
Para obtener más información sobre el control de eventos, vea eventos.
Plantillas
El planner 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 la data-type propiedad en uno de los valores 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 planner.
<mgt-planner>
<template data-type="task-details">
<div>Owner: {{task.owner}}</div>
<div>Importance Level: {{task.importance}}</div>
</template>
</mgt-planner>
Permisos de Microsoft Graph
Este control usa las siguientes API y permisos de Microsoft Graph. Para cada API llamada, el usuario debe tener al menos uno de los permisos enumerados.
| Configuración | Permiso | API |
|---|---|---|
| en todas las configuraciones | User.Read, User.ReadWrite | /me |
| comportamiento predeterminado | Tasks.Read, Group.Read.All, Tasks.ReadWrite, Group.ReadWrite.All | /me/planner/plans, /planner/plans/${planId}/buckets, /planner/buckets/${bucketId}/tasks |
groupId Establecer |
Tasks.Read, Group.Read.All, Tasks.ReadWrite, Group.ReadWrite.All | /groups/${group-id}/planner/plans, /planner/plans/${planId}/buckets, /planner/buckets/${bucketId}/tasks |
targetId Establecer |
Tasks.Read, Group.Read.All, Tasks.ReadWrite, Group.ReadWrite.All | /planner/plans/${planId}, /planner/plans/${planId}/buckets, /planner/buckets/${bucketId}/tasks |
| tarea de creación, actualización o eliminación | Tasks.ReadWrite, Group.ReadWrite.All | POST /planner/tasks, PATCH /planner/tasks/${taskId}, DELETE /planner/tasks/${taskId} |
Subcomponentes
El mgt-tasks componente consta de uno o varios subcomponentes que pueden requerir permisos distintos de los enumerados anteriormente. Para obtener más información, consulte la documentación de cada subcomponente:
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.
Localización
El control expone las siguientes variables que se pueden localizar. Para obtener más información sobre la localización, consulte Localización de componentes.
| Nombre de cadena | Valor predeterminado |
|---|---|
| removeTaskSubtitle | Delete Task |
| cancelNewTaskSubtitle | Cancel |
| newTaskPlaceholder | Adding a task... |
| addTaskButtonSubtitle | Add |
| pendiente | Due |
| addTaskDate | Add the task date |
| Asignar | Assign |
| planNotFound | Plan not found |
| plansSelfAssigned | All Plans |
| bucketNotFound | Bucket not found |
| bucketsSelfAssigned | All Tasks |
| baseSelfAssigned | Assigned to Me |
Comentarios
Próximamente: A lo largo de 2024 iremos eliminando gradualmente GitHub Issues como mecanismo de comentarios sobre el contenido y lo sustituiremos por un nuevo sistema de comentarios. Para más información, vea: https://aka.ms/ContentUserFeedback.
Enviar y ver comentarios de