Microsoft Teams-Kanalauswahlkomponente im Microsoft Graph-Toolkit

Artikel
11/07/2024

Sie können die mgt-teams-channel-picker -Komponente verwenden, um Suchvorgänge nach Microsoft Teams-Kanälen zu aktivieren, die einem Benutzer zugeordnet sind. Die Komponente kann alle Teams, denen der Benutzer beigetreten ist, und jeden Kanal in diesen Teams durchsuchen.

Beispiel

Das folgende Beispiel zeigt die mgt-teams-channel-picker -Komponente. Beginnen Sie mit der Suche nach einem Kanal oder Team, um das Rendern der Ergebnisse anzuzeigen.

HTML
React

Öffnen Sie dieses Beispiel in mgt.dev.

Abrufen des ausgewählten Kanals

Verwenden Sie die selectedItem -Eigenschaft, um den aktuell ausgewählten Kanal und übergeordnetes Team abzurufen. Dieser Wert ist NULL, wenn kein Kanal ausgewählt wurde. selectedItem enthält zwei Eigenschaften: channel (MicrosoftGraph.Channel) und team (MicrosoftGraph.Team).

const channelPicker = document.querySelector("mgt-teams-channel-picker");
console.log(channelPicker.selectedItem.channel);
console.log(channelPicker.selectedItem.team);

Auswählen eines Kanals

Verwenden Sie die selectChannelById(channelId: string) -Methode, um einen Kanal programmgesteuert auszuwählen.

Hinweis: Die Teams-Kanalauswahl unterstützt nur die Auswahl eines einzelnen Kanals.

const channelPicker = document.querySelector("mgt-teams-channel-picker");
const channelId = "some-channel-id";
channelPicker.selectChannelById(channelId);

Hinweis: Der bereitgestellte Kanal (und die nachfolgende ID) muss zu einem Team gehören, dem der authentifizierte Benutzer beigetreten ist.

Benutzerdefinierte CSS-Eigenschaften

Die mgt-teams-channel-picker Komponente definiert die folgenden benutzerdefinierten CSS-Eigenschaften.

<mgt-teams-channel-picker
  class="teams-channel-picker"
  person-query="me"
></mgt-teams-channel-picker>

.teams-channel-picker {
  --channel-picker-input-border: 2px rgba(255, 255, 255, 0.5) solid; /* sets all input area border */

  --channel-picker-input-background-color: #1f1f1f; /* input area background color */
  --channel-picker-input-background-color-hover: #008394; /* input area border hover color */
  --channel-picker-input-background-color-focus: #0f78d4; /* input area border focus color */

  --channel-picker-dropdown-background-color: brown; /* channel background color */
  --channel-picker-dropdown-item-text-color: #fff;
  --channel-picker-dropdown-item-background-color-hover: #333d47; /* channel or team hover background */
  --channel-picker-dropdown-item-text-color-selected: #0f78d4; /* selected channel background color */

  --channel-picker-color: white; /* input area border focus color */
  --channel-picker-arrow-fill: #ffffff;
  --channel-picker-input-placeholder-text-color: #f1f1f1; /* placeholder text color */
  --channel-picker-input-placeholder-text-color-hover: rgba(
    255,
    255,
    255,
    0.8
  ); /* place holder text focus color */
  --channel-picker-input-placeholder-text-color-focus: rgba(
    255,
    255,
    255,
    0.8
  ); /* place holder text focus color */

  --channel-picker-search-icon-color: yellow;
  --channel-picker-close-icon-color: yellow;
  --channel-picker-down-chevron-color: yellow;
  --channel-picker-up-chevron-color: yellow;
}

Weitere Informationen finden Sie unter Formatieren von Komponenten.

Ereignisse

Ereignis	Wann wird es ausgegeben?	Benutzerdefinierte Daten	Abbrechbare	Blasen	Funktioniert mit benutzerdefinierter Vorlage
`selectionChanged`	Wird ausgelöst, wenn der Benutzer eine Änderung an der Auswahl eines Kanals vornimmt.	Das aktuell ausgewählte Element als `{ channel:` Kanalteam`, team:` `}`	Nein	Nein	Ja

Weitere Informationen zum Behandeln von Ereignissen finden Sie unter Ereignisse.

Vorlagen

mgt-teams-channel-picker 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
Laden	null: keine Daten	Die Vorlage, die zum Rendern des Zustands der Auswahl verwendet wird, während eine Anforderung an Microsoft Graph gestellt wird.
error	null: keine Daten	Die Vorlage, die verwendet wird, wenn eine Benutzersuche keine Benutzer zurückgibt.

Im folgenden Beispiel wird die Verwendung der error Vorlage veranschaulicht.

<mgt-teams-channel-picker>
  <template data-type="error">
    <p>Sorry, no Teams or Channels were found</p>
  </template>
</mgt-teams-channel-picker>

Microsoft Graph-Berechtigungen

Diese Komponente verwendet standardmäßig 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
Standard	Team.ReadBasic.All, TeamSettings.Read.All, TeamSettings.ReadWrite.All, User.Read.All, User.ReadWrite.All	/me/joinedTeams
Standard	Team.ReadBasic.All TeamSettings.Read.All, TeamSettings.ReadWrite.All	/teams/${teamId}/photo/$value
Standard	Channel.ReadBasic.All, ChannelSettings.Read.All, ChannelSettings.ReadWrite.All	/teams/${id}/channels

Authentifizierung

Das Steuerelement verwendet den in der Authentifizierungsdokumentation beschriebenen globalen Authentifizierungsanbieter.

Cache

Die mgt-teams-channel-picker Komponente speichert keine Daten zwischen.

Erweitern für mehr Kontrolle

Für komplexere Szenarien oder eine wirklich benutzerdefinierte Benutzeroberfläche macht diese Komponente mehrere protected render* Methoden zum Überschreiben in Komponentenerweiterungen verfügbar:

Methode	Beschreibung
renderSelected	Rendert das ausgewählte Team und den ausgewählten Kanal im Eingabefeld.
renderInput	Rendert das Eingabefeld.
renderDropdown	Rendert die Dropdownliste.
renderDropdownList	Rendert die Elemente in der Dropdownliste rekursiv.
Renderitem	Rendert ein Team oder einen Kanal in der Dropdownliste.
renderHighlightedText	Rendert den Kanaltext, wobei die Eingabeabfrage hervorgehoben wird.
renderLoading	Rendert den Dropdownzustand des Ladevorgangs.
renderError	Rendert den Dropdownfehlerzustand.

Lokalisierung

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

Zeichenfolgenname	Standardwert
closeButtonAriaLabel	`remove the selected channel`
inputPlaceholderText	`Select a channel`
loadingMessage	`Loading...`
noResultsFound	`We didn't find any matches.`
photoFor	`Teams photo for`
teamsChannels	`Teams and channels results`

Freigeben über