Templates Fluent 2 em Canvas Apps: guia passo a passo

O que os templates Fluent 2 em Canvas Apps resolvem

Uma cooperativa que atende produtores de soja e milho quer um app para os agrônomos registrarem visitas técnicas a campo: status fitossanitário do talhão, estágio da cultura, recomendação de manejo. O time de TI abre o Power Apps Studio, cria um canvas app e encara o problema de sempre: tela em branco, precisa desenhar cabeçalho, posicionar galeria, ajustar cor de botão, alinhar ícone. Duas semanas depois o app funciona, mas não parece profissional e não segue nenhum padrão visual consistente entre telas.

Os templates Fluent 2 em Canvas Apps atacam exatamente esse ponto. Chegaram à disponibilidade geral na atualização de julho e agosto de 2026 do Power Platform e entregam três telas prontas, montadas inteiramente com controles modernos: hub landing, feature landing e list page. Não são paletas de cor nem temas aplicados por cima de um layout que você ainda precisa montar. São telas completas, com estrutura, hierarquia visual e componentes já posicionados, prontas para receber a fonte de dados real.

Neste tutorial você vai aplicar os três templates a um app de visitas técnicas a campo, trocar os dados de exemplo pela tabela real no Dataverse e sair com uma tela inicial, uma tela de detalhe e uma lista funcionando de ponta a ponta.

Pré-requisitos

• Licença Power Apps ativa vinculada ao seu usuário no tenant.
• Ambiente do Power Platform com Dataverse habilitado. Os templates funcionam sem Dataverse, mas o ganho real aparece quando você conecta uma tabela de verdade.
• Papel de ambiente Environment Maker atribuído ao seu usuário, necessário para criar canvas apps no ambiente escolhido.
• Papel de segurança do Dataverse com privilégio de leitura e escrita na tabela que o app vai usar. Sem isso, a tela abre mas o data grid retorna vazio mesmo com registros na tabela.
• Power Apps Studio atualizado, versão posterior à liberação dos templates Fluent 2 em GA (a partir de julho e agosto de 2026). Se o seu Studio ainda não mostra a galeria de templates modernos ao criar uma nova tela, force uma atualização do navegador ou aguarde o rollout no seu região do tenant.
• Uma tabela Dataverse já existente com os campos que o app vai exibir. Neste tutorial, uma tabela chamada Visitas Tecnicas, com colunas como Propriedade, Talhão, Cultura, Data da Visita, Status Fitossanitário e Agrônomo Responsável.

Os três templates e para que serve cada um

Antes de sair aplicando, vale entender o papel de cada template dentro da navegação do app. Isso evita o erro comum de usar uma list page onde caberia uma feature landing, ou vice-versa.

Passo a passo: aplicando os templates Fluent 2

Passo 1: Criar o canvas app

No Power Apps (make.powerapps.com), com o ambiente correto selecionado no seletor superior, vá em Aplicativos > Novo aplicativo > Canvas e escolha o formato Tablet. O formato tablet é o que os templates Fluent 2 foram desenhados para preencher; em formato telefone o mesmo template existe, mas a diagramação muda.

Assim que o Studio abrir, confira se o app está usando o conjunto de controles modernos. Em apps criados a partir de agora isso já vem habilitado por padrão. Se você está trabalhando num app mais antigo, vá em Configurações > Próximas funcionalidades e confirme que a opção de modern controls está ativa antes de seguir, porque os templates Fluent 2 só aparecem na galeria quando essa opção está ligada.

Passo 2: Inserir a tela hub landing

Na árvore de telas, à esquerda, clique em Nova tela na barra de comandos superior. O Studio abre uma galeria de layouts. As primeiras opções ainda são os modelos clássicos, tela em branco e os layouts de galeria antigos. Role até a seção de templates modernos e selecione Hub landing.

A tela chega pronta com cabeçalho, área de boas-vindas e um conjunto de cards clicáveis, todos montados com controles modern card e modern icon. É essa tela que vai servir de tela inicial do app: dela, o agrônomo acessa “Nova visita”, “Talhões monitorados” e “Histórico”.

