Componente Selector de canales de Microsoft Teams en Microsoft Graph Toolkit

Article
02/14/2024

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.

HTML
React

Abra este ejemplo en mgt.dev.

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:` equipo de 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`

Comparteix a través de