Entender formulários de dados no Microsoft PowerAppsUnderstand data forms in Microsoft PowerApps

Adicione três tipos de controles para que o usuário possa procurar um registro, exibir detalhes sobre esse registro e editar ou criar um registro:Add three types of controls so that the user can browse for a record, display details about that record, and edit or create a record:

AtividadeActivity ControleControl DescriçãoDescription
Procurar um registroBrowse for a record Controle GaleriaGallery control Filtre, classifique, pesquise e percorra registros em uma fonte de dados e selecione um registro específico.Filter, sort, search, and scroll through records in a data source, and select a specific record. Exiba apenas alguns campos de cada registro para mostrar vários registros de uma vez, até mesmo em uma tela pequena.Display only a few fields from each record to show several records at a time, even on a small screen.
Exibir os detalhes de um registroShow details of a record Controle Exibir formulárioDisplay form control Para um único registro, exiba vários ou todos os campos no registro.For a single record, display many or all fields in that record.
Editar ou criar um registroEdit or create a record Controle Editar formulárioEdit form control Atualize um ou mais campos em um único registro (ou crie um registro começando com os valores padrão) e salve essas alterações de volta para a fonte de dados subjacente.Update one or more fields in a single record (or create a record starting with default values), and save those changes back to the underlying data source.

Coloque cada controle em uma tela diferente para torná-las mais fáceis de distinguir:Put each control on a different screen to make them easier to distinguish:

Procure, exiba e edite registros em três telas

Como este tópico descreve, combine esses controles com fórmulas para criar a experiência geral do usuário.As this topic describes, combine these controls with formulas to create the overall user experience.

Pré-requisitosPrerequisites

Explorar um aplicativo geradoExplore a generated app

O PowerApps pode gerar automaticamente um aplicativo com base em uma fonte de dados que você especificar.PowerApps can automatically generate an app based on a data source that you specify. Cada aplicativo contém três telas com os controles descritos anteriormente e as fórmulas que os conectam.Each app contains three screens with the controls described earlier and formulas that connect them. Execute esses aplicativos de maneira “predefinida”, personalize-os para seus objetivos específicos ou examine como eles funcionam para que você possa aprender conceitos úteis que se aplicam a seus próprios aplicativos.Run these apps "out of the box," customize them for your specific goals, or examine how they work so that you can learn useful concepts that apply to your own apps. Nas seções a seguir, inspecione as telas, controles e fórmulas que acionam um aplicativo gerado.In the following sections, inspect the screens, controls, and formulas that drive a generated app.

Tela de navegaçãoBrowse screen

Controles da tela de navegação

Essa tela apresenta essas fórmulas principais:This screen features these key formulas:

ControleControl Comportamento com suporteSupported behavior FórmulaFormula
BrowseGallery1BrowseGallery1 Exiba registros da fonte de dados de Ativos.Display records from the Assets data source. A propriedade Itens da galeria é definida como uma fórmula que se baseia na fonte de dados de Ativos.The Items property of the gallery is set to a formula that's based on the Assets data source.
ImageNewItem1ImageNewItem1 Exiba a tela Editar e criar com cada campo definido como um valor padrão, para que o usuário possa criar facilmente um registro.Display the Edit and Create screen with each field set to a default value, so that the user can easily create a record. A propriedade OnSelect da imagem é definida para esta fórmula:The OnSelect property of the image is set to this formula:
NewForm( EditForm1 );
Navigate( EditScreen1, None )
NewForm( EditForm1 );
Navigate( EditScreen1, None )
NextArrow1 (na galeria)NextArrow1 (in the gallery) Exiba a tela Detalhes para exibir vários ou todos os campos do registro atualmente selecionado.Display the Details screen to view many or all fields of the currently selected record. A propriedade OnSelect da seta é definida para esta fórmula:The OnSelect property of the arrow is set to this formula:
Navigate( DetailScreen1, None )Navigate( DetailScreen1, None )

O controle principal nessa tela, BrowseGallery1, aborda a maioria da área da tela.The primary control on this screen, BrowseGallery1, covers most of the area of the screen. O usuário pode rolar por toda a galeria para localizar um registro específico para exibir mais campos ou atualizar.The user can scroll through the gallery to find a specific record to display more fields or to update.

Defina a propriedade Itens de uma galeria para exibir os registros de uma fonte de dados nele.Set the Items property of a gallery to show records from a data source in it. Por exemplo, defina essa propriedade como Ativos para mostrar os registros de uma fonte de dados desse nome.For example, set that property to Assets to show records from a data source of that name.

Observação

Em um aplicativo gerado, Itens é definido como uma fórmula significativamente mais complicada por padrão para que o usuário possa classificar e pesquisar registros.In a generated app, Items is set to a significantly more complicated formula by default so that the user can sort and search for records. Você aprenderá a criar essa fórmula mais tarde neste tópico; a versão mais simples é suficiente por enquanto.You'll learn how to build that formula later in this topic; the simpler version is enough for now.

Em vez de localizar um registro para exibir ou editar, o usuário pode criar um registro selecionando o símbolo "+" acima da galeria.Instead of finding a record to display or edit, the user can create a record by selecting the "+" symbol above the gallery. Crie esse efeito, adicionando um controle de Imagem, mostrando um símbolo "+" nele e definindo sua propriedade OnSelect para esta fórmula:Create this effect by adding an Image control, showing a "+" symbol in it, and setting its OnSelect property to this formula:
NewForm( EditForm1 ); Navigate( EditScreen1, None )NewForm( EditForm1 ); Navigate( EditScreen1, None )

