No Microsoft PowerApps, você pode criar formulários mais bonitos e de uso eficiente com facilidade. Por exemplo, considere este formulário básico para registrar ordens de venda:

Exemplo de ordem de venda

Neste tutorial, percorreremos as etapas para criar esse formulário. Também veremos alguns tópicos avançados, como o dimensionamento dinâmico de campos para preencher o espaço disponível.

Antes de começar

Se você for novato no PowerApps (ou tiver apenas gerado aplicativos automaticamente), você desejará criar um aplicativo do zero antes de começar este tópico. Criando um aplicativo do zero, você se familiarizará com os conceitos necessários, tais como adicionar fontes de dados e controles, que são mencionados mas não explicados neste tópico.

Adicionar uma galeria

  1. Crie um aplicativo para tablet do zero.

    Tudo que é discutido neste tópico também se aplica a layouts de telefone, mas aplicativos de celular têm apenas uma coluna vertical.

  2. Adicione a entidade Ordem de venda no Common Data Service como uma fonte de dados para o aplicativo.

    Fora deste tutorial, você pode usar qualquer fonte de dados, incluindo listas do SharePoint e tabelas do Excel.

  3. Adicione um controle Galeria de imagem e defina sua propriedade Items como 'Ordem de venda'.

    (opcional) Para realizar a correspondência entre os exemplos neste tutorial, altere o Layout da galeria para mostrar apenas Título e subtítulo.

    Lista da ordem de venda

  4. Na galeria, clique ou toque em SO004.

    Lista da ordem de venda

    Esse registro será exibido no formulário que você criar seguindo as etapas posteriormente neste tópico.

Adicionar uma barra de título

  1. Adicione uma tela em branco em que você colocará o formulário.

    Fora deste tutorial, você pode colocar os controles Galeria e Editar formulário na mesma tela, mas você terá mais espaço com o qual trabalhar se você colocá-los em telas separadas.

  2. Na parte superior da nova tela, adicione um controle Rótulo e defina sua propriedade Texto para esta expressão:
    "Sales Order " & Gallery1.Selected.SalesOrderId

    O rótulo mostra o número de ordem de venda do registro que você selecionou na galeria.

  3. (opcional) Formate o rótulo da seguinte maneira:

    1. Defina a propriedade Alinhar como Centralizar.
    2. Defina a propriedade Tamanho como 20.
    3. Defina a propriedade Preenchimento como Azul-marinho.
    4. Defina a propriedade Cor como Branco.
    5. Defina a propriedade Largura como Parent.Width.
    6. Definir suas propriedades X e Y como 0.

    Barra de título

Adicionar um formulário

  1. Adicione um controle Editar formulário e, em seguida, mova-o e redimensione-o para preencher a tela sob o rótulo.

    Na próxima etapa, você conectará o controle de formulário à fonte de dados Ordem de venda usando o painel direito e não na barra de fórmulas. Se você usar a barra de fórmulas, o formulário não mostrará nenhum campo por padrão. Você sempre pode mostrar todos os campos que você deseja selecionando uma ou mais caixas de seleção no painel direito.

  2. No painel direito, clique ou toque na seta para baixo ao lado de Nenhuma fonte de dados selecionada e, em seguida, clique ou toque em Ordem de venda.

    Um conjunto padrão de campos da fonte de dados Ordem de venda será exibido em um layout simples de três colunas. No entanto, muitos estão em branco e podem levar alguns instantes para ocupar suas posições finais.

  3. Defina a propriedade Item do formulário como Gallery1.Selected.

    O formulário mostra o registro que você selecionou na galeria, mas o conjunto padrão de campos pode não corresponder ao que você deseja no produto final.

  4. No painel direito, oculte cada um desses campos desmarcando a respectiva caixa de seleção:

    • ID da ordem de venda
    • Conta
    • Vendedor
    • Contato da conta
  5. Mova o campo Status da ordem arrastando-o para a esquerda e depois cancele-o no outro lado do campo Referência de ordem de compra do cliente.

    Sua tela deve ser semelhante a este exemplo:

    Ordem de venda em um layout básico de três colunas

