Projetando seu aplicativo pessoal para o Microsoft Teams

Um aplicativo pessoal pode ser um bot, um espaço de trabalho privado ou ambos. Às vezes, funciona como um local para criar ou exibir conteúdo. Outras vezes, oferece ao usuário uma visão panorâmica de tudo o que é deles quando o aplicativo foi configurado como uma guia em vários canais.

Para orientar o design do seu aplicativo, as informações a seguir descrevem e ilustram como as pessoas podem adicionar, usar e gerenciar aplicativos pessoais no Teams.

Kit de IU do Microsoft Teams

Você pode localizar diretrizes abrangentes de design de aplicativo pessoal, incluindo elementos que podem ser usados e modificados conforme necessário, no Kit de Interface do Usuário do Microsoft Teams. O kit de Interface do Usuário também possui tópicos essenciais, como acessibilidade e dimensionamento dinâmico, que não são abordados aqui.

Adicionar um aplicativo pessoal

Os usuários podem adicionar um aplicativo pessoal da Microsoft Teams Store ou submenu do aplicativo selecionando o ícone Mais no lado esquerdo do Teams (mostrado no exemplo a seguir).

Usar um aplicativo pessoal (espaço de trabalho privado)

Com um espaço de trabalho privado, os usuários podem exibir o conteúdo do aplicativo que é significativo para eles em um local central sem sair do Teams.

(Observação de implementação: o espaço de trabalho privado é baseado no recurso guia pessoal.)

Anatomia: aplicativo pessoal (espaço de trabalho privado)

Celular

Configurar e adicionar várias ações na Barra de Navegação

Você pode adicionar várias ações à barra de navegação superior direita e criar um menu flutuante para ações adicionais em um aplicativo. Um máximo de cinco ações podem ser adicionadas na barra de navegação, incluindo o menu de estouro.

Para configurar e adicionar várias ações no NavBar, chame a API setNavBarMenu e adicione a displayMode enum propriedade ao MenuItem. O displayMode enum define como um menu aparece na Barra de Navegação. O valor padrão de displayMode enum é definido como ifRoom.

Com base nos requisitos e no espaço disponível na Barra de Navegação, defina displayMode enum considerando um dos seguintes.

• Se houver espaço, defina ifRoom = 0 para colocar um item na Barra de Navegação.
• Se não houver espaço, defina overflowOnly = 1, para que esse item sempre seja colocado no menu de estouro da NavBar, mas não na NavBar.

Veja a seguir um exemplo de configuração da NavBar com um menu flutuante para várias ações:

const menuItems = [item1, item2, item3, item4, item5]
microsoftTeams.menus.setNavBarMenu(menuItems, (id: string) => {
  output(`Clicked ${id}`)
  return true;
})

Desktop

Design com modelos de interface do usuário e componentes avançados

Use um dos seguintes modelos e componentes do Teams para ajudar a criar sua guia pessoal:

• Lista: as listas podem exibir itens relacionados em um formato que facilita a visualização e permite que os usuários executem ações em uma lista inteira ou itens individuais.
• Painel de tarefas: um painel de tarefas, às vezes chamado de quadro Kanban ou raias, é uma coleção de cartões frequentemente usados para acompanhar o status de itens de trabalho ou tíquetes.
• Painel: um painel é uma tela que contém vários cartões que fornecem uma visão geral dos dados ou do conteúdo.
• Formulário: os formulários são para coletar, validar e enviar a entrada do usuário de forma estruturada.
• Estado vazio: o modelo de estado vazio pode ser usado para muitos cenários, incluindo entrar, experiências de primeira execução, mensagens de erro, e muito mais.
• Navegação esquerda: o componente de navegação esquerda pode ajudar se seu aplicativo pessoal exigir alguma navegação. Em geral, você deve manter a navegação no mínimo.

Usar um aplicativo pessoal (bot)

Os aplicativos pessoais podem incluir um bot para conversas individuais e notificações privadas (por exemplo, quando um colega publica um comentário na prancheta). Os usuários interagem com o bot em uma guia que você especifica.

Anatomia: aplicativo pessoal (bot)

