Compreender o esquema dos formulários de dados no Microsoft PowerAppsUnderstand data-form layout in Microsoft PowerApps

No PowerApps, pode criar facilmente formulários apelativos e de utilização eficiente.In PowerApps, you can easily create forms that are attractive and efficient to use. Por exemplo, considere este formulário simples para registar notas de vendas:For example, consider this basic form for recording sales orders:

Nota de venda de exemplo

Neste tutorial, vamos explicar os passos para criar este formulário.In this tutorial, we'll walk through the steps to create this form. Vamos também ver alguns tópicos avançados, tais como o dimensionamento dinâmico de campos para preencher o espaço disponível.We'll also look at some advanced topics, such as dynamic sizing of fields to fill available space.

Antes de começarBefore you start

Se não estiver familiarizado com o PowerApps (ou se só tiver gerado aplicações automaticamente), recomendamos criar uma aplicação do zero antes de avançar para este tópico.If you're new to PowerApps (or have only generated apps automatically), you'll want to build an app from scratch before you dive into this topic. Ao criar uma aplicação do zero, vai ficar a conhecer os conceitos necessários, como adicionar origens de dados e controlos, os quais são mencionados neste tópico, mas não explicados.By building an app from scratch, you'll become familiar with required concepts, such as adding data sources and controls, that are mentioned but not explained in this topic.

  1. Criar uma aplicação de tablet do zero.Create a tablet app from scratch.

    Tudo o que vai ser abordado neste tópico também se aplica aos esquemas para telemóvel; contudo, muitas vezes, as aplicações para telemóvel só têm uma coluna vertical.Everything discussed in this topic also applies to phone layouts, but phone apps often have only one vertical column.

  2. Adicione a entidade Sales order (Nota de venda) no Common Data Service como a origem de dados da aplicação.Add the Sales order entity in the Common Data Service as a data source for the app.

    Fora deste tutorial, pode utilizar qualquer origem de dados, incluindo listas do SharePoint e tabelas do Excel.Outside of this tutorial, you can use any data source, including SharePoint lists and Excel tables.

  3. Adicione um controlo de Galeria vertical e defina a respetiva propriedade Items (Itens) como “Sales order”.Add a vertical Gallery control, and set its Items property to 'Sales order'.

    (opcional) Para fazer corresponder os exemplos neste tutorial, altere o Esquema da galeria para mostrar apenas Title and subtitle (Título e sub-título).(optional) To match the examples in this tutorial, change the gallery's Layout to show only Title and subtitle.

    Lista de nota de venda

  4. Na galeria, clique ou toque em SO004.In the gallery, click or tap SO004.

    Lista de nota de venda

    Este registo será apresentado no formulário que vai criar ao seguir os passos mais adiante neste tópico.This record will appear in the form that you build by following steps later in this topic.

Adicionar uma barra de títuloAdd a title bar

  1. Adicione um ecrã em branco, onde vai pôr o formulário.Add a blank screen where you'll put the form.

    Fora neste tutorial, pode pôr os controlos de Galeria e Editar formulário no ecrã da mesmo, mas terá mais espaço para trabalhar se os puser em ecrãs separados.Outside of this tutorial, you can put the Gallery and Edit form controls on the same screen, but you'll have more room to work with if you put them on separate screens.

  2. Na parte superior do ecrã novo, adicione um controlo Etiqueta e defina a respetiva propriedade Text (Texto) como a expressão:At the top of the new screen, add a Label control, and set its Text property to this expression:
    "Sales Order " & Gallery1.Selected.SalesOrderId"Sales Order " & Gallery1.Selected.SalesOrderId

    A etiqueta mostra o número da nota de venda do registo que selecionou na galeria.The label shows the sales-order number of the record that you selected in the gallery.

  3. (opcional) Formate a etiqueta da seguinte forma:(optional) Format the label as follows:

    1. Defina a propriedade Align para Center.Set its Align property to Center.
    2. Defina a propriedade Size (Tamanho) como 20.Set its Size property to 20.
    3. Defina a propriedade Fill (Preenchimento) como Navy (Azul-marinho).Set its Fill property to Navy.
    4. Defina a propriedade Color (Cor) como White (Branco).Set its Color property to White.
    5. Defina a propriedade Width (Largura) como 640.Set its Width property to Parent.Width.
    6. Defina as propriedades X e Y como 0.Set its X and Y properties to 0.

      Barra de título