Selecionar um cartão de dados

Cada campo exibido tem um cartão de dados correspondente no formulário. Esse cartão consiste em um conjunto de controles para o título do campo, uma caixa de entrada, uma estrela (que aparece se o campo é obrigatório) e uma mensagem de erro de validação.

Também é possível selecionar cartões diretamente no formulário. Quando um cartão é selecionado, uma legenda preta aparece acima dele.

Seleção de cartão de dados

Observação: para excluir um cartão (não apenas ocultá-lo), selecione-o e, em seguida, pressione Delete.

Organizar cartões em colunas

Por padrão, formulários em aplicativos de tablet têm três colunas, enquanto os aplicativos para celular têm uma. Você pode especificar não somente quantas colunas um formulário tem, mas também se todos os cartões devem se ajustar dentro das bordas de coluna.

Neste gráfico, o número de colunas no formulários foi alterado de três para quatro com a caixa de seleção Ajustar-se às colunas selecionada. Os cartões no formulário foram organizados automaticamente para se ajustarem ao novo layout.

Ordem de venda em um layout básico de quatro colunas

Redimensionar cartões em várias colunas

Dependendo dos dados em cada cartão, talvez você queira que alguns cartões se ajustem em uma única coluna enquanto outros ocupem várias colunas. Se um cartão contiver mais dados do que você desejar mostrar em uma única coluna, você poderá alargar o cartão selecionando-o e arrastando a alça de seleção na borda esquerda ou direita da caixa de seleção dele. Quando você arrastar a alça, o cartão se "ajustará" aos limites de coluna.

Para tornar o design mais flexível mas reter algumas estruturas, você pode aumentar o número de colunas para 12. Com essa alteração, você pode facilmente configurar cada cartão para abranger todo o formulário, metade do formulário, um terço, um quarto, um sexto e assim por diante. Veremos como isso se dá na prática.

  1. No painel direito, defina o número de colunas no formulário para 12.

    Especificar o número de colunas

    O formulário não é alterado visivelmente, mas você tem mais pontos de alinhamento conforme você arrasta a alça de captura esquerda ou direita.

  2. Aumente a largura do cartão Data da ordem, arrastando a alça de captura à direita um ponto de alinhamento para a direita.

    O cartão abrange quatro das 12 colunas do formulário (ou 1/3 do formulário), em vez de apenas três das 12 colunas do formulário (ou 1/4 do formulário). Sempre que você aumenta a largura do cartão em um ponto de alinhamento, a parte do formulário abrangida pelo cartão aumenta em 1/12.

    Redimensionar um cartão com arrastar e soltar

  3. Repita a etapa anterior com os cartões de Status da ordem e Referência de ordem de compra do cliente.

    Três cartões na primeira linha

  4. Redimensione os cartões Nome e Descrição para que ocupem seis colunas (ou 1/2) do formulário.

  5. Faça com que as duas primeiras linhas do endereço de entrega se alonguem completamente, por todo o formulário:

Pronto. Temos o formulário desejado, combinando linhas com diferentes números de colunas:

Ordem de venda com layout de 12 colunas com redimensionamento

Manipular os controles em um cartão

