Composant To Do dans le Kit de ressources Microsoft Graph

Article
11/07/2024

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.

HTML
React

Ouvrez cet exemple dans mgt.dev.

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`

Partager via