To Do-Komponente im Microsoft Graph-Toolkit

Artikel
11/07/2024

Die To Do-Komponente wird verwendet, um dem angemeldeten Benutzer das Anzeigen, Hinzufügen, Entfernen, Ausführen und/oder Bearbeiten von Aufgaben aus Microsoft To Do mithilfe der Aufgaben-API in Microsoft Graph zu ermöglichen.

Beispiel

Im folgenden Beispiel werden die Microsoft To Do-Aufgaben des angemeldeten Benutzers mithilfe der mgt-todo -Komponente angezeigt. Sie können den Code-Editor verwenden, um zu sehen, wie Eigenschaften das Verhalten der Komponente ändern.

HTML
React

Öffnen Sie dieses Beispiel in mgt.dev.

Eigenschaften

Sie können die folgenden Attribute und Eigenschaften verwenden, um die Komponente anzupassen.

Attribut	Eigenschaft	Beschreibung
Schreibgeschützt	readOnly	Ein boolescher Wert, um die Aufgabenschnittstelle auf schreibgeschützt festzulegen (kein Hinzufügen oder Entfernen von Aufgaben). Der Standardwert ist `false`.
initial-id="folder_id"	initialId	Eine Zeichenfolgen-ID, um den ursprünglich angezeigten Ordner auf die angegebene ID festzulegen.
target-id="folder_id"	targetId	Eine Zeichenfolgen-ID zum Sperren der Tasks-Schnittstelle für die angegebene Ordner-ID.
Nicht zutreffend	isNewTaskVisible	Bestimmt, ob die neue Aufgabenansicht beim Rendern sichtbar ist.
Nicht zutreffend	taskFilter	Eine optionale Funktion zum Filtern, welche Aufgaben dem Benutzer angezeigt werden.

Das folgende Beispiel zeigt nur Aufgaben aus dem Ordner mit der ID 12345 und erlaubt es dem Benutzer nicht, neue Aufgaben zu erstellen.

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

Benutzerdefinierte CSS-Variablen

Die mgt-todo Komponente definiert die folgenden benutzerdefinierten CSS-Eigenschaften.

<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;
}

Weitere Informationen finden Sie unter Formatieren von Komponenten.

Ereignisse

Die folgenden Ereignisse werden von der Komponente ausgelöst.

Ereignis	Wann wird es ausgegeben?	Benutzerdefinierte Daten	Annullierbar	Blasen	Funktioniert mit benutzerdefinierter Vorlage
`taskClick`	Wird ausgelöst, wenn der Benutzer auf eine Aufgabe klickt oder tippt	Ausgewählte Aufgabe	Nein	Nein	Nein

Weitere Informationen zum Behandeln von Ereignissen finden Sie unter Ereignisse.

Vorlagen

Die todo Komponente unterstützt mehrere Vorlagen , mit denen Sie bestimmte Teile der Komponente ersetzen können. Um eine Vorlage anzugeben, schließen Sie ein <template> Element in eine Komponente ein, und legen Sie auf data-type einen der folgenden Werte fest.

Datentyp	Datenkontext	Beschreibung
task	task: ein Aufgabenobjekt	Ersetzt die gesamte Standardaufgabe.
Aufgabendetails	task: ein Aufgabenobjekt	Die Vorlage ersetzt den Detailabschnitt der Aufgabe.

Im folgenden Beispiel wird eine Vorlage für die Aufgabenkomponente definiert.

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

Microsoft Graph-Berechtigungen

Dieses Steuerelement verwendet die folgenden Microsoft Graph-APIs und -Berechtigungen. Für jede aufgerufene API muss der Benutzer mindestens über eine der aufgeführten Berechtigungen verfügen.

Konfiguration	Berechtigung	API
`targetId` oder `initialId` festlegen	Tasks.Read, Tasks.ReadWrite	/me/todo/lists/${listId}, /me/todo/lists/{todoTaskListId}/tasks
`targetId` nicht festgelegt	Tasks.Read, Tasks.ReadWrite	/me/todo/lists, /me/todo/lists/{todoTaskListId}/tasks
Aufgabe erstellen, aktualisieren oder löschen	Tasks.ReadWrite	/me/todo/lists/{todoTaskListId}/tasks/{taskId}

Authentifizierung

Die Todo-Komponente verwendet den in der Authentifizierungsdokumentation beschriebenen globalen Authentifizierungsanbieter.

Cache

Die mgt-todo Komponente speichert keine Daten zwischen.

Lokalisierung

Das -Steuerelement macht die folgenden Variablen verfügbar, die lokalisiert werden können. Weitere Informationen finden Sie unter Lokalisieren von Komponenten.

Zeichenfolgenname	Standardwert
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`

Freigeben über