Entender cartões de dadosUnderstand data cards

Os controles Cartão são os blocos de construção dos controles Editar formulário e Exibir formulário.Card controls are the building blocks of the Edit form and Display form controls. O formulário representa todo o registro, e cada cartão representa um único campo desse registro.The form represents the entire record, and each card represents a single field of that record.

Após de selecionar um controle de formulário no espaço de trabalho de design, você pode interagir com cartões mais facilmente no painel à direita.You can interact with cards most easily in the right-hand pane after you select a form control in the design workspace. Nesse painel, você pode escolher quais campos serão exibidos, além de como mostrar cada campo e em qual ordem mostrá-los.In that pane, you can choose which fields to show, how to show each field, and in what order to show them. Este exemplo mostra um controle Editar formulário em um aplicativo criado de uma lista do SharePoint denominada Ativos.This example shows an Edit form control in an app built from a SharePoint list that's named Assets.

Para começar a usar cartões, consulte adicionar um formulário e entender formulários de dados.To get started with cards, see add a form and understand data forms. O restante deste tópico apresenta mais detalhes sobre como os cartões funcionam e como é possível personalizar ou até mesmo criar seu próprio cartão.The remainder of this topic goes into more detail about how cards work and how you can customize or even create your own.

Cartões predefinidosPredefined cards

O PowerApps oferece um conjunto predefinido de cartões para cadeias de caracteres, números e outros tipos de dados.PowerApps offers a predefined set of cards for strings, numbers, and other data types. No painel direito, é possível ver as variações disponíveis e alterar o cartão usado para um campo:In the right-hand pane, you can see the variations available and change the card used for a field:

Nesse exemplo, um cartão de texto de linha única foi selecionado, mas o texto da URL é maior do que pode ser mostrado em uma única linha.In this example, a single-line text card is selected, but the URL's text is longer than can be shown on a single line. Vamos alterá-lo para um cartão de texto de várias linhas para dar aos usuários mais espaço para editar:Let's change this to a multi-line text card to give our users more room to edit:

Vários campos desta fonte de dados não estão sendo mostrados, mas você pode mostrar ou ocultar um campo selecionando a respectiva caixa de seleção.Several fields of this data source aren't being shown, but you can show or hide a field by selecting its checkbox. Este exemplo ilustra como mostrar o campo SecurityCode.This example illustrates how to show the SecurityCode field.

Personalizar um cartãoCustomize a card

Os cartões abrangem outros controles.Cards comprise other controls. Em um controle Editar formulário, o usuário insere dados em um controle Entrada de texto padrão que você adicionar na guia Inserir.In an Edit form control, the user enters data in a standard Text input control that you add from the Insert tab.

Examinaremos um exemplo de como alterar a aparência do cartão manipulando controles presentes nele.Let's walk through an example of how to change a card's appearance by manipulating controls in it.

  1. Primeiro, vamos voltar para o cartão que inserimos mais recentemente, no campo SecurityCode.First, let's return to the card that we inserted most recently, for the SecurityCode field. Selecione este cartão clicando ou tocando nele uma vez:Select this card by clicking or tapping it once:

  2. Selecione o controle Entrada de texto dentro do cartão clicando ou tocando no próprio controle.Select the Text input control inside the card by clicking or tapping the input control itself.

  3. Mova esse controle para dentro do cartão arrastando a caixa de seleção e redimensione o controle arrastando as alças ao longo da borda da caixa de seleção:Move this control within the card by dragging the selection box, and resize the control by dragging the handles along the edge of the selection box:

É possível redimensionar, mover e fazer outras modificações a controles dentro de um cartão, mas não é possível excluí-los sem desbloqueá-los primeiro.You can resize, move, and make other modifications to controls within a card, but you can't delete it without unlocking it first.

Desbloquear uma fichaUnlock a card

Além de conter controles, os cartões em si são controles que têm propriedades e fórmulas como qualquer outro controle.In addition to containing controls, cards themselves are controls that have properties and formulas just like any other control. Quando você opta por exibir um campo em um formulário, o painel direito cria automaticamente o cartão para você e gera as fórmulas necessárias.When you choose to display a field on a form, the right-hand pane automatically creates the card for you and generates the needed formulas. Podemos ver essas fórmulas na guia Avançado do painel direito:We can see these formulas in the Advanced tab of the right-hand pane:

