Planificateur composant dans le Kit de ressources Microsoft Graph
Le composant Planificateur permet à l’utilisateur d’afficher, d’ajouter, de supprimer, d’effectuer ou de modifier des tâches de Planificateur Microsoft.
En outre, un utilisateur peut affecter un ou plusieurs utilisateurs Microsoft Graph à une tâche. Pour plus d’informations sur les affectations Microsoft Graph, consultez plannerAssignments.
Importante
Avec la version @microsoft/mgt-components 4, le composant planificateur remplace l’ancien composant de tâche et ne prend plus en charge l’utilisation des tâches Outlook comme source de données.
Exemple
L’exemple suivant affiche les tâches Planificateur Microsoft de l’utilisateur connecté à l’aide du mgt-planner composant . Vous pouvez utiliser l’éditeur de code pour voir comment les propriétés modifient le comportement du composant.
Propriétés
| Attribut | Propriété | Description |
|---|---|---|
| en lecture seule | Readonly | Boolean pour définir l’interface de tâche en lecture seule (pas d’ajout ou de suppression de tâches). La valeur par défaut est false. |
| hide-header | hideHeader | Boolean pour afficher ou masquer l’en-tête du composant. La valeur par défaut est false. |
| hide-options | hideOptions | Boolean pour afficher ou masquer les options dans les tâches. La valeur par défaut est false. |
| initial-id="planner_id/folder_id » | initialId | ID de chaîne pour définir le plan initialement affiché sur l’ID fourni. |
| initial-bucket-id="bucket_id » | initialBucketId | ID de chaîne pour définir le compartiment initialement affiché sur l’ID fourni. |
| target-id="planner_id/folder_id » | targetId | ID de chaîne pour verrouiller l’interface de tâches sur l’ID de plan fourni. |
| target-bucket-id="bucket_id » | targetBucketId | ID de chaîne pour verrouiller l’interface de tâches sur l’ID de compartiment fourni. |
| group-id | groupId | ID de chaîne pour verrouiller l’interface de tâches sur l’ID de groupe. |
| - | isNewTaskVisible | Détermine si la nouvelle vue des tâches est visible au niveau du rendu. |
| - | taskFilter | Fonction facultative permettant de filtrer les tâches affichées à l’utilisateur. |
L’exemple suivant montre uniquement les tâches de Planificateur avec l’ID 12345 et n’autorise pas l’utilisateur à créer de nouvelles tâches.
<mgt-planner read-only initial-id="12345"></mgt-planner>
L’exemple suivant montre comment filtrer les tâches dont la catégorie 3 est définie uniquement.
let taskView = document.querySelector("mgt-planner");
taskView.taskFilter = (task) => task.appliedCategories.category3 === true;
Variables CSS personnalisées
<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;
}
Pour en savoir plus, consultez composants de style.
Événements
| Événement | Quand est-il émis | Données personnalisées | Annulable | Bulles | Fonctionne avec un modèle personnalisé |
|---|---|---|---|---|---|
taskAdded |
Se déclenche lorsqu’une tâche est créée | PlannerTask nouvellement créé | Non | Non | Oui |
taskChanged |
Se déclenche lorsque les métadonnées de tâche sont modifiées, comme le marquage terminé | Mise à jour d’un plannerTask | Non | Non | Non |
taskClick |
Se déclenche lorsque l’utilisateur sélectionne une tâche | taskavec la propriété plannerTask sélectionnée |
Non | Non | Non |
taskRemoved |
Se déclenche lorsqu’une tâche existante est supprimée | taskavec la propriété plannerTask sélectionnée |
Non | Non | Non |
Pour plus d’informations sur la gestion des événements, consultez événements.
Modèles
Le planner composant prend en charge plusieurs modèles qui vous permettent de remplacer certaines parties du composant. Pour spécifier un modèle, incluez un <template> élément à l’intérieur d’un composant et définissez la data-type propriété sur l’une des valeurs suivantes :
| Type de données | Contexte de données | Description |
|---|---|---|
| tâche | task : objet de tâche de planificateur | remplace l’intégralité de la tâche par défaut. |
| détails de la tâche | task : objet de tâche de planificateur | le modèle remplace la section détails de la tâche. |
L’exemple suivant définit un modèle pour le composant planificateur.
<mgt-planner>
<template data-type="task-details">
<div>Owner: {{task.owner}}</div>
<div>Importance Level: {{task.importance}}</div>
</template>
</mgt-planner>
Autorisations de Microsoft Graph
Ce contrôle utilise les API et autorisations Microsoft Graph suivantes. Pour chaque API appelée, l’utilisateur doit disposer d’au moins l’une des autorisations répertoriées.
| Configuration | Autorisation | API |
|---|---|---|
| dans toutes les configurations | User.Read, User.ReadWrite | /Moi |
| comportement par défaut | Tasks.Read, Group.Read.All, Tasks.ReadWrite, Group.ReadWrite.All | /me/planner/plans, /planner/plans/${planId}/buckets, /planner/buckets/${bucketId}/tasks |
groupId Ensemble |
Tasks.Read, Group.Read.All, Tasks.ReadWrite, Group.ReadWrite.All | /groups/${group-id}/planner/plans, /planner/plans/${planId}/buckets, /planner/buckets/${bucketId}/tasks |
targetId Ensemble |
Tasks.Read, Group.Read.All, Tasks.ReadWrite, Group.ReadWrite.All | /planner/plans/${planId}, /planner/plans/${planId}/buckets, /planner/buckets/${bucketId}/tasks |
| créer, mettre à jour ou supprimer une tâche | Tasks.ReadWrite, Group.ReadWrite.All | POST /planner/tasks, PATCH /planner/tasks/${taskId}, DELETE /planner/tasks/${taskId} |
Sous-composants
Le mgt-tasks composant se compose d’un ou plusieurs sous-composants qui peuvent nécessiter d’autres autorisations que celles répertoriées précédemment. Pour plus d’informations, consultez la documentation de chaque sous-composant :
Authentification
Le composant tâches utilise le fournisseur d’authentification global décrit dans la documentation sur l’authentification.
Cache
Le mgt-tasks composant ne met pas en cache de données.
Localisation
Le contrôle expose les variables suivantes qui peuvent être localisées. Pour plus d’informations sur la localisation, consultez Localisation des composants.
| Nom de la chaîne | Valeur par défaut |
|---|---|
| removeTaskSubtitle | Delete Task |
| cancelNewTaskSubtitle | Cancel |
| newTaskPlaceholder | Adding a task... |
| addTaskButtonSubtitle | Add |
| Due | Due |
| addTaskDate | Add the task date |
| Attribuer | Assign |
| planNotFound | Plan not found |
| plansSelfAssigned | All Plans |
| bucketNotFound | Bucket not found |
| bucketsSelfAssigned | All Tasks |
| baseSelfAssigned | Assigned to Me |
Commentaires
Bientôt disponible : Tout au long de 2024, nous allons supprimer progressivement GitHub Issues comme mécanisme de commentaires pour le contenu et le remplacer par un nouveau système de commentaires. Pour plus d’informations, consultez https://aka.ms/ContentUserFeedback.
Envoyer et afficher des commentaires pour