Adicionar um formulárioAdd a form

  1. Adicione um controlo de Editar formulário e mova-o e redimensione-o de modo a que preencha o ecrã abaixo da etiqueta.Add an Edit form control, and then move and resize it to fill the screen under the label.

    No próximo passo, vai ligar o controlo de formulário à origem de dados Sales order com o painel do lado direito e não com a barra de fórmulas.In the next step, you'll connect the form control to the Sales order data source by using the right-hand pane, not the formula bar. Se utilizar a barra de fórmulas, o formulário não mostrará nenhum campo por predefinição.If you use the formula bar, the form won't show any fields by default. Pode sempre mostrar um ou mais campos que pretenda ao selecionar uma ou mais caixas de verificação no painel do lado direito.You can always show any fields that you want by selecting one or more check boxes in the right-hand pane.

  2. No painel direito, clique ou toque na seta para baixo junto a No data source selected (Nenhuma origem de dados selecionada) e clique ou toque em Sales order.In the right-hand pane, click or tap the down arrow next to No data source selected, and then click or tap Sales order.

    É apresentado um conjunto predefinido de campos da origem de dados Sales order num esquema simples de três colunas.A default set of fields from the Sales order data source will appear in a simple, three-column layout. No entanto, muitos estão em branco e podem demorar alguns minutos até ficarem nas posições finais.However, many are blank, and they may take a few moments to settle into their final positions.

  3. Defina a propriedade Item (Item) do formulário como Gallery1.Selected.Set the form's Item property to Gallery1.Selected.

    O formulário mostra o registo que selecionou na galeria, mas o conjunto de campos predefinido poderá não corresponder ao que pretende no seu produto final.The form shows the record that you selected in the gallery, but the default set of fields might not match what you want in your final product.

  4. No painel do lado direito, oculte cada um destes campos ao desmarcar as respetivas caixas de verificação:In the right-hand pane, hide each of these fields by clearing its checkbox:

    • Sales order ID (ID da nota de venda)Sales order ID
    • Account (Conta)Account
    • Sales person (Vendedor)Sales person
    • Account contact (Contacto da conta)Account contact
  5. Mova o campo Order status (Estado da encomenda) ao arrastá-lo para a esquerda e largá-lo no outro lado do campo Customer purchase order reference (Referência da nota de encomenda do cliente).Move the Order status field by dragging it to the left and then dropping it on the other side of the Customer purchase order reference field.

    O ecrã deverá ser parecido com este exemplo:Your screen should resemble this example:

    Nota de venda num esquema básico de três colunas

Selecionar um cartão de dadosSelect a data card

Cada campo apresentado tem um cartão de dados correspondente no formulário.Each field displayed has a corresponding data card on the form. Este cartão é composto por um conjunto de controlos para o título do campo, uma caixa de entrada, uma estrela (que é apresentada se o campo for obrigatório) e uma mensagem de erro de validação.This card comprises a set of controls for the field title, an input box, a star (which appears if the field is required), and a validation error message.

Também pode selecionar cartões diretamente no formulário.You can also select cards directly on the form. Quando é selecionado um cartão, aparece uma legenda preta acima do mesmo.When a card is selected, a black caption appears above it.

Seleção de cartão de dados

Nota: para eliminar um cartão (não apenas ocultá-lo), selecione-o e, em seguida, prima “Delete” (“Eliminar”).Note: To delete a card (not just hide it), select it, and then press Delete.

Dispor os cartões nas colunasArrange cards in columns

