Diretrizes de design de componente de loop

Microsoft Loop componentes são unidades dinâmicas e acionáveis de produtividade que permanecem em sincronização e se movem livremente entre aplicativos do Microsoft 365. Ele inclui a capacidade para você criar componentes loop evoluindo um Cartão Adaptável existente em um componente Loop ou criando um novo componente loop baseado em cartão adaptável.

Recursos de chave de componente loop

Ao vivo: seu Cartão Adaptável deve ser auto-atualizado quando o cartão é carregado, como ao abrir um email ou chat, para refletir as informações mais recentes.

Inseridos: cartões adaptáveis estão inseridos, portanto, não há nada específico necessário de você.

Acionável: os componentes loop permitem que o usuário tome medidas para concluir um fluxo dentro do próprio componente; além de simplesmente exibir informações ou abrir um navegador. Se o Cartão Adaptável for uma experiência somente exibição, procure oportunidades para torná-lo acionável, pois este é um elemento principal cartão para encantar os usuários. Verifique se um Cartão Adaptável com experiência somente exibição não é alterado para um componente Loop, nesse caso, ele deve permanecer apenas um Cartão Adaptável.

Observação

Determinadas permissões ou modos de usuário do componente podem não ser acionáveis, mas os casos comuns devem ser acionáveis.

Você pode tornar seu Cartão Adaptável acionável incluindo qualquer uma das seguintes ações:

• Aprovar um relatório de despesas
• Adicione um comentário
• Atualizar uma data
• Atualizar preço, como valor em dólar
• Alterar um valor de atribuição ou status
• Adicionar ou atualizar dados

Portátil: a adição do atributo URL conforme necessário nas diretrizes do desenvolvedor garante que seu componente possa ser copiado ao vivo em qualquer lugar com suporte para o componente Loop baseado em Cartão Adaptável.

Propriedade	Função
Viver	As informações mais recentes são preenchidas no cartão. Se houver várias instâncias, elas permanecerão em sincronização à medida que as atualizações são feitas.
Incorporado	Os cartões podem ser colocados em documentos e conversas separadas do restante do conteúdo.
Acionáveis	As tarefas podem ser concluídas de forma embutida.
Portátil	Os componentes podem funcionar no aplicativo Microsoft 365 que dá suporte a componentes loop.

Elementos de componente loop

Um componente loop baseado em cartão adaptável é composto pelo corpo, cabeçalho e borda.

Elemento componente loop	O desenvolvedor fornece	A plataforma fornece
Body	Conteúdo totalmente controlado por você	Renderização e estilo de controles com base em seu código.
Header	Ícone e nome	Elementos e layout são padrão e fornecidos pela plataforma
Border	NA	Borda padrão para todos os componentes do Loop.

Corpo do componente loop

O corpo do componente Loop torna seu componente exclusivo. Você pode dar aos usuários uma experiência positiva e aumentar o uso e a retenção criando um componente que incorpora os atributos do componente Loop e fornece o valor do cliente.

Os detalhes do corpo do componente são determinados pelas especificidades das necessidades e cenários de seus usuários.

A seguir estão as melhores práticas para um corpo de componente loop:

• Vá para o Adaptive Cards Home e examine o artigo Visão geral dos Cartões Adaptáveis para entender os princípios básicos e de design principais dos Cartões Adaptáveis.
• Siga as diretrizes de design do Cartão Adaptável, que incluem ferramentas, exemplos, anotações sobre design responsivo e densidade de pixels.
• A lista a seguir fornece as considerações específicas do componente Loop:
  • Verifique se o componente é fiel aos atributos de componentes loop, como, ao vivo, acionável, inserido e portátil.
  • Não adicione um botão separado para abrir no navegador.
  • Não adicione um cabeçalho duplicado ou borda.

Não adicione um botão separado para abrir no navegador

O cabeçalho do componente Loop fornece uma maneira padrão de abrir uma exibição baseada no navegador do componente com base na URL. Portanto, não é necessário adicionar um botão separado ao componente para ações como, Exibir Detalhes ou Abrir na Web.

Você pode adicionar botões ou links para exibições mais específicas, por exemplo, Exibir Itens Relacionados. Quando possível, forneça as informações e a interação necessárias no cartão.

Não adicione um cabeçalho duplicado ou borda

Todos os componentes do Loop têm um cabeçalho padrão e uma borda. Verifique se o código do Cartão Adaptável não deve duplicar o cabeçalho e a borda. Você pode ter um título específico do item para seu componente, mas verifique se o nome e o ícone do aplicativo não são os mesmos.

Cabeçalho de componente loop

A plataforma fornece o cabeçalho do componente e inclui elementos padrão, como logotipo do aplicativo, nome do aplicativo, localização compartilhada e cópia.

Contador	Descrição
1	Logotipo do aplicativo: logotipo colorido do seu aplicativo.
2	Nome do aplicativo: nome completo do seu aplicativo.
3	Locais compartilhados (controle loop)
4	Copiar componente

O nome do aplicativo é extraído do contrato de componente. Recomendamos usar um nome conciso para seu aplicativo.

O logotipo do aplicativo é extraído do contrato de componente. Verifique se o logotipo fornecido funciona em planos de fundo claros e escuros, uma vez que o mesmo ativo é usado para temas claros, escuros e de alto contraste no Microsoft Teams.

Borda do componente loop

A borda do componente separa seu componente do conteúdo ao seu redor. Ele ajuda os usuários a entender que o componente Loop é ao vivo e separado do conteúdo ao seu redor, como, email ou chat.

A borda é exibida automaticamente.

Próxima etapa

Componentes de loop baseados em cartão adaptável