O endereço de entrega é composto de muitas partes de informações que desejamos agrupar visualmente para o usuário. Cada campo permanecerá em seu próprio cartão de dados, mas é possível manipular os controles do cartão para ajustá-los melhor.

  1. Selecione o cartão Primeira linha do endereço de entrega, selecione o rótulo no cartão e, em seguida, exclua as três primeiras palavras do texto.

    Endereço de entrega da ordem de venda que renomeia o rótulo da primeira linha

  2. Selecione o cartão Segunda linha do endereço de entrega, selecione o rótulo no cartão e, em seguida, exclua todo o texto contido nele.

    É tentador simplesmente remover o controle de rótulo e, em muitos casos, isso funciona bem. No entanto, pode haver fórmulas que dependem da presença desse controle. A abordagem mais segura é remover o texto ou definir sua propriedade Visível como false.

    Endereço de entrega da ordem de venda que renomeia o rótulo da segunda linha

  3. No mesmo cartão, mova a caixa de texto de entrada sobre o rótulo para reduzir o espaço entre a primeira e a segunda linhas do endereço.

    A altura do cartão é reduzida quando seu conteúdo ocupa menos espaço.

    Endereço de entrega da ordem de venda que renomeia o rótulo da segunda linha

Agora, examinaremos a terceira linha do endereço. Assim como fizemos há pouco, reduziremos o texto de cada rótulo desses cartões e organizaremos a caixa de entrada de texto à direita de cada rótulo. Aqui estão as etapas para o cartão de Estado:

Etapa Descrição Resultado
1 Selecione o cartão de Estado de forma que as alças de captura apareçam ao redor dele. Selecionar uma ficha
2 Selecione o rótulo neste cartão de forma que as alças de captura apareçam ao redor dele. Selecione um controle em um cartão
3 Posicione o cursor à direita do texto e exclua a parte que não é necessária. Altere o texto dentro de um controle em um cartão
4 Por meio das alças de captura laterais, dimensione o controle de rótulo para que ele se ajuste ao novo tamanho do texto. Redimensione um controle dentro de um cartão
5 Selecione o controle de entrada de texto neste cartão. Selecione outro controle dentro do cartão
6 Por meio das alças de captura laterais, dimensione o controle de entrada de texto no tamanho desejado. Redimensione um controle dentro de um cartão
7 Arraste a caixa de entrada de texto para cima e para a direita do controle de rótulo, depois solte-a. Mova um controle dentro de um cartão
As modificações realizadas no cartão de Estado estão concluídas agora. As modificações realizadas no cartão de estado estão concluídas

O resultado da terceira linha de endereço completo:

Endereço de entrega de ordem de venda com uma terceira linha mais concisa

Observe que muitos dos cartões começam com fórmulas dinâmicas em suas propriedades. Por exemplo, o controle de entrada de Texto que redimensionamos e movemos para cima tinha uma propriedade de Largura baseada na largura de seu pai. Quando você move ou redimensiona um controle, essas fórmulas dinâmicas são substituídas por valores estáticos. Será possível restaurar as fórmulas dinâmicas usando a barra de fórmulas, se desejado.

Desativar o Ajustar-se às colunas

Às vezes, um controle mais preciso do que o padrão de 12 colunas será almejado. Nesses casos, é possível desligar o Ajustar-se às colunas e posicionar os cartões manualmente. O formulário continuará se ajustando a 12 colunas, mas também é possível manter pressionada a tecla Alt para posicionar manualmente e dimensionar o cartão conforme desejado.

Em nosso exemplo, todos os quatro componentes que formam a terceira linha do endereço têm exatamente a mesma largura. Contudo, este pode não ser o melhor layout, pois os nomes de cidade são geralmente maiores do que os nomes de estado e a caixa de Entrada texto de países/regiões é mais curto em razão do comprimento de seu rótulo.

Para otimizar esse espaço, desligue Ajustar-se às colunas no painel direito e, em seguida, mantenha pressionada a tecla Alt ao redimensionar e posicionar esses cartões. Sempre que você mantiver pressionada a tecla Alt, todos os controles mostrarão legendas pretas. Esse comportamento foi concebido para mostrar os nomes de controle a você.

Posicionar e dimensionar com a tecla ALT pressionada

Após posicionar cuidadosamente, o resultado terá tamanhos apropriados para cada campo e até mesmo espaçamento horizontal entre campos:

Terceira linha de endereço de entrega da ordem de venda posicionada corretamente

Em suma, quais são as diferenças entre o Ajustar-se às colunas ativado e desativado?