Por predefinição, os formulários nas aplicações de tablet têm três colunas e os das aplicações de telemóvel têm uma.By default, forms in tablet apps have three columns, and those in phone apps have one. Pode especificar não só o número de colunas de um formulário, mas também se todos os cartões devem caber dentro dos limites das colunas.You can specify not only how many columns a form has but also whether all cards should fit within column borders.

Neste gráfico, o número de colunas no formulário foi alterado de três para quatro com a caixa de verificação Snap to column (Ajustar às colunas) selecionada.In this graphic, the number of columns in the form was changed from three to four with the Snap to columns check box selected. Os cartões do formulário foram dispostos automaticamente para se ajustarem ao esquema novo.The cards in the form were arranged automatically to fit the new layout.

Nota de venda num esquema básico de quatro colunas

Redimensionar cartões em várias colunasResize cards across multiple columns

Consoante os dados em cada cartão, poderá querer que algumas cartões se ajustem a uma única coluna e outros se espalhem por várias.Depending on the data in each card, you might want some cards to fit in a single column and other cards to span multiple columns. Se um cartão tiver mais dados do que os que pretende mostrar numa única coluna, pode alargá-lo ao selecioná-lo e arrastar a alça no limite esquerdo ou direito da caixa de seleção.If a card contains more data than you want to show in a single column, you can widen the card by selecting it and then dragging the grab handle on the left or right border of its selection box. À medida que arrasta a alça, o cartão ajusta-se aos limites da coluna.As you drag the handle, the card will "snap" to column boundaries.

Para que o seu design fique ainda mais flexível, mas retenha alguma estrutura, pode aumentar o número de colunas para 12.To make your design more flexible but retain some structure, you can increase the number of columns to 12. Com esta alteração, pode configurar facilmente cada cartão para abranger o formulário completo, metade, um terço, um quarto, um sexto e assim sucessivamente.With that change, you can easily configure each card to span the entire form, half of the form, one-third, one-quarter, one-sixth, and so forth. Vamos ver em ação.Let's see this in action.

  1. No painel do lado direito, defina o número de colunas no formulário como 12.In the right-hand pane, set the number of columns in the form to 12.

    Especificar o número de colunas

    O formulário não é alterado em termos visuais, mas tem mais pontos de ajuste à medida que arrasta a alça do lado esquerdo ou direito.The form doesn't visibly change, but you have more snap points as you drag the left or right grab handle.

  2. Aumentar a largura do cartão Order date (Data da encomenda) ao arrastar a alça do lado direito um ponto de ajuste para a direita.Increase the width of the Order date card by dragging the grab handle on the right one snap point to the right.

    O cartão abrange quatro das 12 colunas do formulário (ou 1/3 deste), em vez e apenas três colunas (ou 1/4 do formulário).The card spans four of the form's 12 columns (or 1/3 of the form), instead of only three of the form's 12 columns (or 1/4 of the form). Sempre que aumenta a largura de um cartão em um ponto de ajuste, esse cartão abrange 1/12 adicionais do formulário.Whenever you increase a card's width by one snap point, the card spans an additional 1/12 of the form.

    Redimensionar um cartão com arrastar e largar

  3. Repita o passo anterior com os cartões Order status (Estado da encomenda) e Customer purchase order reference.Repeat the previous step with the Order status and Customer purchase order reference cards.

    Três cartões na primeira linha

  4. Redimensione os cartões Name (Nome) e Description (Descrição), para que abranjam seis colunas (ou 1/2) do formulário.Resize the Name and Description cards to take up six columns (or 1/2) of the form.
  5. Estique as duas primeiras linhas da morada de entrega ao longo do comprimento do formulário:Make the first two lines of the delivery address stretch entirely across the form:

E já está!All done. Temos o formulário que queríamos, que mistura linhas com diferentes números de colunas:We have our desired form, mixing rows with different numbers of columns:

Nota de venda no esquema de 12 colunas com redimensionamento

