Microsoft Teams-Kanalauswahlkomponente im Microsoft Graph-Toolkit

  • Artikel

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.

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