Comportamento “Ajustar-se às colunas” ativado “Ajustar-se às colunas” desativado
Redimensionar o ajuste para O número de colunas selecionadas:
1, 2, 3, 4, 6 ou 12
12 colunas
O ajuste de redimensionamento pode ser substituído Não Sim, com a tecla Alt
Os cartões se reajustam automaticamente entre linhas (saiba mais adiante) Sim Não

Largura e altura do conjunto

Assim como acontece com tudo no PowerApps, o layout do formulário é controlado pelas propriedades nos controles de cartão. Como descrito anteriormente, você pode alterar os valores dessas propriedades arrastando controles para locais diferentes ou arrastando as alças de captura para redimensionar controles. Porém, haverá situações em que você desejará entender e manipular essas propriedades com mais precisão, especialmente ao criar formulários dinâmicos com fórmulas.

Layout Básico: X, Y e Largura

A posição dos cartões é controlada com as propriedades X e Y. Quando trabalhamos com controles na tela bruta, essas propriedades fornecem uma posição absoluta. Todavia, em um formulário, essas propriedades têm um significado diferente:

  • X: ordem dentro de uma linha.
  • Y: número da linha.

Assim como os controles na tela, a propriedade Width especifica a largura mínima do cartão (saiba mais sobre isso mais adiante).

Vamos dar uma olhada nas propriedades X, Y e Width dos cartões no formulário:

Coordenadas X e Y do formulário de ordem de venda

Estouro de linhas

O que acontece se os cartões em uma linha são muito grandes para caber nela? Normalmente, não é necessário se preocupar com essa possibilidade. Com o Ajustar-se às colunas ativado, essas três propriedades se ajustarão automaticamente, assim, tudo caberá nas linhas, sem estouro.

Porém, com o Ajustar-se às colunas desativado ou uma Largura baseada em fórmula em um ou mais dos cartões, o estouro pode ocorrer em uma linha. Nesse caso, os cartões serão automaticamente encapsulados para criar efetivamente uma nova linha. Por exemplo, alteraremos manualmente a propriedade Largura do cartão Referência de ordem de compra do cliente (primeira linha, terceiro item) para 500:

Redimensionamento manual do cartão, refluir em uma nova linha

Os três cartões na linha superior não se ajustam mais horizontalmente e uma nova linha foi criada para encapsular o estouro. A coordenada Y de todos esses cartões ainda é a mesma em 0, e os cartões Nome e Descrição ainda têm um Y de 1. Os cartões que têm valores de Y diferentes não são mesclados entre linhas.

É possível usar esse comportamento para criar um layout totalmente dinâmico em que cartões são colocados com base em uma classificação Z, preenchendo-o tanto quanto possível e antes de movê-lo para a próxima linha. Para fazer isso, atribua o mesmo valor Y a todos os cartões e use X para ordená-los.

Preenchimento de espaços: WidthFit

O estouro no último exemplo criou um espaço após o cartão Status da ordem, que era o segundo cartão na primeira linha. É possível ajustar manualmente as propriedades Largura dos dois cartões restantes para preencher esse espaço, mas isso é entediante.

Como alternativa, use a propriedade WidthFit. Se um ou mais cartões de uma linha tiverem essa propriedade definida como true, qualquer espaço restante na linha será dividido igualmente entre eles. Como já dissemos, esse comportamento ocorre porque a propriedade Largura de um cartão é um mínimo e, na realidade, o que é visto pode ser mais amplo. Essa propriedade nunca fará com que um cartão se reduza, somente que expanda.

Se nós definirmos WidthFit para true no cartão Status da ordem, ele preencherá o espaço disponível, enquanto o primeiro cartão permanecerá inalterado:

WidthFit definido como true no segundo cartão

Se WidthFit também for definido como true no cartão Data da ordem, os dois cartões dividirão igualmente o espaço disponível:

WidthFit definido como true no primeiro e no segundo cartão