Vemos imediatamente uma das propriedades mais importantes do cartão: a propriedade DataField.We immediately see one of the most important properties of the card: the DataField property. Essa propriedade indica qual campo da fonte de dados que o usuário vê e pode editar nesse cartão.This property indicates which field of the data source the user sees and can edit in this card.

Na guia Avançado, a faixa na parte superior indica que as propriedades desse cartão estão bloqueadas.On the Advanced tab, the banner at the top indicates that the properties of this card are locked. Um ícone de cadeado também é exibido ao lado das propriedades DataField, DisplayName e Required.A lock icon also appears next to the DataField, DisplayName, and Required properties. O painel direito criou essas fórmulas, e o bloqueio impede alterações acidentais nessas propriedades.The right-hand pane created these formulas, and the lock prevents accidental changes to these properties.

Clique ou toque na faixa na parte superior para desbloquear o cartão para que você possa modificar essas propriedades:Click or tap the banner at the top to unlock the card so that you can modify these properties:

Vamos modificar o DisplayName para colocar um espaço entre Ativo e ID.Let's modify the DisplayName to put a space between Asset and ID. Com essa alteração, vamos alterar o que foi gerado para nós.By making this change, we're altering what was generated for us. No painel direito, esse cartão tem um rótulo diferente:In the right-hand pane, this card has a different label:

Agora assumimos o controle desse cartão e podemos modificá-lo ainda mais de acordo com as nossas necessidades.We've now taken control over this card and can modify it further to fit our need. Mas perdemos a capacidade de alterar o cartão de uma representação para outra (por exemplo, o texto de linha única para texto de várias linhas) como fizemos antes.But we've lost the ability to change the card from one representation to another (for example, single-line text to multi-line text) as we did before. Nos transformamos o cartão predefinido em um "cartão personalizado" que controlamos agora.We've transformed the predefined card into a "custom card" that we now control.

Importante: não será possível bloquear um cartão novamente se você o desbloquear.Important: You can't relock a card if you unlock it. Para retornar um cartão a um estado bloqueado, remova-o e insira-o novamente no painel direito.To get a card back to a locked state, remove it, and reinsert it in the right-hand pane.

Você pode alterar a aparência e comportamento de um cartão desbloqueado de várias maneiras, como adição e exclusão de controles nele.You can change the appearance and behavior of an unlocked card in a variety of ways, such as adding and deleting controls within it. Por exemplo, você pode adicionar uma forma de estrela do menu Ícones na guia Inserir.For example, you can add a star shape from the Icons menu on the Insert tab.

A estrela agora faz parte do cartão e o acompanhará se, por exemplo, você reordenar os cartões dentro do formulário.The star is now a part of the card and will travel with it if, for example, you reorder the cards within the form.

Como outro exemplo, desbloqueie o cartão ImageURL e, em seguida, adicione um controle Imagem a ele da guia Inserir:As another example, unlock the ImageURL card, and then add an Image control to it from the Insert tab:

Na barra de fórmulas, defina a propriedade Image desse controle como TextBox.Text, em que TextBox é o nome do controle Entrada de texto que contém a URL:In the formula bar, set the Image property of this control to TextBox.Text, where TextBox is the name of the Text input control that holds the URL:

Dica: pressione a tecla Alt para mostrar o nome de cada controle.Tip: Press the Alt key to show the name of each control.

E agora é possível ver as imagens e editar suas URLs.And now we can see the images and edit their URLs. Observe que poderíamos ter usado Parent.Default como a propriedade Imagem, mas ela não teria sido atualizada se o usuário tivesse alterado a URL.Note that we could have used Parent.Default as the Image property, but it wouldn't have updated if the user changed the URL.

Podemos fazer a mesma coisa na segunda tela desse aplicativo, em que podemos usar um controle Exibir formulário para exibir os detalhes de um registro.We can do the same thing on the second screen of this app, where we use a Display form control to display the details of a record. Nesse caso, podemos querer ocultar o rótulo (defina a propriedade Visible do rótulo, não o cartão, como false), porque o usuário não editará a URL nessa tela:In this case, we may want to hide the label (set the Visible property of the label, not the card, to false) because the user won't edit the URL on that screen:

Interagir com um formulárioInteract with a form

Depois de desbloquear um cartão, é possível alterar a maneira como ele interage com o formulário que o contém.After you unlock a card, you can change how it interacts with the form that contains it.

Abaixo há algumas diretrizes sobre como os controles devem funcionar com o cartão e como os cartões devem funcionar com o formulário.Below are some guidelines for how controls should work with their card and how the cards should work with the form. Essas são apenas diretrizes.These are only guidelines. Como em qualquer controle no PowerApps, é possível criar fórmulas que referenciam qualquer outro controle no PowerApps e isso também ocorre com cartões e controles dentro de cartões.As with any control in PowerApps, you can create formulas that reference any other control in PowerApps, and that's no less true for cards and controls within cards. Seja criativo: é possível criar um aplicativo de várias maneiras.Be creative: you can create an app in many ways.

Propriedade DataFieldDataField property

A propriedade mais importante no cartão é a propriedade DataField.The most important property on the card is the DataField property. Essa propriedade realiza a validação, qual campo é atualizado e outros aspectos do cartão.This property drives validation, what field is updated, and other aspects of the card.

Fluxo de entrada de informaçõesInformation flowing in

Como um contêiner, o formulário disponibiliza ThisItem para todos os cartões dentro dele.As a container, the form makes ThisItem available to all cards within it. Esse registro contém todos os campos do registro atual de seu interesse.This record contains all of the fields for the current record of interest.

A propriedade Padrão de todo cartão deve ser definida como ThisItem.FieldName.The Default property of every card should be set to ThisItem.FieldName. Em determinadas circunstâncias, talvez convenha transformar esse valor na forma de entrada.Under certain circumstances, you might want to transform this value on the way in. Por exemplo, talvez convenha formatar uma cadeia de caracteres ou converter o valor de um idioma para outro.For example, you might want to format a string or translate the value from one language to another.

Cada controle no cartão deve referenciar Parent.Default para obter o valor do campo.Each control within the card should reference Parent.Default to get at the field's value. Essa estratégia fornece um nível de encapsulamento para o cartão para que a propriedade Padrão do cartão possa ser alterada sem alterar as fórmulas internas do cartão.This strategy provides a level of encapsulation for the card so that the card's Default property can change without changing the internal formulas of the card.

Por padrão, as propriedades DefaultValue e Obrigatório são extraídas dos metadados da fonte de dados com base na propriedade DataField.By default, DefaultValue and Required properties are taken from the data source's metadata based on the DataField property. É possível substituir essas fórmulas por sua própria lógica, integrando os metadados da fonte de dados usando a função DataSourceInfo.You can override these formulas with your own logic, integrating the data source's metadata by using the DataSourceInfo function.

Fluxo de saída de informaçõesInformation flowing out

Depois que o usuário modifica um registro usando controles nos cartões, a função SubmitForm salva essas alterações na fonte de dados.After the user modifies a record by using controls in the cards, the SubmitForm function saves those changes to the data source. Quando essa função é executada, o controle de formulário lê os valores da propriedade DataField de cada cartão para saber qual campo alterar.When that function runs, the form control reads the values of each card's DataField property to know what field to change.

O controle de formulário também lê o valor da propriedade Atualizar de cada cartão.The form control also reads the value of each card's Update property. Logo esse valor será armazenado na fonte de dados para esse campo.This value will be stored in the data source for this field. Este é o lugar para aplicar outra transformação, talvez para reverter a transformação aplicada na fórmula Padrão do cartão.This is the place to apply another transform, perhaps to reverse the transform that was applied in the card's Default formula.

A propriedade Válido é direcionada dos metadados da fonte de dados, com base na propriedade DataField.The Valid property is driven from the metadata of the data source, based on the DataField property. Ela também é baseada na propriedade Obrigatório e se a propriedade Atualizar contiver um valor.It's also based on the Required property and whether the Update property contains a value. Se o valor na propriedade Atualizar não for válido, a propriedade Erro fornecerá uma mensagem de erro amigável.If the value on the Update property isn't valid, the Error property provides a user-friendly error message.

