Partager via


Composant To Do dans le Kit de ressources Microsoft Graph

Le composant To Do permet à l’utilisateur connecté d’afficher, d’ajouter, de supprimer, d’effectuer et/ou de modifier des tâches à partir de Microsoft To Do à l’aide de l’API To Do dans Microsoft Graph.

Exemple

L’exemple suivant affiche les tâches Microsoft To Do de l’utilisateur connecté à l’aide du mgt-todo composant . Vous pouvez utiliser l’éditeur de code pour voir comment les propriétés modifient le comportement du composant.

Propriétés

Vous pouvez utiliser les attributs et propriétés suivants pour personnaliser le composant.

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.
initial-id="folder_id » initialId ID de chaîne pour définir le dossier initialement affiché sur l’ID fourni.
target-id="folder_id » targetId ID de chaîne pour verrouiller l’interface de tâches sur l’ID de dossier fourni.
S/O isNewTaskVisible Détermine si la nouvelle vue des tâches est visible au niveau du rendu.
S/O taskFilter Fonction facultative permettant de filtrer les tâches affichées à l’utilisateur.

L’exemple suivant montre uniquement les tâches du dossier avec l’ID 12345 et n’autorise pas l’utilisateur à créer de nouvelles tâches.

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

Variables CSS personnalisées

Le mgt-todo composant définit les propriétés personnalisées CSS suivantes.

<mgt-todo class="todo"></mgt-todo>
.todo {
    --task-new-cancel-button-color: blue;
    --task-detail-color: purple;
    --task-color: black;
    --task-background-color: white;
    --task-complete-background-color: grey;
    --task-date-input-active-color: blue;
    --task-date-input-hover-color: green;
    --task-background-color-hover: grey;
    --task-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    --task-border: 1px solid black;
    --task-border-completed: 1px solid grey;
    --task-radio-background-color: green;
}

Pour en savoir plus, consultez composants de style.

Événements

Les événements suivants sont déclenchés à partir du composant .

Événement Quand est-il émis Données personnalisées Annulable Bulles Fonctionne avec un modèle personnalisé
taskClick Se déclenche lorsque l’utilisateur clique ou appuie sur une tâche Tâche sélectionnée Non Non Non

Pour plus d’informations sur la gestion des événements, consultez événements.

Modèles

Le todo 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 sur l’une data-type des valeurs suivantes.

Type de données Contexte de données Description
tâche task : objet de tâche To Do Remplace la tâche par défaut entière.
détails de la tâche task : objet de tâche To Do Le modèle remplace la section détails de la tâche.

L’exemple suivant définit un modèle pour le composant de tâches.

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

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
targetId ou initialId définir Tasks.Read, Tasks.ReadWrite /me/todo/lists/${listId}, /me/todo/lists/{todoTaskListId}/tasks
targetId non défini Tasks.Read, Tasks.ReadWrite /me/todo/lists, /me/todo/lists/{todoTaskListId}/tasks
créer, mettre à jour ou supprimer une tâche Tasks.ReadWrite /me/todo/lists/{todoTaskListId}/tasks/{taskId}

Authentification

Le composant todo utilise le fournisseur d’authentification global décrit dans la documentation sur l’authentification.

Cache

Le mgt-todo 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, consultez Localisation des composants.

Nom de la chaîne Valeur par défaut
cancelNewTaskSubtitle Cancel
newTaskPlaceholder Add a task
newTaskLabel New Task Input
addTaskButtonSubtitle Add
deleteTaskLabel Delete Task
dueDate Due date
newTaskDateInputLabel New Task Date Input
newTaskNameInputLabel New Task Name Input
cancelAddingTask Cancel adding a new task