Passo 3: Inserir a tela feature landing

Repita Nova tela > Feature landing. Essa tela vem estruturada como página de detalhe: um bloco de destaque no topo, uma área de descrição e uma seção de campos organizados em form modern control. É onde o agrônomo vai ver os dados completos de uma propriedade específica, cultura plantada, área do talhão, última aplicação de defensivo.

Passo 4: Inserir a tela list page

Repita mais uma vez Nova tela > List. Essa tela chega com um data grid moderno já configurado: busca embutida, colunas ordenáveis, seleção de linha única ou múltipla. É a lista de visitas técnicas agendadas ou realizadas, que o agrônomo consulta antes de sair a campo.

Até aqui, as três telas exibem dados de exemplo fictícios, um conjunto de registros embutido no próprio template só para você visualizar a diagramação. É isso que vamos trocar agora.

Passo 5: Conectar a tabela real no Dataverse

No painel esquerdo do Studio, clique em Dados e depois em Adicionar dados. Busque o conector Dataverse e selecione a tabela Visitas Tecnicas. Esse passo precisa acontecer antes de qualquer troca de fórmula, porque sem a tabela registrada como fonte de dados do app, nenhuma referência a ela vai resolver no Power Fx.

Passo 6: Trocar os dados de exemplo pelos dados reais na list page

Selecione o data grid dentro da tela list page e localize a propriedade Items na barra de fórmulas. O template vem com uma coleção de exemplo embutida, algo como ExemploVisitas. Substitua pela fonte real:

// Antes: dado de exemplo do template
Items: ExemploVisitas

// Depois: fonte real no Dataverse, ordenada pela data mais recente
Items: SortByColumns(
    Filter(
        'Visitas Tecnicas',
        Status = 'Status (Visitas Tecnicas)'.Agendada
    ),
    "Data da Visita",
    SortOrder.Descending
)

Confira também as colunas configuradas no data grid. Cada coluna é gerada automaticamente quando você conecta uma fonte, mas as colunas herdadas do template de exemplo continuam apontando para os nomes de campo fictícios. Você precisa destravar cada coluna clicando no ícone de edição na própria coluna e reapontar para o campo correspondente na tabela real, por exemplo trocar o binding de ExemploCidade por ThisItem.Propriedade.

Passo 7: Trocar os dados na feature landing

Na tela feature landing, os campos de texto e o form modern control também vêm ligados aos dados de exemplo. Selecione o form control, ajuste a propriedade DataSource para 'Visitas Tecnicas' e revise cada data card gerado automaticamente, garantindo que os rótulos de campo (Talhão, Cultura, Status Fitossanitário, Agrônomo Responsável) correspondam aos nomes reais das colunas Dataverse. Onde o template usa texto solto em vez de form control, ajuste diretamente a propriedade Text:

// Antes
Text: ExemploItem.NomeCultura

// Depois
Text: ThisItem.Cultura

Passo 8: Ajustar a navegação entre hub, feature e list

No hub landing, cada card tem uma propriedade OnSelect que hoje aponta para uma tela de exemplo do próprio template. Ajuste para navegar até as telas reais e, quando fizer sentido, passe o registro selecionado como parâmetro de contexto:

Navigate(
    ListPageVisitas,
    ScreenTransition.Fade
)

E na list page, o clique em uma linha do data grid deve levar até a feature landing carregando o item certo:

Navigate(
    FeatureLandingVisita,
    ScreenTransition.Fade,
    {VisitaSelecionada: ThisItem}
)

Na feature landing, o form control ou os campos de texto passam a ler VisitaSelecionada em vez do item de exemplo fixo.

Passo 9: Testar a ui responsiva e publicar

Rode o app com F5 ou o botão Play. Redimensione a janela de pré-visualização para simular tablet e telefone e confirme que os cards do hub reorganizam, que o data grid mantém a busca funcional e que o form da feature landing não corta campos. Os controles modernos já trazem esse comportamento responsivo configurado, mas vale conferir com dados reais, que costumam ter textos mais longos que o exemplo fictício do template. Publique com Arquivo > Salvar > Publicar quando estiver satisfeito.