Manipular controlos num cartãoManipulate controls in a card

A morada de entrega inclui várias informações que queremos agrupar visualmente para o utilizador.The delivery address comprises several pieces of information that we want to visually group together for the user. Cada campo permanecerá no seu próprio cartão de dados, mas podemos manipular os controlos dentro dos cartões para que os campos se ajustem melhor.Each field will remain in its own data card, but we can manipulate the controls within the card to make them fit better together.

  1. Selecione o cartão First line of Delivery address (Primeira linha da Morada de entrega), selecione a etiqueta dentro do mesmo e elimine as três primeiras palavras do texto.Select the First line of Delivery address card, select the label within that card, and then delete the first three words from the text.

    Mudar o nome da etiqueta da primeira linha da morada de entrega da nota de venda

  2. Selecione o cartão Second line of Delivery address (Segunda linha da Morada de entrega), selecione a etiqueta dentro do mesmo e elimine as três primeiras palavras do texto.Select the Second line of Delivery address card, select the label within that card, and then delete all of the text in it.

    Poderá ser tentador remover simplesmente o controlo de etiqueta e, em muitos casos, não há qualquer problema em fazê-lo.It may be tempting to simply remove the label control and, in many cases, that will work fine. Contudo, as fórmulas podem depender da existência deste controlo.But formulas might depend on that control being present. A abordagem mais segura é remover o texto ou definir a propriedade Visible (Visível) do controlo como falso.The safer approach is to remove the text or to set the Visible property of the control to false.

    Mudar o nome da etiqueta da segunda linha da morada de entrega da nota de venda

  3. No mesmo cartão, mova a caixa de entrada de texto para a etiqueta, de modo a reduzir o espaço entre a primeira e a segunda linha da morada.In the same card, move the text input box over the label to reduce the space between the first and second lines of the address.

    A altura do cartão diminui quando os respetivos conteúdos ocupam menos espaço.The height of the card shrinks when its contents take up less space.

    Mudar o nome da etiqueta da segunda linha da morada de entrega da nota de venda

Agora, vamos concentrar-nos na terceira linha da morada.Now let's turn our attention to the third line of the address. De forma semelhante ao que acabámos de fazer, vamos diminuir o texto de cada etiqueta destes cartões e dispor a caixa de entrada de texto no lado direito das etiquetas.Similar to what we just did, let's shorten the text of each label for these cards and arrange the Text input box to be to the right of each label. Eis os passos para o cartão State (Região):Here are the steps for the State card:

PassoStep DescriçãoDescription ResultadoResult
11 Selecione o cartão State para que as alças apareçam à volta do mesmo.Select the State card so that grab handles appear around it. Selecionar um cartão
22 Selecione a etiqueta dentro deste cartão para que as alças apareçam à volta da mesma.Select the label within this card so that grab handles appear around it. Selecionar um controlo dentro de um cartão
33 Coloque o cursor no lado direito do texto e, em seguida, elimine a parte de que já não precisamos.Place the cursor to the right of the text, and then delete the portion that we don't need. Alterar o texto de um controlo dentro de um cartão
44 Ao utilizar as alças nos lados, dimensione o controlo de etiqueta para se ajustar ao tamanho do texto novo.Using the grab handles on the sides, size the label control to fit the new text size. Redimensionar um controlo dentro de um cartão
55 Selecione o controlo de entrada de texto dentro deste cartão.Select the text input control within this card. Selecionar um controlo diferente dentro do cartão
66 Ao utilizar as alças nos lados, dimensione o controlo de entrada de texto para o tamanho que pretende.Using the grab handles on the sides, size the text input control to the size that you want. Redimensionar um controlo dentro de um cartão
77 Arraste a caixa de entrada de texto para cima e para a direita do controlo de etiqueta e, em seguida, largue-a.Drag the text input box up and to the right of the label control, and then drop the text input box. Mover um controlo dentro de um cartão
As nossas modificações ao cartão State estão agora concluídas.Our modifications to the State card are now complete. As modificações ao cartão estão concluídas

