Componente del selector de canales de Microsoft Teams en el kit de herramientas de Microsoft GraphMicrosoft Teams Channel Picker component in the Microsoft Graph Toolkit

A puede usar el componente mgt-teams-channel-picker para habilitar las búsquedas de canales de Microsoft Teams asociadas con un usuario.A you can use the mgt-teams-channel-picker component to enable searches for Microsoft Teams channels associated with a user. El componente puede buscar en todos los equipos a los que se ha unido el usuario y en cada canal de esos equipos.The component can search all teams the user has joined, and each channel in those teams.

EjemploExample

En el ejemplo siguiente se mgt-teams-channel-picker muestra el componente.The following example shows the mgt-teams-channel-picker component. Inicie la búsqueda de un canal o un equipo para ver los resultados representativos.Start searching for a channel or team to see the results render.

Abra este ejemplo en manits. devOpen this example in mgt.dev

Obtener el canal seleccionadoGetting the selected channel

Use la selectedItem propiedad para recuperar el canal y el equipo primario seleccionados actualmente.Use the selectedItem property to retrieve the currently selected channel and parent team. Este valor será NULL si no se ha seleccionado ningún canal.This value will be null if no channel has been selected. selectedItemcontiene dos propiedades: channel (MicrosoftGraph. Channel) y team (MicrosoftGraph. Team).selectedItem contains two properties: channel (MicrosoftGraph.Channel) and 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 canalSelecting a channel

Use el selectChannelById(channelId: string) método para seleccionar un canal mediante programación.Use the selectChannelById(channelId: string) method to programmatically select a channel.

Nota: el selector de canales de Microsoft Teams solo admite la selección de un solo canal.Note: the Teams channel picker only supports single channel selection.

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

Nota: El canal proporcionado (y el siguiente identificador) debe pertenecer a un equipo al que se unió el usuario autenticado.Note: The provided channel (and subsequent ID) must belong to a team that the authenticated user has joined.

Propiedades personalizadas de CSSCSS custom properties

El mgt-teams-channel-picker componente define las siguientes propiedades personalizadas CSS.The mgt-teams-channel-picker component defines the following CSS custom properties.

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-hover-color: #008394; /* input area border hover color */
    --input-focus-color: #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 */

    --font-color: white; /* input area border focus color */
    --arrow-fill: #ffffff;
    --placeholder-focus-color: rgba(255, 255, 255, 0.8); /* place holder text focus color */
}

EventosEvents

EventoEvent DetalleDetail DescripciónDescription
selectionChangedselectionChanged El detalle contiene el elemento seleccionado actualmente de {channel : MicrosoftGraph. Channel, team: MicrosoftGraph. Team}The detail contains the currently selected item of {channel : MicrosoftGraph.Channel, team: MicrosoftGraph.Team} Se activa cuando el usuario realiza un cambio en la selección de un canal.Fired when user makes a change in selection of a channel.

PlantillasTemplates

mgt-teams-channel-pickeradmite varias plantillas que puede usar para reemplazar ciertas partes del componente.mgt-teams-channel-picker supports several templates that you can use to replace certain parts of the component. Para especificar una plantilla, incluya un <template> elemento dentro de un componente y establezca data-type el valor en uno de los siguientes valores.To specify a template, include a <template> element inside a component and set the data-type value to one of the following.

Tipo de datosData type Contexto de datosData context DescripciónDescription
cargamentoloading NULL: no hay datosnull: no data Plantilla que se usa para representar el estado del selector mientras se realiza la solicitud a Microsoft Graph.The template used to render the state of the picker while the request to Microsoft Graph is being made.
errorerror NULL: no hay datosnull: no data La plantilla que se usa si la búsqueda de usuarios no devuelve ningún usuario.The template used if user search returns no users.

En el ejemplo siguiente se muestra cómo usar error la plantilla.The following example shows how to use the error template.

<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 GraphMicrosoft Graph permissions

Este componente usa las siguientes API y permisos de Microsoft Graph.This component uses the following Microsoft Graph APIs and permissions.

APIAPI PermisoPermission
/me/joinedTeams/me/joinedTeams User.Read.AllUser.Read.All
/Teams/$ {ID}/Channels/teams/${id}/channels Group.Read.AllGroup.Read.All

AutenticaciónAuthentication

El control utiliza el proveedor de autenticación global que se describe en la documentación de autenticación.The control uses the global authentication provider described in the authentication documentation.

Ampliar para obtener más controlExtend for more control

Para escenarios más complejos o una experiencia de usuario verdaderamente personalizada, este componente expone protected render* varios métodos para reemplazar en extensiones de componentes:For more complex scenarios or a truly custom UX, this component exposes several protected render* methods for override in component extensions:

MétodoMethod DescripciónDescription
renderSelectedrenderSelected Representa el equipo y el canal seleccionados en el cuadro de entrada.Renders the selected team and channel in the input box.
renderInputrenderInput Representa el cuadro de entrada.Renders the input box.
renderDropdownrenderDropdown Representa la lista desplegable.Renders the dropdown.
renderDropdownListrenderDropdownList Representa los elementos de la lista desplegable de forma recursiva.Renders the items in the dropdown recursively.
renderItemrenderItem Representa un equipo o un canal en la lista desplegable.Renders a team or a channel in the dropdown list.
renderHighlightedTextrenderHighlightedText Representa el texto del canal y resalta la consulta de entrada.Renders the channel text, highlighting the input query.
renderLoadingrenderLoading Representa el estado de lista desplegable de carga.Renders the loading dropdown state.
renderErrorrenderError Representa el estado de error desplegable.Renders the dropdown error state.