Microsoft Teams Componente selector de canales en microsoft Graph Toolkit

A puede usar el componente para habilitar las búsquedas mgt-teams-channel-picker de Microsoft Teams asociados con 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. Comience a buscar un canal o equipo para ver los resultados representados.

Abra este ejemplo en mgt.dev

Obtener el canal seleccionado

Use la propiedad para recuperar el canal y el selectedItem equipo primario seleccionados actualmente. Este valor será nulo 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 Teams canal solo admite la selección de un 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) deben 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 */
}

Events

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

Para obtener más información acerca del control de eventos, vea eventos.

Plantillas

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

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

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 de Microsoft Graph y permisos 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 Teams basados en datos. 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 , el selector Teams canal usará los siguientes true ámbitos.

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 métodos para invalidar protected render* las extensiones de componentes:

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 el desplegable.
renderDropdownList Representa los elementos del 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 desplegable de carga.
renderError Representa el estado de error desplegable.