O resultado da terceira linha de morada completaThe result for the complete third address line:

Morada de entrega da nota de venda com terceira linha mais concisa

Tenha em conta que muitos dos cartões começam com fórmulas dinâmicas nas respetivas propriedades.Note that many of the cards start out with dynamic formulas for their properties. Por exemplo, o controlo de entrada de texto que redimensionámos e movemos acima tinha uma propriedade Width baseada na largura do respetivo controlo principal.For example, the Text input control that we resized and moved above had a Width property based on the width of its parent. Quando move ou redimensiona um controlo, estas fórmulas dinâmicas são substituídas por valores estáticos.When you move or resize a control, these dynamic formulas are replaced with static values. Se quiser, pode utilizar a barra de fórmulas para restaurar as fórmulas dinâmicas.If you want, you can restore the dynamic formulas by using the formula bar.

Desativar Ajustar às colunasTurning off Snap to columns

Por vezes, poderá ser útil ter um controlo mais fino do que aquele que as 12 colunas padrão proporcionam.Sometimes you'll want finer control than the standard 12 columns can provide. Nesses casos, pode desativar Ajustar às colunas e posicionar os cartões manualmente.For these cases, you can turn off Snap to columns and then position cards manually. O formulário continua a abranger 12 colunas, mas também pode premir a tecla Alt para posicionar e dimensionar manualmente os cartões conforme pretenda.The form will continue snapping to 12 columns, but you can also hold down the Alt key to manually position and size a card as you wish.

No nosso exemplo, os quatro componentes que compõem a terceira linha de morada têm exatamente a mesma largura.In our example, the four components that make up the third line of the address all have exactly the same width. No entanto, este pode não ser o melhor esquema, porque os nomes das cidades são mais compridos do que os das regiões e as caixas de entrada de texto dos países/regiões são pequenas, devido ao comprimento das respetivas etiquetas.But this may not be the best layout, as city names are longer than state abbreviations, and the Text input box for countries/regions is short due to the length of its label.

Para otimizar este espaço, desative Snap to columns, no painel do lado direito e mantenha premida a tecla Alt enquanto dimensiona e posiciona estes cartões.To optimize this space, turn off Snap to columns in the right-hand pane and then hold down the Alt key while sizing and positioning these cards. Sempre que mantém premida a tecla Alt, todos os controlos mostram legendas pretas.Whenever you hold down the Alt key, all controls show black captions. Este comportamento é predefinido e serve para lhe mostrar os nomes dos controlos.This behavior is by design to show you control names.

Posicionar e dimensionar com a tecla Alt premida

Após o cuidadoso posicionamento, o resultado tem tamanhos adequados para cada campo e até mesmo espaçamento horizontal entre os campos:After careful positioning, the result has appropriate sizes for each field and even spacing horizontally between fields:

Terceira linha da morada de entrega da nota de venda posicionada exatamente

Em resumo, quais são as diferenças quando Ajustar às colunas está ativado ou desativado?In summary, what are the differences when Snap to columns is on versus off?

ComportamentoBehavior Ajustar às colunas AtivadoSnap to columns On Ajustar às colunas DesativadoSnap to columns Off
O redimensionamento ajusta-se aResize snaps to Número de colunas que escolher:Number of columns you select:
1, 2, 3, 4, 6 ou 121, 2, 3, 4, 6, or 12
12 colunas12 columns
O ajuste do redimensionamento pode ser substituídoResize snap can be overriden NãoNo Sim, com a tecla AltYes, with Alt key
O esquema dos cartões entre linhas é alterado automaticamente (mais informações adiante)Cards automatically re-layout between rows (more on this later) SimYes NãoNo

Definir a largura e a alturaSet width and height