Como validar que deu certo

• O hub landing abre sem erro e cada card navega para a tela correta.
• O data grid da list page mostra registros reais da tabela Visitas Tecnicas, não mais os itens fictícios do template.
• Clicar em uma linha da lista abre a feature landing com os dados daquele registro específico, não com o item de exemplo.
• O sino de erros no canto superior direito do Studio está zerado. Qualquer contagem diferente de zero indica binding quebrado.
• Redimensionar a tela de preview não corta texto nem sobrepõe controles.

Erros comuns e suas causas

• “Name isn’t valid. This identifier isn’t recognized in the current context.” Costuma aparecer quando você troca o binding de um data card ou coluna do data grid para um nome de coluna Dataverse escrito errado. O nome de exibição da coluna no Dataverse pode diferir do nome lógico usado no Power Fx; confira o nome lógico no editor de tabelas do ambiente.
• “Invalid argument type. Expecting a Table value.” Acontece quando a propriedade Items do data grid recebe uma coluna ou um registro único em vez de uma tabela. Verifique se a fórmula usa Filter ou a própria tabela, e não um LookUp, que retorna um único registro.
• Data grid aparece vazio mesmo com registros na tabela. Geralmente é falta de permissão do papel de segurança Dataverse na tabela, não erro de fórmula. Confirme o papel de segurança atribuído ao usuário de teste.
• Mistura de estilo visual entre telas. Ocorre quando parte do app foi construída antes de habilitar modern controls e parte depois. Controles clássicos e modernos coexistem no mesmo app, mas não seguem o mesmo tema fluent automaticamente.
• Campo em branco na feature landing após conectar o Dataverse. Sinal de que o data card específico ainda não foi destravado para customização e continua herdando o binding de exemplo do template em vez de ler o registro de contexto.

A armadilha: template de tela não é Grid Container

Vale um alerta direto porque essa confusão é frequente entre quem já usou o Grid Container antes. O Grid Container é um controle de layout isolado, útil para organizar outros controles dentro de uma grade responsiva numa tela qualquer. Ele não vem com estrutura de página, não tem cabeçalho, não tem navegação e não sabe nada sobre dados de exemplo ou fonte real. Você arrasta um Grid Container para dentro de uma tela e continua montando o resto manualmente.

Os templates Fluent 2, hub landing, feature landing e list page, são telas inteiras prontas, com hierarquia de controles já montada e dados de exemplo pré-carregados para você visualizar a diagramação antes de trocar pela fonte real. Um é peça de montagem, o outro é a tela pronta. Confundir os dois leva à frustração de quem espera abrir uma galeria de temas de página completos e encontra só um contêiner de layout vazio, ou o inverso: quem espera flexibilidade de um contêiner e recebe uma tela inteira que precisa desmontar.

Ganho real para operações de campo no agronegócio

Cooperativas e empresas de insumos que mantêm equipes técnicas em campo costumam ter esse tipo de app rodando em tablets com conectividade instável, muitas vezes offline parte do dia. Sair da tela em branco reduz o tempo de construção da interface, mas o ganho maior está na consistência: hub, feature e list page usando o mesmo conjunto de controles modernos significam a mesma navegação, o mesmo comportamento de toque e a mesma acessibilidade em todas as telas do app, sem que o time de TI precise recriar esse padrão manualmente em cada tela nova.

Fechamento

Com as três telas conectadas, navegando entre si e lendo dados reais do Dataverse, você tem um app de campo funcional sem ter desenhado um único retângulo manualmente. Se a sua operação já lida com múltiplos apps de campo, vale avaliar onde os mesmos templates Fluent 2 encaixam para padronizar a experiência entre eles. A Trinapse acompanha esse tipo de decisão de arquitetura em Power Platform com quem já opera Canvas Apps em escala no agronegócio.