Partilhar via

Navegar dentro de um aplicativo de guia

  • Artigo

A biblioteca de clientes JavaScript do Microsoft Teams (TeamsJS) fornece suporte para navegação dentro de uma guia. Este artigo discute as opções disponíveis, que incluem tipos de navegação, como entre guias no aplicativo ou por meio do uso de componentes da interface do usuário do Teams e o botão back.

Observação

Este tópico reflete a versão 2.0.x da biblioteca de clientes JavaScript do Microsoft Teams (TeamsJS). Se você estiver usando uma versão anterior, consulte a visão geral da biblioteca do TeamsJS para obter diretrizes sobre as diferenças entre o TeamsJS mais recente e as versões anteriores.

As guias fornecem uma ótima maneira de aprimorar a experiência do Microsoft Teams. Você pode fornecer aos usuários acesso ao seu aplicativo Web diretamente no Teams usando guias, sem precisar entrar novamente. Para obter mais informações sobre guias e como você pode estender guias pessoais entre os produtos do Microsoft 365, consulte Guias de compilação para o Teams e Estender uma guia pessoal do Teams no Microsoft 365.

O recurso de páginas da biblioteca do TeamsJS fornece suporte para navegação entre guias dentro de um aplicativo. Especificamente, o pages.currentApp namespace oferece uma função navigateTo(NavigateWithinAppParams) para permitir a navegação para uma guia específica dentro do aplicativo atual e uma função navigateToDefaultPage() para navegar até a primeira guia definida no manifesto do aplicativo.

O código a seguir ilustra como navegar até uma página específica:

if (pages.currentApp.isSupported()) {
    const navPromise = pages.currentApp.navigateTo({pageId: <pageId>, subPageId: <subPageId>});
    navPromise.
        then((result) => {/*Successful navigation*/}).
        catch((error) => {/*Failed navigation*/});
}
else {/*Handle situation where capability isn't supported*/
    const navPromise = pages.navigateToApp({appId: <appId>, pageId: <pageId>});
    navPromise.
        then((result) => {/*Successful navigation*/}).
        catch((error) => {/*Failed navigation*/});
}

O código a seguir ilustra como navegar até a guia padrão do aplicativo:


if (pages.currentApp.isSupported()) {
    const navPromise = pages.currentApp.navigateToDefaultPage();
    navPromise.
        then((result) => {/*Successful navigation*/}).
        catch((error) => {/*Failed navigation*/});
}
else {/*Handle situation where capability isn't supported*/}

Observação

A navegação de aplicativo de guia só tem suporte no novo cliente do Teams.

Use a função pages.navigateToApp() ou links profundos para navegação de aplicativo de guia.

Configurar a navegação do botão back

Quando um aplicativo tem várias guias, um usuário pode usar o botão de volta do aplicativo host do Microsoft 365 para percorrer o histórico de navegação. No entanto, o histórico não inclui as ações que um usuário executa em uma guia. Se você quiser aprimorar a experiência do botão back, você pode manter sua própria pilha de navegação interna e configurar um manipulador personalizado para seleções de botão back. Isso pode ser feito por meio da registerBackButtonHandler() função no pages.backStack namespace.

Depois de registrar o manipulador, ele ajuda você a atender à solicitação de navegação antes que o sistema entre em ação. Se o manipulador for capaz de gerenciar a solicitação, ele deverá retornar true para que o sistema saiba que nenhuma ação adicional é necessária. Se a pilha interna estiver vazia, ela deverá retornar false para que o sistema possa chamar a navigateBack() função e tomar as medidas apropriadas.

Retornar o foco ao aplicativo host

Depois que o usuário começar a usar elementos dentro de uma guia, por padrão, o foco permanecerá com os elementos do iFrame até que o usuário selecione fora dele. Se o iFrame fizer parte do usuário navegando com atalhos de teclado (a tecla Tab ou a chave F6), você poderá se concentrar no aplicativo host. Você pode se concentrar no aplicativo host usando a pages.returnFocus() função. A returnFocus() função aceita um booliano indicando a direção para avançar o foco dentro do aplicativo host; true para frente e false para trás. Geralmente, o encaminhamento realça a barra de pesquisa e para trás realça a barra de aplicativos.

Exemplo de código

Nome de exemplo Descrição Node.js
Navegação de aplicativo tab O código de exemplo mostra como navegar entre guias dentro do aplicativo. Exibir

Confira também