Celular

Botão Configurar voltar

Ao selecionar o botão voltar em um aplicativo do Teams, você retorna à plataforma do Teams sem navegar dentro do aplicativo.

Para navegar no aplicativo, configure o botão Voltar para que, ao selecionar o botão Voltar, você possa voltar às etapas anteriores e navegar pelo aplicativo.

Para configurar o botão voltar, chame a API registerBackButtonHandler , que lida com a funcionalidade do botão voltar dependendo de uma das seguintes condições:

• Quando registerBackButtonHandler é definido como false, o TeamsJS chama a navigateBack API e a plataforma do Teams lida com o botão voltar.
• Quando registerBackButtonHandler está definido como true, o aplicativo lida com a funcionalidade do botão voltar (você pode voltar às etapas anteriores e navegar dentro do aplicativo) e a plataforma Teams não realiza mais ações.

Veja a seguir um exemplo de configuração do botão Voltar:

microsoftTeams.registerBackButtonHandler(() => {
  const selectOption = registerBackReturn.options[registerBackReturn.selectedIndex].value
  var isHandled = false
  if (selectOption == 'true') 
    isHandled = true;
  output(`onBack isHandled ${isHandled}`)
  return isHandled;
})

Desktop

Gerenciar uma guia pessoal

No lado esquerdo do Teams, os usuários podem clicar com o botão direito do mouse no aplicativo pessoal para fixar, remover e configurar outras opções do aplicativo.

Práticas recomendadas

Use essas recomendações para criar uma experiência de aplicativo de qualidade.

Desktop

Prioridade de tabulação

Fazer: mostrar o conteúdo mais relevante na primeira guia

Com o dimensionamento responsivo, as guias à direita podem ficar truncadas ou fora de exibição.

Não: lidere com conteúdo secundário ou metadados

Como um aplicativo Web padrão, a navegação por tabulação deve avançar em uma ordem que ajude a compreender os recursos principais dos aplicativos.

Hierarquia de guias

Fazer: as guias devem ser de hierarquia igual e representar páginas de aplicativos principais

Suas guias devem categorizar os principais recursos e conteúdo dos aplicativos. Com o dimensionamento responsivo, o conteúdo à direita pode ficar truncado ou fora de exibição.

Não: incluir diferentes níveis de hierarquia

Seu conteúdo deve avançar em uma ordem lógica que ajude os usuários a fazer sentido dele. Se você tiver duas guias que estão intimamente relacionadas, considere combiná-las em uma guia.

Tela de apresentação

Incluir uma experiência de primeira execução

Deve haver pelo menos uma tela de boas-vindas na primeira vez que você usar um aplicativo pessoal. Para bots, descreva o que seu bot pode fazer e forneça ações rápidas, como uma entrada.

Não: comece com uma tela em branco

Os usuários poderão ficar confusos se nada for exibido na primeira vez que executarem seu aplicativo.

Conteúdo personalizado

Fazer: agregar conteúdo do aplicativo relevante para um usuário

Seja uma guia pessoal ou um bot, exiba conteúdo relacionado apenas à atividade de um usuário em seu aplicativo.

Não: mostrar conteúdo não relacionado ou muito amplo

Em contextos pessoais, não exiba conteúdo para equipes das quais um usuário não faz parte. O conteúdo do bot pessoal deve se concentrar no indivíduo—, não em um grupo.

Recursos complexos do aplicativo

Fazer: permitir que os usuários acessem recursos complexos em um navegador

Seu aplicativo deve se concentrar nas principais tarefas no Teams, mas você ainda pode exibir o aplicativo autônomo completo em um navegador.

Não: inclua todo o seu aplicativo

A menos que tenha criado seu aplicativo especificamente para o Teams, você provavelmente tem recursos que não fazem sentido em uma ferramenta de colaboração.

Dispositivo móvel

Exemplo de código

Confira também

Essas outras diretrizes de design podem ajudar dependendo do escopo do seu aplicativo pessoal:

• Criando sua guia
• Criar um bot
• registerBackButtonHandler
• Enumeração DisplayMode