Tal como tudo o resto no PowerApps, o esquema do formulário é regido por propriedades nos controlos dos cartões.As with everything in PowerApps, the form's layout is governed by properties on the card controls. Como já foi descrito, pode alterar os valores destas propriedades ao arrastar os controlos para diferentes localizações ou as alças, para os redimensionar.As already described, you can change the values of these properties by dragging controls to different locations or dragging grab handles to resize controls. Contudo, irá deparar-se com situações em que vai querer compreender e manipular estas propriedades com mais precisão, especialmente se quiser fazer formulários dinâmicos com fórmulas.But you'll discover situations in which you'll want to understand and manipulate these properties more precisely, especially when making your forms dynamic with formulas.

Esquema básico: X, Y e larguraBasic Layout: X, Y, and Width

As propriedades X e Y controlam a posição dos cartões.The X and Y properties control the position of cards. Quando trabalhamos com controlos na tela em branco, estas propriedades fornecem uma posição absoluta.When we work with controls on the raw canvas, these properties provide an absolute position. Nos formulários, têm um significado diferente:In a form, these properties have a different meaning:

  • X: a ordem dentro de uma linha.X: Order within a row.
  • Y: o número da linha.Y: Row number.

Tal como sucede com os controlos na tela, a propriedade Width especifica a largura mínima do cartão (vamos falar mais sobre o aspeto mínimo mais adiante).Similar to controls on the canvas, the Width property specifies the minimum width of the card (more on the minimum aspect in a moment).

Vamos ver as propriedades X, Y e Width dos cartões no nosso formulário:Let's take a look at the X, Y, and Width properties of the cards in our form:

Nota de venda das coordenadas X e Y

Linhas demasiado grandesOverflowing rows

O que acontece se os cartões de uma linha forem demasiado grandes para caber numa linha?What happens if the cards on a row are too wide to fit on that row? Normalmente, não precisa de se preocupar com esta possibilidade.Normally you don't need to worry about this possibility. Com Ajustar às colunas , estas três propriedades são automaticamente ajustadas para que tudo se enquadre corretamente dentro das linhas, sem sobreposições.With Snap to columns on, these three properties will automatically be adjusted so that everything fits nicely within rows without overflowing.

No entanto, com Ajustar às colunas desativado e Width baseada em fórmulas em um ou mais dos cartões, é possível exceder linhas.But with Snap to columns turned off or a formula-based Width on one or more of your cards, overflowing a row can happen. Neste caso, os cartões são moldados de forma automática, de modo a que seja criada, efetivamente, outra linha.In this case, the cards will automatically wrap so that, effectively, another row is created. Por exemplo, vamos alterar manualmente a propriedade Width do nosso cartão Customer purchase order reference (primeira linha, terceiro item) para 500:For example, let's manually change the Width property of our Customer purchase order reference card (first row, third item) to 500:

Redimensionamento manual do cartão, passa para outra linha

Os três cartões na linha de cima já não cabem horizontalmente e foi criada outra linha para moldar o excesso.The three cards on the top row no longer fit horizontally, and another row has been created to wrap the overflow. A coordenada Y de todos estes cartões ainda é igual a 0 e os cartões Name e Description continuam a ter 1 em Y.The Y coordinate for all these cards is still the same at 0, and the Name and Description cards still have a Y of 1. Os cartões que tiverem valores de Y diferentes não são intercalados em linhas.Cards that have different Y values aren't merged across rows.

Pode utilizar este comportamento para criar um esquema completamente dinâmico, no qual os cartões são posicionados com base numa ordem Z, preenchendo o máximo possível antes de passarem para a linha seguinte.You can use this behavior to create a fully dynamic layout, where cards are placed based on a Z-order, filling across as much as possible before moving to the next row. Para obter este efeito, dê a todos os cartões o mesmo valor de Y e utilize X para a ordem dos mesmos.To achieve this effect, give all the cards the same Y value, and use X for the order of the cards.

Preencher espaços: WidthFitFilling spaces: WidthFit