Esta fórmula abre a tela Editar e Criar, que apresenta um controle Editar formulário chamado EditForm1.This formula opens the Edit and Create screen, which features an Edit form control named EditForm1. A fórmula também muda esse formulário para o modo Novo, no qual o formulário mostra valores padrão da fonte de dados para que o usuário possa criar facilmente um registro do zero.The formula also switches that form into New mode, in which the form shows default values from the data source so that the user can easily create a record from scratch.

Para examinar qualquer controle que aparece em BrowseGallery1, selecione o controle na primeira seção dessa galeria, que serve como um modelo para todas as outras seções.To examine any control that appears in BrowseGallery1, select that control in the first section of that gallery, which serves as a template for all other sections. Por exemplo, selecione o controle Rótulo intermediário na borda esquerda:For example, select the middle Label control on the left edge:

Controles da tela de navegação

Neste exemplo, a propriedade de Texto do controle é definida como ThisItem.AssignedTo, que é um campo na fonte de dados de Ativos.In this example, the control's Text property is set to ThisItem.AssignedTo, which is a field in the Assets data source. A propriedade Text dos outros três controles Rótulo na galeria é definida como fórmulas semelhantes e cada controle mostra um campo diferente na fonte de dados.The Text property of the other three Label controls in the gallery are set to similar formulas, and each control shows a different field in the data source.

Selecione o controle de Forma (a seta) e confirme se a propriedade OnSelect está definida como esta fórmula:Select the Shape control (the arrow), and confirm that its OnSelect property is set to this formula:
Navigate( DetailScreen1, None )Navigate( DetailScreen1, None )

Se o usuário localizar um registro em BrowseGallery1, ele poderá selecionar a seta para esse registro mostrar mais informações sobre ele em DetailScreen1.If the user finds a record in BrowseGallery1, the user can select the arrow for that record to show more information about it in DetailScreen1. Ao selecionar uma seta, o usuário altera o valor da propriedade Selecionado de BrowseGallery1.By selecting an arrow, the user changes the value of the Selected property of BrowseGallery1. Neste aplicativo, propriedade determina qual registro aparecerá não apenas em DetailScreen1, mas também, se o usuário decidir atualizar o registro, na tela Editar e Criar.In this app, that property determines which record appears in not only DetailScreen1 but also, if the user decides to update the record, the Edit and Create screen.

Tela de detalhesDetail screen

Controles da tela de detalhes

Essa tela apresenta essas fórmulas principais:This screen features these key formulas:

ControleControl Comportamento com suporteSupported behavior FórmulaFormula
DetailForm1DetailForm1 Exibe um registro na fonte de dados de AtivosDisplays a record in the Assets data source Defina a propriedade DataSource como Ativos.Set the DataSource property to Assets.
DetailForm1DetailForm1 Determina qual registro exibir.Determines which record to display. Em um aplicativo gerado, exibe o registro que o usuário selecionou na galeria.In a generated app, displays the record that the user selected in the gallery. Defina a propriedade Item desse controle como este valor:Set the Item property of this control to this value:
BrowseGallery1.SelectedBrowseGallery1.Selected
Controles de CartãoCard controls Em um controle Exibir formulário, exibe um único campo em um registro.In a Display form control, displays a single field in a record. Defina a propriedade DataField com o nome de um campo, entre aspas duplas (por exemplo, "Nome").Set the DataField property to the name of a field, enclosed in double quotation marks (for example, "Name").
ImageBackArrow1ImageBackArrow1 Quando o usuário seleciona esse controle, BrowseScreen1 é aberto.When the user selects this control, opens BrowseScreen1. Defina a propriedade OnSelect como esta fórmula:Set the OnSelect property to this formula:
Back()Back()
ImageDelete1ImageDelete1 Quando o usuário seleciona esse controle, ele exclui um registro.When the user selects this control, deletes a record. Defina a propriedade OnSelect como esta fórmula:Set the OnSelect property to this formula:
Remove( Assets, BrowseGallery1.Selected )Remove( Assets, BrowseGallery1.Selected )
ImageEdit1ImageEdit1 Quando o usuário seleciona esse controle, abre a tela Editar e criar para o registro atual.When the user selects this control, opens the Edit and Create screen to the current record. Defina a propriedade OnSelect como esta fórmula:Set the OnSelect property to this formula:
Navigate( EditScreen1, None )Navigate( EditScreen1, None )

Na parte superior da tela, três imagens ficam fora de DetailForm1 e atuam como botões, orquestrando entre as três telas do aplicativo.At the top of the screen, three images sit outside of DetailForm1 and act as buttons, orchestrating between the three screens of the app.

