Componente Selector de canales de Microsoft Teams en Microsoft Graph Toolkit

  • Artículo

Puede usar el mgt-teams-channel-picker componente para habilitar las búsquedas de canales de Microsoft Teams asociados a un usuario. El componente puede buscar en todos los equipos a los que se ha unido el usuario y en cada canal de esos equipos.

Ejemplo

En el ejemplo siguiente se muestra el mgt-teams-channel-picker componente . Empiece a buscar un canal o un equipo para ver la representación de los resultados.

Obtención del canal seleccionado

Use la selectedItem propiedad para recuperar el canal seleccionado actualmente y el equipo primario. Este valor será null si no se ha seleccionado ningún canal. selectedItem contiene dos propiedades: channel (MicrosoftGraph.Channel) y team (MicrosoftGraph.Team).

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

Selección de un canal

Use el selectChannelById(channelId: string) método para seleccionar mediante programación un canal.

Nota: El selector de canales de Teams solo admite la selección de un solo canal.

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

Nota: El canal proporcionado (y el identificador posterior) debe pertenecer a un equipo al que se haya unido el usuario autenticado.

Propiedades personalizadas css

El mgt-teams-channel-picker componente define las siguientes propiedades personalizadas CSS.

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

Para obtener más información, consulte Componentes de estilo.

Eventos

Evento Cuándo se emite Datos personalizados Cancelable Burbujas Funciona con una plantilla personalizada
selectionChanged Se desencadena cuando el usuario realiza un cambio en la selección de un canal. Elemento seleccionado actualmente como { channel: equipode canal, team: } No No Sí

Para obtener más información sobre el control de eventos, vea eventos.

Plantillas

mgt-teams-channel-picker admite varias plantillas que puede usar para reemplazar ciertas partes del componente. Para especificar una plantilla, incluya un <template> elemento dentro de un componente y establezca en data-type uno de los siguientes valores.

Tipo de datos Contexto de datos Descripción
Carga null: sin datos La plantilla usada para representar el estado del selector mientras se realiza una solicitud a Microsoft Graph.
error null: sin datos Plantilla usada si una búsqueda de usuario no devuelve ningún usuario.

En el ejemplo siguiente se muestra cómo usar la error plantilla.

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

Permisos de Microsoft Graph

Este componente usa las siguientes API y permisos de Microsoft Graph de forma predeterminada. Para cada API llamada, el usuario debe tener al menos uno de los permisos enumerados.

Configuración Permiso API
Es el valor predeterminado. Team.ReadBasic.All, TeamSettings.Read.All, TeamSettings.ReadWrite.All, User.Read.All, User.ReadWrite.All /me/joinedTeams
Es el valor predeterminado. Team.ReadBasic.All TeamSettings.Read.All, TeamSettings.ReadWrite.All /teams/${teamId}/photo/$value
Es el valor predeterminado. Channel.ReadBasic.All, ChannelSettings.Read.All, ChannelSettings.ReadWrite.All /teams/${id}/channels

Autenticación

El control usa el proveedor de autenticación global descrito en la documentación de autenticación.

Caché

El mgt-teams-channel-picker componente no almacena en caché ningún dato.

Ampliar para obtener más control

Para escenarios más complejos o una experiencia de usuario realmente personalizada, este componente expone varios protected render* métodos para invalidar en extensiones de componente:

Método Descripción
renderSelected Representa el equipo y el canal seleccionados en el cuadro de entrada.
renderInput Representa el cuadro de entrada.
renderDropdown Representa la lista desplegable.
renderDropdownList Representa los elementos de la lista desplegable de forma recursiva.
renderItem Representa un equipo o un canal en la lista desplegable.
renderHighlightedText Representa el texto del canal, resaltando la consulta de entrada.
renderLoading Representa el estado de la lista desplegable de carga.
renderError Representa el estado de error de la lista desplegable.

Localización

El control expone las siguientes variables que se pueden localizar. Para obtener más información sobre cómo configurar la localización, consulte Localización de componentes.

Nombre de cadena Valor predeterminado
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