Se a propriedade DataField de um cartão estiver em branco, o cartão será apenas um contêiner de controles.If the DataField property of a card is blank, the card is just a container of controls. Suas propriedades Válido e Atualizar não participam quando o formulário é enviado.Its Valid and Update properties don't participate when the form is submitted.

Dissecando um exemploDissecting an example

Vamos examinar os controles que compõem um cartão básico de entrada de dados.Let's look at the controls that make up a basic data-entry card. O espaço entre controles foi aumentado para mostrar cada um de forma mais clara:The space between controls has been increased to show each more clearly:

Mantenha pressionada a tecla Alt para mostrar os nomes dos controles que compõem este cartão:Hold down the Alt key to show the names of the controls that make up this card:

Quatro controles fazem esse cartão funcionar:Four controls make this card work:

NomeName TipoType DescriçãoDescription
TextRequiredStarTextRequiredStar Controle RótuloLabel control Exibe uma estrela, normalmente usada em formulários de entrada de dados para indicar que um campo é obrigatório.Displays a star, which is commonly used on data-entry forms to indicate that a field is required.
TextFieldDisplayNameTextFieldDisplayName Controle RótuloLabel control Exibe o nome amigável desse campo.Displays the user-friendly name of this field. Esse nome pode ser diferente do que está no esquema da fonte de dados.This name can differ from what is in the data source's schema.
InputTextInputText Controle Texto de entradaInput text control Exibe o valor inicial do campo e permite que o usuário altere esse valor.Displays the initial value of the field and allows the user to change that value.
TextErrorMessageTextErrorMessage Controle RótuloLabel control Exibe uma mensagem de erro amigável ao usuário se ocorre um problema com a validação.Displays a user-friendly error message to the user if a problem occurs with validation. Também garante que o campo tem um valor caso seja obrigatório ter um.Also ensures that the field has a value if one is required.

Para preencher esses controles com os dados, suas propriedades podem ser controladas com base nas propriedades do cartão, por meio dessas fórmulas principais.To populate these controls with data, their properties can be driven from the properties of the card, through these key formulas. Observe que nenhuma dessas fórmulas se refere a um campo específico.Note that none of these formulas refers to a specific field. Em vez disso, todas as informações são provenientes do cartão.Instead, all information comes from the card.

Propriedade ControleControl property FórmulaFormula DescriçãoDescription
TextRequiredStar.VisibleTextRequiredStar.Visible Parent.RequiredParent.Required A estrela será exibida somente se o campo for obrigatório.The star appears only if the field is required. Obrigatório é uma fórmula controlada por você ou pelos metadados da fonte de dados.Required is a formula that's driven by you or the metadata of the data source.
TextFieldDisplayName.TextTextFieldDisplayName.Text Parent.DisplayNameParent.DisplayName O controle de caixa de texto mostra o nome amigável, que você ou os metadados da fonte de dados fornece e que está definido na propriedade DisplayName do cartão.The text-box control shows the user-friendly name, which you or the data source's metadata provides, and which is set on the card's DisplayName property.
InputText.DefaultInputText.Default Parent.DefaultParent.Default O controle de entrada de texto mostra inicialmente o valor do campo da fonte de dados, conforme fornecido pelo valor padrão do cartão.The text-input control initially shows the value of the field from the data source, as provided by the card's default value.
TextErrorMessage.TextTextErrorMessage.Text Parent.ErrorParent.Error Se ocorrer um problema de validação, a propriedade Erro do cartão fornecerá uma mensagem de erro apropriada.If a validation problem occurs, the card's Error property provides an appropriate error message.

Para extrair informações desses controles e retorná-las para a fonte de dados, temos as seguintes fórmulas principais:To pull information out of these controls and push it back into the data source, we have the following key formulas:

Nome do controleControl name FórmulaFormula DescriçãoDescription
DataCard.DataFieldDataCard.DataField "ApproverEmail""ApproverEmail" O nome do campo ao qual o usuário pode exibir e editar nesse cartão.The name of the field that the user can display and edit in this card.
DataCard.UpdateDataCard.Update InputText.TextInputText.Text O valor a ser validado e retornado para a fonte de dados quando SubmitForm é executado.The value to validate and push back into the data source when SubmitForm runs.