Componente selector de canales de Microsoft Teams en Microsoft Graph Toolkit
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 {
--input-border: 2px rgba(255, 255, 255, 0.5) solid; /* sets all input area border */
/* OR individual input border sides */
--input-border-bottom: 2px rgba(255, 255, 255, 0.5) solid;
--input-border-right: 2px rgba(255, 255, 255, 0.5) solid;
--input-border-left: 2px rgba(255, 255, 255, 0.5) solid;
--input-border-top: 2px rgba(255, 255, 255, 0.5) solid;
--input-background-color: #1f1f1f; /* input area background color */
--input-border-color--hover: #008394; /* input area border hover color */
--input-border-color--focus: #0f78d4; /* input area border focus color */
--dropdown-background-color: #1f1f1f; /* channel background color */
--dropdown-item-hover-background: #333d47; /* channel or team hover background */
--dropdown-item-selected-background: #0F78D4; /* selected channel background color */
--color: white; /* input area border focus color */
--arrow-fill: #ffffff;
--placeholder-color: #f1f1f1; /* placeholder text color */
--placeholder-color--focus: rgba(255, 255, 255, 0.8); /* place holder text focus color */
}
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 el data-type valor en uno de los siguientes.
| Tipo de datos | Contexto de datos | Descripción |
|---|---|---|
| Carga | null: sin datos | Plantilla usada para representar el estado del selector mientras se realiza la solicitud a Microsoft Graph. |
| error | null: sin datos | Plantilla usada si la búsqueda de usuarios 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.
| API | Permiso |
|---|---|
| /me/joinedTeams | User.Read.All |
| /teams/${id}/channels | Group.Read.All |
En la versión 2.2, los permisos necesarios se han actualizado a los permisos menos restrictivos basados en Teams. Para evitar un cambio importante, debe participar en los nuevos permisos a través de una configuración global.
import {MgtTeamsChannelPicker} from "@microsoft/mgt-components";
MgtTeamsChannelPicker.config.useTeamsBasedScopes = true;
Con useTeamsBasedScopes establecido en true, el selector de canales de Teams usará los ámbitos siguientes.
| API | Permiso |
|---|---|
| /me/joinedTeams | Team.ReadBasic.All |
| /teams/${id}/channels | Channel.ReadBasic.All |
Estos serán los permisos predeterminados en la siguiente actualización principal.
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 la invalidación 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. |