Observe que as alças de captura nesses cartões levam em conta a largura adicional fornecida pelo WidthFit, e não a largura mínima fornecida pela propriedade Width. Pode ser confuso manipular a propriedade Largura enquanto WidthFit está ativado. Pode ser desejável desativá-lo, alterar a Largura e, em seguida, ativá-lo novamente.

Quando o WidthFit pode ser útil? Caso haja um campo utilizado apenas em determinadas situações, é possível definir a propriedade Visível como false para que os outros cartões na linha preencham automaticamente o espaço ao redor. Talvez seja desejável usar uma fórmula que mostre um campo quando outro campo tiver um valor específico.

Aqui, definiremos a propriedade Visível do campo Status da ordem como um false estático:

WidthFit definido como true no primeiro cartão com status da ordem invisível

Com o segundo cartão removido, o terceiro cartão pode agora retornar à mesma linha do primeiro cartão. O primeiro cartão ainda tem WidthFit definido como true, então apenas ele se expande para preencher o espaço disponível.

Já que o Status da ordem é invisível, você não pode selecioná-lo tão facilmente na tela. No entanto, você pode selecionar qualquer controle, visível ou não, na lista hierárquica de controles no lado esquerdo da tela.

Altura

A propriedade Height determina a altura de cada cartão. Os cartões têm o equivalente de WidthFit para Altura e que ele é sempre definido como true. Imagine que uma propriedade HeightFit existe, mas não procure por ela no produto porque essa propriedade ainda não está exposta.

Não é possível desligar esse comportamento, então, alterar a altura dos cartões pode ser desafiador. Todos os cartões em uma linha parecem ter a mesma altura do cartão mais alto. Você pode ver uma linha como esta:

WidthFit definido como true no primeiro cartão com status da ordem invisível

Qual cartão está determinando a altura da linha? No gráfico anterior, o cartão de Montante total está selecionado e parece alto, mas sua propriedade Altura está definida como 80 (o mesmo que a altura da primeira linha). Para reduzir a altura de uma linha, você deve reduzir a Altura do cartão mais alto nessa linha e você não pode identificar o cartão mais alto sem revisar a propriedade Altura de cada cartão.

AutoHeight

Um cartão também pode ser mais alto do que o esperado se ele contém um controle para o qual a propriedade AutoHeight está definida como true. Por exemplo, muitos cartões contêm um rótulo que exibe uma mensagem de erro se o valor do campo causa um problema de validação.

Sem um texto a ser exibido (sem erros), o rótulo se recolhe para uma altura zero. Se você não soubesse disso, não perceberia sua existência e é assim que seria:

Cartões que contêm controles com AutoHeight definido como true, não mostrando altura

No lado esquerdo da tela, a lista de controles mostra ErrorMessage1, que é o nosso controle de rótulo. Conforme você atualiza um aplicativo, você pode selecionar esse controle para dar a ele alguma altura e mostrar as alças de captura com as quais você pode posicionar e dimensionar o controle. O "A" na caixa azul indica que o controle tem AutoHeight definida como true:

No momento da criação, os controles AutoHeight mostram algumas alturas, tornando mais fácil arrastar e soltar

A propriedade Texto desse controle é definida como Parent.Error, que é usado para obter informações de erro dinâmico baseadas em regras de validação. Para fins ilustrativos, definiremos estaticamente a propriedade Texto desse controle, o que aumentará a altura do controle (e, por extensão, do cartão) para acomodar o comprimento do texto:

Com uma mensagem de erro, o controle e o cartão aumentam automaticamente

Vamos aumentar o comprimento da mensagem de erro e, novamente, o controle e o cartão aumentarão para se ajustar. Observe que, no geral, a linha cresce em altura, mantendo o alinhamento vertical entre os cartões:

Com uma mensagem de erro mais longa, o controle e o cartão aumentam ainda mais. Note que os cartões na mesma linha aumentam juntos