Microsoft Teams-Kanalauswahlkomponente im Microsoft Graph-Toolkit

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

Anmerkung: 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

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.

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.

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:

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.