Planner-Komponente im Microsoft Graph-Toolkit

  • Artikel

Die komponente Planner ermöglicht es dem Benutzer, Aufgaben aus Microsoft Planner anzuzeigen, hinzuzufügen, zu entfernen, abzuschließen oder zu bearbeiten.

Darüber hinaus kann ein Benutzer einer Aufgabe einen einzelnen oder mehrere Microsoft Graph-Benutzer zuweisen. Weitere Informationen zu Microsoft Graph-Zuweisungen finden Sie unter plannerAssignments.

Wichtig

Mit der Veröffentlichung von @microsoft/mgt-components Version 4 ersetzt die Planner-Komponente die alte Aufgabenkomponente und unterstützt die Verwendung von Outlook-Aufgaben als Datenquelle nicht mehr.

Beispiel

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

Eigenschaften

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="planner_id/folder_id" initialId Eine Zeichenfolgen-ID, um den ursprünglich angezeigten Plan auf die angegebene ID festzulegen.
initial-bucket-id="bucket_id" initialBucketId Eine Zeichenfolgen-ID, um den anfänglich angezeigten Bucket auf die angegebene ID festzulegen.
target-id="planner_id/folder_id" targetId Eine Zeichenfolgen-ID, um die Aufgabenschnittstelle für die angegebene Plan-ID zu sperren.
target-bucket-id="bucket_id" targetBucketId Eine Zeichenfolgen-ID zum Sperren der Tasks-Schnittstelle für die bereitgestellte Bucket-ID.
group-id groupId Eine Zeichenfolgen-ID zum Sperren der Aufgabenschnittstelle für die Gruppen-ID.
- isNewTaskVisible Bestimmt, ob die neue Aufgabenansicht beim Rendern sichtbar ist.
- taskFilter Eine optionale Funktion zum Filtern, welche Aufgaben dem Benutzer angezeigt werden.

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

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

Das folgende Beispiel zeigt, wie Aufgaben gefiltert werden, für die nur kategorie3 festgelegt ist.

let taskView = document.querySelector("mgt-planner");
taskView.taskFilter = (task) => task.appliedCategories.category3 === true;

Benutzerdefinierte CSS-Variablen

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

Weitere Informationen finden Sie unter Formatieren von Komponenten.

Ereignisse

Ereignis Wann wird es ausgegeben? Benutzerdefinierte Daten Abbrechbare Blasen Funktioniert mit benutzerdefinierter Vorlage
taskAdded Wird ausgelöst, wenn eine neue Aufgabe erstellt wird. Neu erstellte plannerTask Nein Nein Ja
taskChanged Wird ausgelöst, wenn Aufgabenmetadaten geändert werden, z. B. als "Abgeschlossen" markieren PlannerTask aktualisiert Nein Nein Nein
taskClick Wird ausgelöst, wenn der Benutzer eine Aufgabe auswählt. task -Eigenschaft mit dem ausgewählten plannerTask Nein Nein Nein
taskRemoved Wird ausgelöst, wenn eine vorhandene Aufgabe gelöscht wird. task -Eigenschaft mit dem ausgewählten plannerTask Nein Nein Nein

Weitere Informationen zum Behandeln von Ereignissen finden Sie unter Ereignisse.

Vorlagen

Die planner 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 die data-type Eigenschaft auf einen der folgenden Werte fest:

Datentyp Datenkontext Beschreibung
task task: ein Planeraufgabenobjekt ersetzt die gesamte Standardaufgabe.
Aufgabendetails task: ein Planeraufgabenobjekt template ersetzt den Detailabschnitt der Aufgabe.

Im folgenden Beispiel wird eine Vorlage für die Planner-Komponente definiert.

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

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
in allen Konfigurationen User.Read, User.ReadWrite /Ich
Standardverhalten Tasks.Read, Group.Read.All, Tasks.ReadWrite, Group.ReadWrite.All /me/planner/plans, /planner/plans/${planId}/buckets, /planner/buckets/${bucketId}/tasks
groupId Festgelegt Tasks.Read, Group.Read.All, Tasks.ReadWrite, Group.ReadWrite.All /groups/${group-id}/planner/plans, /planner/plans/${planId}/buckets, /planner/buckets/${bucketId}/tasks
targetId Festgelegt Tasks.Read, Group.Read.All, Tasks.ReadWrite, Group.ReadWrite.All /planner/plans/${planId}, /planner/plans/${planId}/buckets, /planner/buckets/${bucketId}/tasks
Aufgabe erstellen, aktualisieren oder löschen Tasks.ReadWrite, Group.ReadWrite.All POST /planner/tasks, PATCH /planner/tasks/${taskId}, DELETE /planner/tasks/${taskId}

Unterkomponenten

Die mgt-tasks Komponente besteht aus einem oder mehreren Unterkomponenten, die möglicherweise andere Als die zuvor aufgeführten Berechtigungen erfordern. Weitere Informationen finden Sie in der Dokumentation zu den einzelnen Unterkomponenten:

Authentifizierung

Die Aufgabenkomponente verwendet den in der Authentifizierungsdokumentation beschriebenen globalen Authentifizierungsanbieter.

Cache

Die mgt-tasks Komponente speichert keine Daten zwischen.

Lokalisierung

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

Zeichenfolgenname Standardwert
removeTaskSubtitle Delete Task
cancelNewTaskSubtitle Cancel
newTaskPlaceholder Adding a task...
addTaskButtonSubtitle Add
es ist an der Zeit Due
addTaskDate Add the task date
Zuweisen Assign
planNotFound Plan not found
plansSelfAssigned All Plans
bucketNotFound Bucket not found
bucketsSelfAssigned All Tasks
baseSelfAssigned Assigned to Me