Freigeben über

To Do-Komponente im Microsoft Graph-Toolkit

  • Artikel

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.

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.
hide-header hideHeader Ein boolescher Wert zum Ein- oder Ausblenden des Headers der Komponente. Der Standardwert ist false.
Ausblendenoptionen hideOptions Ein boolescher Wert zum Ein- oder Ausblenden der Optionen in 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 Abbrechbare 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