A sobreposição no último exemplo criou um espaço a seguir ao cartão Order status, que era o segundo cartão na primeira linha.The overflow in the last example created a space after the Order status card, which was the second card in the first row. Poderíamos ajustar manualmente as propriedades Width dos dois cartões restantes para encher este espaço, mas esta é uma abordagem cansativa.We could manually adjust the Width properties of the two remaining cards to fill this space, but this approach is tedious.

Como alternativa, utilize a propriedade WidthFit.As an alternative, use the WidthFit property. Se esta propriedade estiver definida como verdadeiro num ou mais cartões numa linha, qualquer espaço restante na mesma será uniformemente dividido entre aqueles.If this property is set to true for one or more cards in a row, any remaining space on the row will be evenly divided between them. Foi por causa deste comportamento que dissemos acima que a propriedade Width dos cartões é um mínimo e o que é realmente visualizado pode ser mais largo.This behavior is why we said earlier that the Width property of a card is a minimum, and what is actually seen can be wider. Com esta propriedade, os cartões nunca vão encolher, apenas expandir-se.This property will never cause a card to shrink, only expand.

Se definirmos WidthFit como verdadeiro no cartão Order status, este preenche o espaço disponível, ao passo que o primeiro cartão permanece inalterado:If we set WidthFit to true on the Order status card, it fills the available space, while the first card remains unchanged:

WidthFit definido como verdadeiro no segundo cartão

Se também definirmos WidthFit como verdadeiro no cartão Order date (Data da encomenda), ambos os cartões dividem o espaço disponível uniformemente:If we also set WidthFit to true on the Order date card, both cards will evenly split the available space:

WidthFit definida como verdadeiro nos dois primeiros cartões

Tenha em conta que as alças destes cartões têm em consideração a largura extra disponibilizada por WidthFit e não a largura mínima fornecida pela propriedade Width.Note that grab handles on these cards take into account the extra width provided by WidthFit, not the minimum width provided by the Width property. Pode ser confuso manipular a propriedade Width tendo a WidthFit ativada. Poderá ser útil desativá-la, fazer alterações a Width e, depois, voltar a ativá-la.It can be confusing to manipulate the Width property while WidthFit is turned on; you may want to turn it off, make changes to Width, and then turn it back on.

Em que casos é que WidthFit pode ser útil?When might WidthFit be useful? Se tiver um campo que só é utilizado em determinadas situações, pode definir a propriedade Visible (Visível) como falso e os outros cartões na linha preencherão automaticamente o espaço à volta.If you have a field that is used only in certain situations, you can set its Visible property to false, and the other cards on the row will automatically fill the space around it. Pode utilizar uma fórmula que mostra um campo apenas quando outro campo tem um determinado valor.You might want to use a formula that shows a field only when another field has a particular value.

Aqui, vamos definir a propriedade Visible do campo Order status para um falso estático:Here, we'll set the Visible property of the Order status field to a static false:

WidthFit definida como verdadeiro no primeiro cartão com Status order invisível

Com o segundo cartão efetivamente removido, o terceiro pode agora voltar para a mesma linha do primeiro.With the second card effectively removed, the third card can now return to the same row as the first card. O primeiro cartão ainda tem WidthFit definida como verdadeiro, pelo que se expande só a si para preencher o espaço disponível.The first card still has WidthFit set to true, so it alone expands to fill the available space.

Uma vez que Order status está invisível, não o pode selecionar tão facilmente na tela.Because Order status is invisible, you can't select it as easily on the canvas. No entanto, pode selecionar qualquer controlo, visível ou não, na lista hierárquica de controlos, no lado esquerdo do ecrã.However, you can select any control, visible or not, in the hierarchical list of controls on the left side of the screen.

AlturaHeight

A propriedade Height rege a altura de cada cartão.The Height property governs the height of each card. Os cartões têm o equivalente da WidthFit para Height, que está sempre definida como verdadeiro.Cards have the equivalent of WidthFit for Height, and it's always set to true. Imagine que existe uma propriedade HeightFit, mas não a procure no produto porque ainda não está exposta.Imagine that a HeightFit property exists, but don't look for it in the product because such a property isn't yet exposed.

