Planner-Komponente im Microsoft Graph-Toolkit

Artikel
07.11.2024

Mit der Planner-Komponente kann der Benutzer Aufgaben in Microsoft Planner anzeigen, hinzufügen, entfernen, abschließen oder 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.

HTML
React

Öffnen Sie dieses Beispiel in mgt.dev.

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.

HTML

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

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

JavaScript

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

Benutzerdefinierte CSS-Variablen

HTML

<mgt-planner class="tasks"></mgt-planner>

css

.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;
  
  /** affects the options menu */
  --dot-options-menu-background-color: yellow;
  --dot-options-menu-shadow-color: yellow;
  --dot-options-menu-item-color: maroon;
  --dot-options-menu-item-hover-background-color: white;
}

Weitere Informationen finden Sie unter Formatieren von Komponenten.

Ereignisse

Ereignis	Wann wird es ausgegeben?	Benutzerdefinierte Daten	Annullierbar	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.

HTML

<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` Garnitur	Tasks.Read, Group.Read.All, Tasks.ReadWrite, Group.ReadWrite.All	/groups/${group-id}/planner/plans, /planner/plans/${planId}/buckets, /planner/buckets/${bucketId}/tasks
`targetId` Garnitur	Tasks.Read, Group.Read.All, Tasks.ReadWrite, Group.ReadWrite.All	/planner/plans/${planId}, /planner/plans/${planId}/buckets, /planner/buckets/${bucketId}/tasks
Aufgabe zum 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`

Zusätzliche Ressourcen

Dokumentation

Pläne auflisten - Microsoft Graph beta

Ruft eine Liste von **plannerPlan**-Objekten ab, die einem Gruppenobjekt gehören.
Aufgaben auflisten - Microsoft Graph beta

Ruft eine Liste von **plannertask**-Objekten ab, die einem Benutzer zugewiesen sind.
plannerPlan löschen - Microsoft Graph v1.0

Löschen sie ein plannerPlan-Objekt.
Übersicht über Planner-Aufgaben und Pläne-API - Microsoft Graph

Verwenden Sie die Planner-API in Microsoft Graph, um Pläne zu erstellen, Aufgaben zu organisieren und zuzuweisen, Fortschritte zu teilen und gemeinsam an Inhalten zu arbeiten. Sehen Sie sich die wichtigsten Aufgaben der Planner-API an.
Verwenden der Planner-REST-API - Microsoft Graph v1.0

Mit der Planner-API in Microsoft Graph können Sie Aufgaben erstellen und diese Benutzern in einer Microsoft 365-Gruppe zuweisen.
plannerUser abrufen - Microsoft Graph beta

Dient zum Abrufen der Eigenschaften und der Beziehungen des plannerUser-Objekts. Zu den zurückgegebenen Eigenschaften gehören die bevorzugten Pläne des Benutzers und die zuletzt angezeigten Pläne.
plannerPlan erstellen - Microsoft Graph beta

Erstellen Sie einen neuen Planerplan.
plannerBucket erstellen - Microsoft Graph beta

Erstellen Sie ein neues plannerBucket-Objekt.

Training

Modul

Anpassen der Darstellung von Microsoft Graph-Toolkit-Komponenten mittels Vorlagen - Training

Microsoft Graph-Toolkit-Komponenten können flexibel angepasst werden. Sie können die Darstellung von Microsoft Graph-Toolkit-Komponenten mittels Vorlagen verändern und Techniken zur Problembehandlung beim Rendern erlernen.

Die Zukunft gehört Ihnen

Freigeben über

Planner-Komponente im Microsoft Graph-Toolkit

Beispiel

Eigenschaften

Benutzerdefinierte CSS-Variablen

Ereignisse

Vorlagen

Microsoft Graph-Berechtigungen

Unterkomponenten

Authentifizierung

Cache

Lokalisierung

Feedback

Zusätzliche Ressourcen