DetailForm1 domina esta tela e exibe o registro que o usuário selecionou na galeria (porque a propriedade Item do formulário está definida como BrowseGallery1.Selected).DetailForm1 dominates this screen and displays the record that the user selected in the gallery (because the form's Item property is set to BrowseGallery1.Selected). A propriedade DataSource do formulário também fornece metadados sobre a fonte de dados, como um nome de exibição amigável para cada campo.The DataSource property of the form also provides metadata about the data source, such as a user-friendly display name for each field.

DetailForm1 contém vários controles de Cartão.DetailForm1 contains several Card controls. Você pode selecionar o próprio controle de Cartão ou o controle que ele contém para descobrir informações adicionais.You can select either the Card control itself or the control that it contains to discover additional information.

Cartão de detalhes e controles de cartão selecionados na experiência de criação

A propriedade DataField de um controle de Cartão determina qual campo o cartão exibe.The DataField property of a Card control determines which field the card displays. Nesse caso, essa propriedade é definida como AssetID.In this case, that property is set to AssetID. O cartão contém um controle Rótulo para o qual a propriedade Text está definida como Parent.Default.The card contains a Label control for which the Text property is set to Parent.Default. Esse controle mostra o valor Padrão para o cartão, que é definido por meio da propriedade DataField.This control shows the Default value for the card, which is set through the DataField property.

Em um aplicativo gerado, os controles de Cartão estão bloqueados por padrão.In a generated app, Card controls are locked by default. Quando um cartão estiver bloqueada, você não poderá modificar algumas propriedades, como DataField e a barra da fórmula não está disponível para essas propriedades.When a card is locked, you can't modify some properties, such as DataField, and the formula bar is unavailable for those properties. Essa restrição ajuda a garantir que suas personalizações não interrompam a funcionalidade básica do aplicativo gerado.This restriction helps ensure that your customizations don't break the basic functionality of the generated app. No entanto, você pode alterar algumas propriedades de um cartão e seus controles no painel direito:However, you can change some properties of a card and its controls in the right-hand pane:

Tela de detalhes com o painel de opções aberto

No painel à direita, você pode selecionar quais campos exibir e qual tipo de controle exibe cada campo.In the right-hand pane, you can select which fields to display and in which kind of control each field displays.

Tela Editar/criarEdit/Create screen

Controles da tela Editar

Essa tela apresenta essas fórmulas principais:This screen features these key formulas:

ControleControl Comportamento com suporteSupported behavior FórmulaFormula
EditForm1EditForm1 Exibe um registro na fonte de dados de Ativos.Displays a record in the Assets data source. Defina a propriedade DataSource como Ativos.Set the DataSource property to Assets.
EditForm1EditForm1 Determina qual registro exibir.Determines which record to display. Em um aplicativo gerado, exibe o registro que o usuário selecionou em BrowseScreen1.In a generated app, displays the record that the user selected in BrowseScreen1. Defina a propriedade Item com este valor:Set the Item property to this value:
BrowseGallery1.SelectedBrowseGallery1.Selected
Controles de CartãoCard controls Em um controle Editar formulário, fornece controles para que o usuário possa editar um ou mais campos em um registro.In a Edit form control, provides controls so that the user can edit one or more fields in a record. Defina a propriedade DataField com o nome de um campo, entre aspas duplas (por exemplo, "Nome").Set the DataField property to the name of a field, enclosed in double quotation marks (for example, "Name").
ImageCancel1ImageCancel1 Quando o usuário seleciona esse controle, descarta todas as alterações em andamento e abre a tela Detalhes.When the user selects this control, discards any changes in progress, and opens the Details screen. Defina a propriedade OnSelect como esta fórmula:Set the OnSelect property to this formula:
ResetForm( EditForm1 ); Back()ResetForm( EditForm1 ); Back()
ImageAccept1ImageAccept1 Quando o usuário seleciona esse controle, envia as alterações para a fonte de dados.When the user selects this control, submits changes to the data source. Defina a propriedade OnSelect como esta fórmula:Set the OnSelect property to this formula:
SubmitForm( EditForm1 )SubmitForm( EditForm1 )
EditForm1EditForm1 Se alterações forem aceitas, retornará para a tela anterior.If changes are accepted, returns to the previous screen. Defina a propriedade OnSuccess como esta fórmula:Set the OnSuccess property to this formula:
Back()Back()
EditForm1EditForm1 Se as alterações não forem aceitas, permanecerá na tela atual para que o usuário possa corrigir todos os problemas e tentar enviar novamente.If changes aren't accepted, remain on the current screen so that the user can fix any issues and try to submit again. Deixe a propriedade OnFailure em branco.Leave the OnFailure property blank.
LblFormError1LblFormError1 Se as alterações não forem aceitas, mostrará uma mensagem de erro.If changes aren't accepted, shows an error message. Defina a propriedade de Texto com este valor:Set the Text property to this value:
EditForm1.ErrorEditForm1.Error

Como na tela de Detalhes, um controle de formulário, denominado EditForm1, domina a tela Editar e criar.As in the Details screen, a form control, named EditForm1, dominates the Edit and Create screen. Além disso, a propriedade Item de EditForm1 é definida como BrowseGallery1.Selected, portanto o formulário exibe o registro que o usuário selecionou em BrowseScreen1.In addition, the Item property of EditForm1 is set to BrowseGallery1.Selected, so the form displays the record that the user selected in BrowseScreen1. Enquanto a tela Detalhes mostra cada campo como somente leitura, o usuário pode atualizar o valor de um ou mais campos usando os controles em EditForm1.While the Details screen shows each field as read-only, the user can update the value of one or more fields by using the controls in EditForm1. Ele também usa a propriedade DataSource para acessar metadados sobre essa fonte de dados, como o nome de exibição amigável para cada campo e o local em que as alterações devem ser salvas.It also uses the DataSource property to access metadata about this data source, such as the user-friendly display name for each field and the location where changes should be saved.

Se o usuário selecionar o ícone "X" para cancelar uma atualização, a função ResetForm descartará as alterações não salvas e a função Voltar abrirá a tela Detalhes.If the user selects the "X" icon to cancel an update, the ResetForm function discards any unsaved changes, and the Back function opens the Details screen. A tela Detalhes e a tela Editar e criar mostram o mesmo registro até que o usuário selecione um diferente em BrowseScreen1.Both the Details screen and the Edit and Create screen show the same record until the user selects a different one on BrowseScreen1. Os campos desse registro permanecem definidos como os valores que foram salvos mais recentemente, não as alterações que o usuário fizeram e, em seguida, abandonaram.The fields in that record remain set to the values that were most recently saved, not any changes that the user made and then abandoned.

Se o usuário alterar um ou mais valores no formulário e, em seguida, selecionar o ícone de "marca de seleção", a função SubmitForm enviará as alterações do usuário para a fonte de dados.If the user changes one or more values in the form and then selects the "checkmark" icon, the SubmitForm function sends the user's changes to the data source.

  • Se as alterações forem salvas com êxito, a fórmula OnSuccess do formulário será executada e a função Back() abrirá a tela de detalhes para mostrar o registro atualizado.If the changes are successfully saved, the form's OnSuccess formula runs, and the Back() function opens the detail screen to show the updated record.
  • Se as alterações não forem salvas com êxito, a fórmula OnFailure do formulário será executada, mas ela não alterará nada porque estará em branco.If the changes aren't successfully saved, the form's OnFailure formula runs, but it doesn't change anything because it's blank. A tela Editar e criar permanece aberta para que o usuário possa cancelar as alterações ou corrigir o erro.The Edit and Create screen remains open so that the user can either cancel the changes or fix the error. LblFormError1 exibe uma mensagem de erro amigável, para qual a propriedade Erro do formulário é definida.LblFormError1 shows a user-friendly error message, to which the form's Error property is set.

Assim como acontece com o controle Exibir de, um controle Editar de contém controles de Cartão que têm outros controles que mostram diferentes campos em um registro:As with a Display form control, an Edit form control contains Card controls, which contain other controls that show different fields in a record:

Editar cartão e controles de cartão selecionados na experiência de criação

Na imagem anterior, o cartão selecionado exibe o campo AssetID e contém um controle de Entrada de texto para que o usuário possa editar o valor do campo.In the previous image, the selected card shows the AssetID field and contains a Text input control so that the user can edit the value of that field. (Por outro lado, a tela de detalhes mostra o mesmo campo em um controle Rótulo, que é somente leitura.) O controle de Entrada de texto tem uma propriedade Default, que é definida como Parent.Default.(In contrast, the detail screen shows the same field in a Label control, which is read-only.) The Text input control has a Default property, which is set to Parent.Default. Se o usuário estivesse criando um registro em vez de editar um, esse controle exibiria um valor inicial que o usuário pode alterar para o novo registro.If the user were creating a record instead of editing one, that control would show an initial value that the user can change for the new record.

No painel à direita, é possível mostrar ou ocultar cada cartão, reorganizá-las ou configurá-las para mostrar campos em diferentes tipos de controles.In the right-hand pane, you can show or hide each card, rearrange them, or configure them to show fields in different types of controls.

Editar telas com o painel de opções aberto

Criar um aplicativo do zeroBuild an app from scratch

A compreender como o PowerApps gera um aplicativo, você pode criar um por conta própria que usa os mesmos blocos e fórmulas de construção discutidos anteriormente neste tópico.By understanding how PowerApps generates an app, you can build one yourself that uses the same building blocks and formulas discussed earlier in this topic.

Identificar dados de testeIdentify test data

Para obter o máximo deste tópico, comece com uma fonte de dados com a qual você pode experimentar.To get the most from this topic, start with a data source with which you can experiment. Ela deve conter dados de teste que possam ser lidos e atualizados sem problemas.It should contain test data that you can read and update without concern.

Observação

Se você usar uma lista do SharePoint ou uma tabela do Excel que contenha nomes de colunas com espaços como sua fonte de dados, o PowerApps substituirá os espaços por "_x0020_".If you use a SharePoint list or an Excel table that contains column names with spaces as your data source, PowerApps will replace the spaces with "_x0020_". Por exemplo, "Nome da Coluna", no SharePoint ou no Excel, aparecerá como "Nome_x0020_da_x0020_Coluna" no PowerApps quando exibidos no layout de dados ou usados em uma fórmula.For example, "Column Name" in SharePoint or Excel will appear as "Column_x0020_Name" in PowerApps when displayed in the data layout or used in a formula.

Para seguir exatamente o restante deste tópico, crie uma lista do SharePoint denominada "Ice Cream" que contenha estes dados:To follow the rest of this topic exactly, create a SharePoint list named "Ice Cream" that contains this data:

Lista do SharePoint Ice Cream

  • Crie um aplicativo do zero para telefones e conecte-o à fonte de dados.Create an app from blank, for phones, and connect it to your data source.

    Observação

    Aplicativos para tablet são muito semelhantes, mas pode ser mais útil um layout de tela diferente para aproveitar ao máximo o espaço de tela adicional.Tablet apps are very similar, but you may want a different screen layout to make the most of the extra screen space.

    Os exemplos no restante do tópico são baseados em uma fonte de dados chamada Ice Cream.The examples in the rest of the topic are based on a data source named Ice Cream.

Procurar registrosBrowse records

Receba informações rapidamente de um registro localizando-as em uma galeria em uma tela de navegação.Get a quick piece of information from a record by finding it in a gallery on a browse screen.

  1. Adicione uma galeria Vertical e altere o layout para somente Título.Add a Vertical gallery, and change the layout to Title only.

    Galeria conectada à fonte de dados Ice Cream

  2. Defina a propriedade Items da galeria como Sorvete.Set the gallery's Items property to Ice Cream.
  3. Defina a propriedade Text do primeiro rótulo na galeria como ThisItem.Title se ela estiver definida como algo diferente.Set the Text property of the first label in the gallery to ThisItem.Title if it's set to something else.

    Agora, o rótulo mostrará o valor no campo Título para cada registro.The label now shows the value in the Title field for each record.

    Galeria conectada à fonte de dados Ice Cream

  4. Redimensione a galeria para preencher a tela e defina sua propriedade TemplateSize como 60.Resize the gallery to fill the screen, and set its TemplateSize property to 60.

    A tela é semelhante a este exemplo, que mostra todos os registros na fonte de dados:The screen resembles this example, which shows all records in the data source:

    Galeria conectada à fonte de dados Ice Cream

Ver detalhesView details

Se a galeria não exibir as informações que deseja, selecione a seta de um registro para abrir a tela de detalhes.If the gallery doesn't show the information that you want, select the arrow for a record to open the details screen. O controle Exibir formulário nessa tela mostra mais, possivelmente todos, os campos do registro que você selecionou.A Display form control on that screen shows more, possibly all, fields for the record that you selected.

O controle Exibir formulário usa duas propriedades para exibir o registro:The Display form control uses two properties to display the record:

  • Propriedade DataSource.DataSource property. O nome da fonte de dados que contém o registro.The name of the data source that holds the record. Essa propriedade preenche o painel direito com os campos e determina o nome de exibição e tipo de dados (cadeia de caracteres, número, data etc.) de cada campo.This property populates the right-hand panel with fields and determines the display name and data type (string, number, date, etc.) of each field.
  • Propriedade Item.Item property. O registro a ser exibido.The record to display. Essa propriedade geralmente está conectada à propriedade Selecionado do controle Galeria de forma que o usuário possa selecionar um registro no controle Galeria e fazer análises nesse registro.This property is often connected to the Selected property of the Gallery control so that the user can select a record in the Gallery control and then drill into that record.

Quando a propriedade DataSource estiver definida, é possível adicionar e remover campos do painel direito e alterar como eles são exibidos.When the DataSource property is set, you can add and remove fields through the right-hand pane and change how they're displayed.

Nessa tela, os usuários não podem alterar intencional ou acidentalmente nenhum valor do registro.On this screen, users can't intentionally or accidentally change any values of the record. O controle Exibir formulário é um controle somente leitura, portanto não modificará nenhum registro.The Display form control is a read-only control, so it won't modify a record.

Para adicionar um controle Exibir formulário:To add a Display form control:

  1. Adicione uma tela e, em seguida, adicione um controle Exibir formulário a elaAdd a screen, and then add a Display form control to it
  2. Defina a propriedade DataSource do controle de formulários como 'Ice Cream'.Set the DataSource property of the form control to 'Ice Cream'.

No painel à direita, selecione os campos a serem exibidos na tela e qual tipo de cartão deve ser exibido para cada campo.In the right-hand pane, you can select the fields to display on your screen and which type of card to display for each field. Conforme você faz alterações no painel à direita, a propriedade DataField propriedade em cada controle Cartão será definida como o campo com o qual o usuário interagirá.As you make changes in the right-hand pane, the DataField property on each Card control is set to the field that the user will interact with. Sua tela deve ser semelhante a este exemplo:Your screen should resemble this example:

Exibir formulário para a fonte de dados Ice Cream

Finalmente, precisamos conectar o controle Exibir formulário ao controle Galeria de forma que possamos ver detalhes de um registro específico.Finally, we need to connect the Display form control to the Gallery control so that we can look at details for a specific record. Assim que concluirmos a configuração da propriedade Item, o primeiro registro da galeria aparecerá em nosso formulário.As soon as we complete setting the Item property, the first record from the gallery will appear in our form.

  • Defina a propriedade Item do controle Exibir formulário como Gallery1.Selected.Set the Item property of the Display form control to Gallery1.Selected.

    Os detalhes do item selecionado aparecem no formulário.The details for the selected item appear in the form.

    Exibir formulário para a fonte de dados Ice Cream, conectado ao controle da galeria

Ótimo!Great! Agora, vamos para a navegação: como um usuário abre a tela de detalhes na tela da galeria e abre a tela de galeria na tela de detalhes.We now turn to navigation: how a user opens the details screen from the gallery screen and opens the gallery screen from the details screen.

  • Adicione um controle de Botão à tela, defina sua propriedade de Texto para mostrar Voltar e defina sua propriedade OnSelect como Back().Add a Button control to the screen, set its Text property to show Back, and set its OnSelect property to Back().

    Esta fórmula retorna o usuário de volta à galeria quando terminar de exibir os detalhes.This formula returns the user back to the gallery when they finish viewing details.

    Exibir formulário para a fonte de dados Ice Cream com o botão Voltar

Agora, vamos retornar para o controle Galeria e adicione uma navegação à nossa tela de detalhes.Now, let's return to the Gallery control and add some navigation to our detail screen.

  1. Mude para a primeira tela, que está hospedando o controle Galeria e selecione a seta no primeiro item da galeria.Switch to the first screen, which is hosting our Gallery control, and select the arrow in the first item in the gallery.

  2. Defina a propriedade OnSelect da forma como esta fórmula:Set the OnSelect property of the shape to this formula:
    Navigate( Screen2, None )Navigate( Screen2, None )

    Exibir formulário para a fonte de dados Ice Cream com o botão Voltar

  3. Pressione F5 e, em seguida, selecione uma seta na galeria para exibir os detalhes de um item.Press F5, and then select an arrow in the gallery to show the details for an item.

  4. Selecione o botão Voltar para retornar para a galeria de produtos e, em seguida, pressione Esc.Select the Back button to return to the gallery of products, and then press Esc.

Editando detalhesEditing details

Por fim, nossa última atividade principal é alterar o conteúdo de um registro, o que os usuários realizam em um controle Editar formulário.Finally, our last core activity is changing the contents of a record, which users accomplish in an Edit form control.

O controle Editar formulário usa duas propriedades para exibir e editar o registro:The Edit form control uses two properties to display and edit the record:

  • Propriedade DataSource.DataSource property. O nome da fonte de dados que contém o registro.The name of the data source that holds the record. Assim como ocorre com o controle Exibir formulário, essa propriedade preenche o painel direito com os campos e determina o nome de exibição e tipo de dados (cadeia de caracteres, número, data etc.) de cada campo.Just as with the Display form control, this property populates the right-hand panel with fields and determines the display name and data type (string, number, date, etc.) for each field. Essa propriedade também determina se o valor de cada campo é válido antes de enviá-lo à fonte de dados subjacente.This property also determines whether each field's value is valid before submitting it to the underlying data source.
  • Propriedade Item.Item property. O registro para editar, que geralmente está conectado à propriedade Selected do controle Galeria.The record to edit, which is often connected to the Selected property of the Gallery control. Dessa forma, você pode selecionar um registro no controle Galeria, exibi-lo na tela de detalhes e editá-lo na tela Editar e criar.That way, you can select a record in the Gallery control, show it in the details screen, and edit it in the Edit and Create screen.

Para adicionar um controle Editar formulário:To add an Edit form control:

  1. Adicione uma tela, adicione um controle Editar formulário e, em seguida, defina a propriedade DataSource do formulário como “Ice Cream”.Add a screen, add an Edit form control, and then set the form's DataSource property to 'Ice Cream'.
  2. Defina a propriedade Item como Gallery1.Selected.Set the Item property to Gallery1.Selected.

Agora, você pode selecionar os campos a serem exibidos na tela.You can now select the fields to display on your screen. Você também pode selecionar qual tipo de cartão deve ser exibido para cada campo.You can also select which type of card to display for each field. À medida que você faz alterações no painel à direita, a propriedade DataField em cada controle Cartão é definida como o campo com o qual o usuário interagirá.As you make changes in the right-hand pane, the DataField property on each Card control is set to the field your user will interact with. Sua tela deve ser semelhante a este exemplo:Your screen should resemble this example:

Exibir formulário para a fonte de dados Ice Cream

Essas duas propriedades são iguais às propriedades no controle Exibir formulário.These two properties are the same as the properties on the Display form control. E, apenas com elas, podemos exibir os detalhes de um registro.And with these alone, we can display the details of a record.

O controle Editar formulário vai mais além, oferecendo a função SubmitForm para gravar também as alterações na fonte de dados.The Edit form control goes further by offering the SubmitForm function to write back changes to the data source. use isso com um controle de botão ou imagem para salvar as alterações do usuário.You use this with a button or image control to save a user's changes.

  • Adicione um controle de Botão, defina sua propriedade Texto para exibir Salvar e defina sua propriedade OnSelect com esta fórmula:Add a Button control, set its Text property to show Save, and set its OnSelect property to this formula:
    SubmitForm( Form1 )SubmitForm( Form1 )

Editar formulário para a fonte de dados Ice Cream

Para adicionar uma navegação de e para esta tela:To add navigation to and from this screen:

  1. Adicione outro controle de Botão, defina sua propriedade de Texto para exibir Cancelar e defina sua propriedade OnSelect como esta fórmula:Add another Button control, set its Text property to show Cancel, and set its OnSelect property to this formula:
    ResetForm( Form1 ); Back()ResetForm( Form1 ); Back()

    Essa fórmula descarta todas as edições não salvas e abre a tela anterior.This formula discards any unsaved edits and opens the previous screen.

    Exibir formulário para a fonte de dados Ice Cream

  2. Defina ao propriedade OnSuccess do formulário como Back().Set the OnSuccess property of the form to Back().

    Quando as atualizações forem salvas com êxito, a tela anterior (nesse caso, a tela de detalhes) é aberta automaticamente.When updates are successfully saved, the previous screen (in this case, the details screen) opens automatically.

    Editar formulário com a regra "OnSuccess"

  3. Na tela Exibir, adicione um botão, defina sua propriedade de Texto para exibir Editar e defina sua propriedade OnSelect como esta fórmula:On the Display screen, add a button, set its Text property to show Edit, and set its OnSelect property to this formula:
    Navigate( Screen3, None )Navigate( Screen3, None )

    Exibir o formulário com o botão "Editar" adicionado

Você criou um aplicativo básico com três telas para exibir e inserir dados.You've built a basic app with three screens for viewing and entering data. Para testar, exiba a tela de galeria e, em seguida, pressione F5 (ou selecione o botão "Visualizar" de seta para frente próximo ao canto superior esquerdo da tela).To try it out, show the gallery screen, and then press F5 (or select the forward arrow "Preview" button near the upper-left corner of the screen). O ponto rosa indica onde o usuário clica ou toca a tela em cada etapa.The pink dot indicates where the user clicks or taps the screen at each step.

Testar o aplicativo Ice Cream

Criar um registroCreate a record

O usuário interage com o mesmo formulário Editar para atualizar e criar registros.The user interacts with the same Edit form to both update and create records. Quando o usuário desejar criar um registro, a função NewForm alterna o formulário para o modo Novo.When the user wants to create a record, the NewForm function switches the form to New mode.

Quando o formulário estiver no modo Novo, o valor de cada campo é definido com as configurações padrão da fonte de dados.When the form is in New mode, the value of each field is set to the defaults of the data source. O registro que é fornecido para a propriedade Item do formulário será ignorado.The record that's provided to the form's Item property is ignored.

Quando o usuário estiver pronto para salvar o novo registro, SubmitForm é executado.When the user is ready to save the new record, SubmitForm runs. Depois que o formulário for enviado com êxito, ele será revertido de volta para EditMode.After the form is successfully submitted, the form is switched back to EditMode.

Na primeira tela, você adicionará um botão Novo:On the first screen, you'll add a New button:

  1. Na tela com a galeria, adicione um controle de Botão.On the screen with the gallery, add a Button control.
  2. Defina a propriedade de Texto do botão como Novo e sua propriedade OnSelect como esta fórmula:Set the button's Text property to New and its OnSelect property to this formula:
    NewForm( Form1 ); Navigate( Screen3, None )NewForm( Form1 ); Navigate( Screen3, None )

    Esta fórmula alterna o controle Editar formulário em Screen3 para o modo Novo e abre essa tela para que o usuário possa preenchê-la.This formula switches the Edit form control on Screen3 to New mode and opens that screen so that the user can fill it in.

Exibir o formulário com o botão "Editar" adicionado

Quando a tela Editar e criar é aberta, o formulário está vazio, pronto para o usuário adicionar um item.When the Edit and Create screen opens, the form is empty, ready for the user to add an item. Quando o usuário seleciona o botão Salvar, a função SubmitForm garante que um registro seja criado em vez de ser atualizado.When the user selects the Save button, the SubmitForm function ensures that a record is created instead of being updated. Se o usuário seleciona o botão Cancelar, a função ResetForm alterna o formulário de volta para o modo Editar e a função Back abre a tela para procurar a galeria.If the user selects the Cancel button, the ResetForm function switches the form back to Edit mode, and the Back function opens the screen for browsing the gallery.

Excluir um registroDelete a record

  1. Na tela Exibir, adicione um botão e defina sua propriedade de Texto para exibir Excluir.On the Display screen, add a button, and set its Text property to show Delete..
  2. Defina a propriedade OnSelect do botão como esta fórmula:Set the button's OnSelect property to this formula:
    Remove( 'Ice Cream', Gallery1.Selected ); Back()Remove( 'Ice Cream', Gallery1.Selected ); Back()

    Exibir o formulário com o botão "Editar" adicionado

Gerenciando errosHandling errors

Neste aplicativo, um erro ocorre quando o valor de um campo for inválido, um campo obrigatório estiver em branco, você estiver desconectado da rede, ou qualquer quantidade de outros problemas aparecer.In this app, an error occurs when the value of a field is not valid, a required field is blank, you're disconnected from the network, or any number of other problems pop up.

Se SubmitForm falhar por qualquer motivo, a propriedade Erro do controle Editar formulário conterá uma mensagem de erro a ser exibida ao usuário.If SubmitForm fails for any reason, the Error property of the Edit form control contains an error message to show the user. Com essas informações, o usuário deve poder corrigir o problema e reenviar a alteração, ou cancelar a atualização.With this information, the user should be able to correct the issue and resubmit the change, or they can cancel the update.

  1. Na tela Editar e Criar, adicione um controle Rótulo e mova-o para logo abaixo do botão Salvar.On the Edit and Create screen, add a Label control, and move it just below the Save button. Qualquer erro será facilmente visto após o usuário selecionar esse controle para salvar as alterações.Any error will be easy to see after the user selects this control to save changes.

  2. Defina a propriedade Text do controle Rótulo para mostrar Form1.Error.Set the Text property of the Label control to show Form1.Error.

    Exibir o formulário com o botão "Editar" adicionado

Em um aplicativo que o PowerApps gera dos dados, a propriedade AutoHeight neste controle é definida como true para que nenhum espaço seja consumido se nenhum erro ocorrer.In an app that PowerApps generates from data, the AutoHeight property on this control is set to true so that no space is consumed if no error occurs. As propriedades Altura e Y do controle Editar formulário também são dinamicamente ajustadas para compensar esse crescimento do controle quando um erro ocorrer.The Height and Y properties of the Edit form control are also adjusted dynamically to account for this control growing when an error occurs. Para obter mais detalhes, gere um aplicativo com base nos dados existentes e inspecione essas propriedades.For more details, generate an app from existing data, and inspect these properties. O controle de caixa de texto para erros é muito curto quando nenhum erro tiver ocorrido, talvez, você precise abrir a exibição Avançado (disponível na guia Exibição) para selecionar esse controle.The text-box control for errors is very short when no error has occurred, you may need to open the Advanced view (available on the View tab) to select this control.

Formulário de edição de aplicativo de dados com o controle de texto de erro selecionado

Formulário de edição de aplicativo de dados com o controle selecionado

Atualizar dadosRefresh data

A fonte de dados é atualizada sempre que o usuário abrir o aplicativo, mas o usuário pode querer atualizar os registros na galeria sem fechar o aplicativo.The data source is refreshed whenever the user opens the app, but the user might want to refresh the records in the gallery without closing the app. Adicione um botão Atualizar para que o usuário possa selecioná-lo para atualizar os dados manualmente:Add a Refresh button so that the user can select it to manually refresh the data:

  1. Na tela com o controle Galeria, adicione um controle de Botão e defina sua propriedade de Texto para mostrar Atualizar.On the screen with the Gallery control, add a Button control and set its Text property to show Refresh.

  2. Defina a propriedade OnSelect desse controle como esta fórmula:Set the OnSelect property of this control to this formula:
    Refresh( 'Ice Cream' )Refresh( 'Ice Cream' )

    Atualizar a fonte de dados

No aplicativo que o PowerApps gerou com base nos dados, não discutimos dois controles na parte superior da tela Procurar.In the app that PowerApps generated from data, we neglected to discuss two controls at the top of the Browse screen. Ao usar esses controles, o usuário pode pesquisar um ou mais registros, classificar a lista de registros em ordem crescente ou decrescente ordem ou ambos.By using these controls, the user can search for one or more records, sort the list of records in ascending or descending order, or both.

Classificação e pesquisa de controles na tela Procurar

Quando o usuário seleciona o botão de classificação, inverte a ordem de classificação da galeria.When the user selects the sort button, the sort order of the gallery reverses. Para criar esse comportamento, usamos uma variável de contexto para controlar a direção na qual a galeria é classificada.To create this behavior, we use a context variable to track the direction in which the gallery is sorted. Quando o usuário seleciona o botão, a variável é atualizada e a direção é invertida.When the user selects the button, the variable is updated, and the direction reverses. A propriedade OnSelect do botão de classificação é definida como esta fórmula: UpdateContext( {SortDescending1: !SortDescending1} )The OnSelect property of the sort button is set to this formula: UpdateContext( {SortDescending1: !SortDescending1} )

A função AtualizarContexto criará a variável de contexto SortDescending1 se ela ainda não existir.The UpdateContext function creates the SortDescending1 context variable if it doesn't already exist. A função lê o valor da variável e a define como a lógica oposta usando o operador !The function will read the value of the variable and set it to the logical opposite by using the ! .operator. Se o valor for true, ele se tornará false.If the value is true, it becomes false. Se o valor for false, ele se tornará true.If the value is false, it becomes true.

A fórmula para a propriedade itens do controle Galeria usa essa variável de contexto, juntamente com o texto no controle TextSearchBox1:The formula for the Items property of the Gallery control uses this context variable, along with the text in the TextSearchBox1 control:

Gallery1.Items = Sort( If( IsBlank(TextSearchBox1.Text),
                           Assets,
                           Filter( Assets,
                                   TextSearchBox1.Text in Text(ApproverEmail) ) ),
                        ApproverEmail,
                        If(SortDescending1, Descending, Ascending) )

Vamos dividir isso:Let's break this down:

  • No lado de fora, temos a função Classificar, que usa três argumentos: uma tabela, um campo com o qual classificar e a direção de classificação.On the outside, we have the Sort function, which takes three arguments: a table, a field on which to sort, and the direction in which to sort.

    • A direção de classificação é executada com base na variável de contexto que alterna quando o usuário seleciona o controle ImageSortUpDown1.The sort direction is taken from the context variable that toggles when the user selects the ImageSortUpDown1 control. O valor true/false é convertido para as constantes Decrescente e Crescente.The true/false value is translated to the constants Descending and Ascending.
    • O campo para a classificação é fixo para ApproverEmail.The field to sort on is fixed to ApproverEmail. Se você alterar os campos que aparecem na galeria, será necessário alterar este argumento também.If you change the fields that appear in the gallery, you'll need to change this argument too.
  • No interior, temos a função Filtrar, que usa uma tabela como um argumento e uma expressão a ser avaliada para cada registro.On the inside, we have the Filter function, which takes a table as an argument and an expression to evaluate for each record.

    • A tabela é a fonte de dados de Ativos bruta, que é o ponto de partida antes da filtragem ou classificação.The table is the raw Assets data source, which is the starting point before filtering or sorting.
    • A expressão pesquisa por uma instância da cadeia de caracteres em TextSearchBox1 no campo ApproverEmail.The expression searches for an instance of the string in TextSearchBox1 within the ApproverEmail field. Novamente, se você alterar os campos que aparecem na galeria, será necessário atualizar este argumento.Again, if you change the fields that appear in the gallery, you'll also need to update this argument.
    • Se TextSearchBox1 estiver vazio, o usuário desejará mostrar todos os registros e a função Filtrar será ignorada.If TextSearchBox1 is empty, the user wants to show all records, and the Filter function is bypassed.

Este é apenas um exemplo; você pode criar sua própria fórmula para a propriedade Itens, dependendo das necessidades do seu aplicativo, compondo as funções Filtrar, Classificar e outras funções e operadores juntos.This is but one example; you can craft your own formula for the Items property, depending on the needs of your app, by composing Filter, Sort, and other functions and operators together.

Design da telaScreen design

Até agora, ainda não discutimos outras maneiras de distribuir controles nas telas.So far, we haven't discussed other ways to distribute controls across screens. Isso é porque você tem várias opções e a melhor seleção depende das necessidades específicas do seu aplicativo.That's because you have many options, and the best selection depends on your specific app's needs.

Como imóveis em telas de telefone são tão limitados, você provavelmente desejará procurar, exibir e editar/criar em telas diferentes.Because real estate on phone screens is so limited, you probably want to browse, display, and edit/create on different screens. Neste tópico, as funções Navegar e Voltar abrem cada um uma tela.In this topic, the Navigate and Back functions open each screen.

Em um tablet, você pode procurar, exibir e editar/criar duas ou até mesmo uma tela.On a tablet, you can browse, display, and edit/create on two or even one screen. Para o último caso, nenhuma função Navegar ou Voltar é necessária.For the latter, no Navigate or Back function would be required.

Se o usuário estiver trabalhando na mesma tela, será preciso ser cuidadoso para que o usuário não altere a seleção na Galeria e possivelmente perca edições no controle Editar formulário.If the user is working on the same screen, you need to be careful that the user can't change the selection in the Gallery and potentially lose edits in the Edit form control. Para evitar que o usuário selecione um registro diferente quando as alterações em outro registro ainda não tiverem sido salvas, defina a propriedade Desabilitado da galeria como esta fórmula:To keep the user from selecting a different record when changes to another record haven't been saved yet, set the Disabled property of the gallery to this formula:
EditForm.UnsavedEditForm.Unsaved