Não pode desativar este comportamento, pelo que alterar a alturas dos cartões pode ser um desafio.You can't turn off this behavior, so changing the heights of cards can be challenging. Todos os cartões numa linha parecem ter a mesma altura do cartão mais alto.All cards within a row appear to be the same height as the tallest card. Pode encarar uma linha da seguinte forma:You might look at a row like this:

WidthFit definida como verdadeiro no primeiro cartão com status order invisível

Que cartão é que está a definir a altura da linha?Which card is making the row tall? Na imagem anterior, está selecionado o cartão Total amount (Montante total), que parece ser alto, mas a respetiva propriedade Height está definida como 80 (igual à altura da primeira linha).In the previous graphic, the Total amount card is selected and appears tall, but its Height property is set to 80 (same as the height of the first row). Para reduzir a altura de uma linha, tem de reduzir a Altura do cartão mais alto nessa linha e não pode identificar o cartão mais alto sem rever a propriedade Height de cada cartão.To reduce the height of a row, you must reduce the Height of the tallest card in that row, and you can't identify the tallest card without reviewing the Height property of each card.

AutoHeightAutoHeight

Também é possível que um cartão seja mais alto do que o que estava à espera se tiver um controlo cuja propriedade AutoHeight esteja definida como verdadeiro.A card might also be taller than you expect if it contains a control for which the AutoHeight property is set to true. Por exemplo, muitos cartões contêm uma etiqueta que apresenta uma mensagem de erro se o valor do campo provocar um problema de validação.For example, many cards contain a label that displays an error message if the field's value causes a validation problem.

Se não houver texto para apresentar (sem erro), a etiqueta assume zero com altura.Without any text to display (no error), the label collapses to zero height. Se não soubesse o que sabe, não saberia que está presente e é assim que deve ser:If you didn't know any better, you wouldn't know it was there, and that's as it should be:

Cartões que contêm controlos com AutoHeight definido como verdadeiro e que não mostram altura

No lado esquerdo do ecrã, a lista de controlos ostra ErrorMessage1, que é o controlo da etiqueta.On the left side of the screen, the list of controls shows ErrorMessage1, which is our label control. Quando atualiza uma aplicação, pode selecionar este controlo para lhe conferir alguma altura e mostrar alças com as quais pode posicioná-lo e dimensioná-lo.As you update an app, you can select this control to give it some height and show grab handles with which you can position and size the control. O "A" numa caixa azul indica que o controlo tem AutoHeight definido como verdadeiro:The "A" in a blue box indicates that the control has AutoHeight set to true:

No momento da criação, os controlos de AutoHeight mostram alguma altura, facilitando o arrastar e largar

A propriedade Text deste controlo está definida como Parent.Error, que é utilizado para obter informações de erro dinâmicas com base em regras de validação.The Text property of this control is set to Parent.Error, which is used to obtain dynamic error information based on validation rules. Para efeitos de ilustração, vamos definir estaticamente a propriedade Text deste controlo, o que aumenta a respetiva altura (e, por extensão, a altura do cartão) para acomodar o comprimento do texto:For illustration purposes, let's statically set the Text property of this control, which will increase its height (and, by extension, the height of the card) to accommodate the length of the text:

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

Vamos tornar a mensagem de erro um pouco mais comprida e, mais uma vez, o controlo e o cartão aumentam para o acomodar.Let's make the error message a little longer, and again the control and the card grow to accommodate. Note que a linha cresce no geral em altura, mantendo o alinhamento vertical entre os cartões:Note that the row overall grows in height, retaining vertical alignment between the cards:

Com uma mensagem de erro mais comprida, o controlo e o cartão aumenta ainda mais e repare que os cartões na mesma linha aumentam ao mesmo tempo