Criar um aplicativo do zeroCreate an app from scratch

Crie seu próprio aplicativo do zero usando qualquer uma das várias fontes de dados, adicionando mais fontes posteriormente, se desejar.Create your own app from scratch using any one of a variety of data sources, adding more sources later if you want. Especifique a aparência e o comportamento de cada elemento de interface do usuário para que você possa otimizar o resultado para suas metas exatas e seu fluxo de trabalho.Specify the appearance and behavior of each UI element so that you can optimize the result for your exact goals and workflow. Essa abordagem é muito mais demorada que gerar automaticamente um aplicativo, mas os criadores de aplicativos experientes podem compilar o aplicativo que melhor atenda às suas necessidades.This approach is much more time-intensive than generating an app automatically, but experienced app makers can build the best app for their needs.

Observação: Este tópico foi escrito para PowerApps Studio para Windows, mas as etapas serão semelhantes se você abrir o PowerApps em um navegador.Note: This topic was written for PowerApps Studio for Windows, but the steps are similar if you open PowerApps in a browser.

Seguindo este tutorial, você criará um aplicativo que contém duas telas.By following this tutorial, you'll create an app that contains two screens. Em uma tela, os usuários podem navegar por meio de um conjunto de registros:On one screen, users can browse through a set of records:

Tela na qual um usuário pode percorrer um conjunto de dados

Em outra tela, os usuários podem criar um registro, atualizar um ou mais campos em um registro ou excluir um registro inteiro:On the other screen, users can create a record, update one or more fields in a record, or delete an entire record:

Tela na qual um usuário pode adicionar ou atualizar dados

Pré-requisitosPrerequisites

Você pode examinar este tutorial para ver apenas os conceitos gerais ou pode seguir exatamente se concluir essas etapas.You can review this tutorial for general concepts only, or you can follow it exactly if you complete these steps.

  1. Copie esses dados e, em seguida, cole-os em um arquivo do Excel.Copy this data, and then paste it into an Excel file.

    Dia de inícioStart Day Hora de inícioStart Time Voluntário 1Volunteer 1 Voluntário 2Volunteer 2
    SábadoSaturday 10h – meio-dia10am-noon VasquezVasquez KumashiroKumashiro
    SábadoSaturday meio-dia – 14hnoon-2pm GeloIce SinghalSinghal
    SábadoSaturday 14h – 16h2pm-4-pm MykMyk MuellerMueller
    DomingoSunday 10h – meio-dia10am-noon LiLi AdamsAdams
    DomingoSunday 10h – meio-dia10am-noon SinghSingh MorganMorgan
    DomingoSunday 10h – meio-dia10am-noon BatyeBatye NguyenNguyen
  2. Formate esses dados como uma tabela chamada Agenda, de modo que o PowerApps possa analisar as informações.Format that data as a table, named Schedule, so that PowerApps can parse the information.

    Para obter mais informações, consulte Criar uma tabela do Excel em uma planilha.For more information, see Create an Excel table in a worksheet.

  3. Salve o arquivo com o nome eventsignup.xlse, em seguida, carregue-o para uma conta de armazenamento em nuvem, como o OneDrive.Save the file under the name eventsignup.xls, and then upload it to a cloud-storage account, such as OneDrive.
  4. Se você não estiver familiarizado com PowerApps:If you're new to PowerApps:

Criar um aplicativo em branco e conectar a dadosCreate a blank app, and connect to data

  1. No PowerApps Studio, clique ou toque em Novo no menu Arquivo (próximo à borda esquerda da tela).In PowerApps Studio, click or tap New on the File menu (near the left edge of the screen).

    Opção Novo no menu Arquivo

  2. No bloco Aplicativo em branco, clique ou toque em Layout do telefone.On the Blank app tile, click or tap Phone layout.

    Opção para criar um aplicativo dos dados

  3. Se solicitado, faça o tour de introdução para compreender as principais áreas do PowerApps (ou clique ou toque em Ignorar).If prompted, take the intro tour to understand the main areas of PowerApps (or click or tap Skip).

    Tour rápido

    Você pode sempre fazer o tour mais tarde clicando ou tocando no ícone do ponto de interrogação no canto superior esquerdo da tela, e depois, clicando ou tocando em Fazer o tour de introdução.You can always take the tour later by clicking or tapping the question-mark icon near the upper-left corner of the screen and then clicking or tapping Take the intro tour.

  4. Na barra de navegação à esquerda, clique ou toque em um ícone no canto superior direito para mudar para o modo de exibição em miniatura.In the left navigation bar, click or tap an icon in the upper-right corner to switch to the thumbnail view.

    Alternar entre modos de exibição

  5. No painel direito, clique ou toque em Adicionar fonte de dados.In the right-hand pane, click or tap Add data source.

    Adicionar fonte de dados

  6. Execute uma das seguintes etapas:Perform either of these steps:

    • Se você já tiver uma conexão à sua conta de armazenamento em nuvem, clique ou toque nela.If you already have a connection to your cloud-storage account, click or tap it.
    • Se você não tiver uma conexão à sua conta de armazenamento em nuvem, clique ou toque Adicionar Conexão, clique ou toque no tipo de conta, clique ou toque em Conectar, e (se solicitado) forneça suas credenciais.If you don't have a connection to your cloud-storage account, click or tap Add Connection, click or tap your account type, click or tap Connect, and then (if prompted) provide your credentials.
  7. Em Escolher um arquivo do Excel, navegue até eventsignup.xlsx, e, em seguida, clique ou toque nele.Under Choose an Excel file, browse to eventsignup.xlsx, and then click or tap it.

    Especificar o arquivo do Excel que você quer usar

  8. Em Escolher uma tabela, marque a caixa de seleção Agenda e clique ou toque em Conectar.Under Choose a table, select the Schedule check box, and then click or tap Connect.

    Especificar a tabela do Excel que você quer usar

    A guia Fontes de dados do painel direito mostra quais fontes de dados você adicionou ao aplicativo.The Data sources tab of the right-hand pane shows which data sources you've added to your app.

    Mostrar fontes de dados conectadas

    Este tutorial requer apenas uma fonte de dados, mas você pode adicionar mais fontes de dados posteriormente.This tutorial requires only one data source, but you can add more data sources later.

Mostrar os dadosShow the data

  1. Na guia Início, clique ou toque em Nova tela e, em seguida, clique ou toque em Tela de lista.In the Home tab, click or tap New screen and then click or tap List screen.

    Adicionar um layout com um título, um subtítulo e um elemento de corpo

    Uma tela é adicionada com diversos controles padrão, como uma caixa de pesquisa e um controle Galeria.A screen is added with several default controls, such as a search box and a Gallery control. A galeria abrange toda a tela abaixo da caixa de pesquisa.The gallery covers the entire screen under the search box.

  2. Clique ou toque em qualquer lugar da galeria, exceto em uma seta, como diretamente abaixo da caixa de pesquisa.Click or tap anywhere in the gallery except an arrow, such as directly under the search box.

    Selecionar galeria

  3. No painel direito, abra a lista Layouts e, em seguida, clique ou toque na opção que mostra um título, um subtítulo e corpo.In the right-hand pane, open the Layouts list, and then click or tap the option that shows a title, a subtitle and body.

    Selecionar galeria

  4. Na lista de propriedades, clique ou toque em Items, copie esta fórmula e cole-a na barra de fórmulas:In the property list, click or tap Items, copy this formula, and paste it into the formula bar:

    SortByColumns(Search(Schedule, TextSearchBox1.Text, "Volunteer_x0020_1"), "Volunteer_x0020_1", If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))SortByColumns(Search(Schedule, TextSearchBox1.Text, "Volunteer_x0020_1"), "Volunteer_x0020_1", If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))

    Se você não tiver certeza onde está a lista de propriedades, consulte Adicionar e configurar controles.If you're not sure where the property list is, see Add and configure controls.

    Observação: nas fontes de dados do Excel ou SharePoint que contêm nomes de colunas com espaços, o PowerApps mostrará os espaços como "_x0020_".Note: For Excel or SharePoint data sources that contain column names with spaces, PowerApps shows the spaces as "_x0020_". Neste exemplo, a coluna "Voluntário 1" aparece em uma fórmula como "Voluntário_x0020_1".In this example, the column "Volunteer 1" appears in a formula as "Volunteer_x0020_1".

    Essa galeria mostra os dados da tabela Agenda.This gallery shows the data from the Schedule table.

    Os dados da Agenda na galeria por padrão

    Uma caixa de pesquisa pode filtrar a galeria com base em texto que o usuário digita.A search box can filter the gallery based on text that the user types. Se um usuário digitar pelo menos uma letra na caixa de pesquisa, a galeria mostrará apenas os registros para os quais o campo Voluntário 1 contém o texto digitado pelo usuário.If a user types at least one letter in the search box, the gallery shows only those records for which the Volunteer 1 field contains the text that the user typed.

    O botão de classificação pode classificar os registros com base nos dados da coluna Voluntário 1.The sort button can sort the records based on data in the Volunteer 1 column. Se um usuário clicar ou tocar nesse botão, a ordem de classificação alternará entre crescente e decrescente.If a user clicks or taps that button, the sort order toggles between ascending and descending.

    Essa fórmula contém as funções Sort, If, IsBlank, Filter e Text.That formula contains the Sort, If, IsBlank, Filter, and Text functions. Para obter mais informações sobre essas e outras funções, consulte a referência de fórmulaFor more information about these and other functions, see the formula reference

  5. Digite um i na caixa de pesquisa e clique ou toque no botão de classificação uma vez (ou um número ímpar de vezes).Type an i in the search box, and click or tap the sort button once (or an odd number of times).

    A galeria mostra estes resultados.The gallery shows these results.

    Classificar e filtrar a galeria

    Para obter mais informações sobre o Classificação, Filtro, e outras funçõesMore information about the Sort, Filter, and other functions

  6. Selecione o controle Rótulo na parte superior da tela clicando ou tocando no controle.Select the Label control at the top of the screen by clicking or tapping the control.

    Selecionar a barra de título

  7. Na lista de propriedades, clique ou toque em Texto, copie o texto e cole-o na barra de fórmulas.In the property list, click or tap Text, copy this text, and then paste it in the formula bar.
    “Exibir Registros” "View Records"

    Alterar barra de título

Criar o ChangeScreen e a sua faixaCreate the ChangeScreen and its banner

  1. Exclua Screen1 e renomeie Screen2 como ViewScreen.Delete Screen1, and rename Screen2 to ViewScreen.

    Renomear a tela

  2. Adicione uma tela e renomeie-a ChangeScreen.Add a screen, and rename it ChangeScreen.

    Adicionar e renomear tela

  3. Na guia Inserir, clique ou toque em Texto e, em seguida, clique ou toque em Rótulo.On the Insert tab, click or tap Text, and then click or tap Label.
  4. Configure o controle Rótulo que você acabou de adicionar:Configure the Label control that you just added:

    • Defina a propriedade Text como esta fórmula:Set its Text property to this formula:
      “Alterar registro”"Change record"
    • Defina a propriedade Preencher como esta fórmula:Set its Fill property to this formula:
      RGBA (62, 96, 170, 1).RGBA(62, 96, 170, 1).
    • Defina a propriedade Cor como esta fórmula:Set its Color property to this formula:
      RGBA (255, 255, 255, 1)RGBA(255, 255, 255, 1)
    • Defina a propriedade Alinhar como Centralizar.Set its Align property to Center.
    • Defina a propriedade X como 0.Set its X property to 0.
    • Defina a propriedade Largura como 640.Set its Width property to 640.

      O controle Rótulo reflete as alterações.The Label control reflects your changes.

      ChangeScreen com faixa

Adicionar e configurar um formulárioAdd and configure a form

  1. Na guia Inserir, clique ou toque em Formulários e, em seguida, clique ou toque em Editar.On the Insert tab, click or tap Forms, and then click or tap Edit.
  2. Mova e redimensione o formulário para abranger a maior parte da tela.Move and resize the form to cover most of the screen.

    Adicionar um formulário

    O formulário é denominado Form1 por padrão, a menos que você já tenha adicionado e removido um formulário.The form is named Form1 by default unless you already added and removed a form. Nesse caso, renomeie o formulário para Form1.In that case, rename the form to Form1.

  3. Defina a propriedade Fonte de dados do Form1 para Agenda.Set DataSource property of Form1 to Schedule.
  4. Defina a propriedade Item do Form1 para esta expressão:Set the Item property of Form1 to this expression:
    BrowseGallery1.SelectedBrowseGallery1.Selected
  5. No painel direito, clique ou toque na caixa de seleção de cada campo para mostrá-lo.In the right-hand pane, click or tap the checkbox for each field to show it.

    Mostrar campos no formulário

  6. Na parte inferior da formulário, clique ou toque em Adicionar um cartão personalizado.Near the bottom of the form, click or tap Add a custom card.

    Adicionar um cartão personalizado

  7. Adicione um controle Rótulo ao novo cartão.Add a Label control in the new card.
  8. Defina a propriedade AutoHeight do controle como true e a propriedade Texto para esta fórmula:Set the AutoHeight property of the new control to true, and set its Text property to this formula:
    Form1.ErrorForm1.Error

    O rótulo mostrará os erros do formulário.The label will show any errors from the form.

  9. Na barra de navegação à esquerda, clique ou toque na miniatura de ChangeScreen para selecioná-la.In the left navigation bar, click or tap the thumbnail for the ChangeScreen to select it.
  10. Na guia Inserir, clique ou toque em Ícones, clique ou toque na opção para adicionar uma seta Voltar, e, em seguida, mova a seta para o canto inferior esquerdo da tela.On the Insert tab, click or tap Icons, click or tap the option to add a Back arrow, and then move the arrow to the lower-left corner of the screen.
  11. Defina a propriedade OnSelect da seta para esta fórmula:Set the arrow's OnSelect property to this formula:

    ResetForm(Form1);Navigate(ViewScreen,ScreenTransition.None)ResetForm(Form1);Navigate(ViewScreen,ScreenTransition.None)

    Quando o usuário clica ou toca na seta a função Navegar mostra o ViewScreen.When the user clicks or taps the arrow, the Navigate function opens the ViewScreen.

  12. Adicione um controle de Botão ao formulário e defina a propriedade do botão Texto como "Salvar".Add a Button control under the form, and set the button's Text property to "Save".

    Adicionar um botão Salvar

  13. Defina a propriedade OnSelect do botão para esta fórmula:Set the OnSelect property of the button to this formula::

    SubmitForm(Form1); If(Form1.ErrorKind = ErrorKind.None, Navigate(ViewScreen, ScreenTransition.None))SubmitForm(Form1); If(Form1.ErrorKind = ErrorKind.None, Navigate(ViewScreen, ScreenTransition.None))

    Quando o usuário clica ou toca no botão, a função SubmitForm salva as alterações para a fonte de dados e o ViewScreen reaparece.When the user clicks or taps the button, the SubmitForm function saves any changes to the data source, and the ViewScreen reappears.

  14. Na parte inferior da tela, adicione outro botão, defina a propriedade de Texto como "Remover", e defina a propriedade OnSelect para esta fórmula:At the bottom of the screen, add another button, set its Text property to "Remove", and set its OnSelect property to this formula:

    Remove(Schedule,BrowseGallery1.Selected);
    If(IsEmpty(Errors(Schedule)),Navigate(ViewScreen,ScreenTransition.None))
    Remove(Schedule,BrowseGallery1.Selected);
    If(IsEmpty(Errors(Schedule)),Navigate(ViewScreen,ScreenTransition.None))

    Quando o usuário clica ou toca nesse botão, a função Remover remove o registro e o ViewScreen reaparece.When the user clicks or taps this button, the Remove function removes the record, and the ViewScreen reappears.

  15. Defina a propriedade Visível do botão Remover para esta fórmula:Set the Visible property of the Remove button to this formula:
    Form1.Mode=FormMode.EditForm1.Mode=FormMode.Edit

    Esta etapa oculta o botão Remover quando o usuário está criando um registro.This step hides the Remove button when the user is creating a record.

    O ChangeScreen corresponde a este exemplo:The ChangeScreen matches this example:

    ChangeScreen final

Definir a navegação de ViewScreenSet navigation from ViewScreen

  1. Na barra de navegação à esquerda, clique ou toque na miniatura de ViewScreen.In the left navigation bar, click or tap the thumbnail for the ViewScreen.

    Abrir ViewScreen

  2. Clique ou toque na seta Avançar para o primeiro registro na galeria.Click or tap the Next arrow for the first record in the gallery.

    Seta Avançar

  3. Defina a propriedade OnSelect desta célula para esta fórmula:Set the OnSelect property of that arrow to this formula:

    Navigate(ChangeScreen,ScreenTransition.None)Navigate(ChangeScreen,ScreenTransition.None)

  4. No canto superior direito, clique ou toque no ícone de adição.In the upper-right corner, click or tap the plus icon.

    Adicionar registro

  5. Defina a propriedade OnSelect do ícone selecionado para esta fórmula:Set the OnSelect property of the selected icon to this formula:

    NewForm(Form1);Navigate(ChangeScreen,ScreenTransition.None)`NewForm(Form1);Navigate(ChangeScreen,ScreenTransition.None)`

    Quando o usuário clica ou toca nesse ícone ChangeScreen aparece com cada campo vazio, para que o usuário possa criar um registro com mais facilidade.When the user clicks or taps this icon, ChangeScreen appears with each field empty, so that the user can create a record more easily.

Executar o aplicativoRun the app

Ao personalizar um aplicativo, você pode testar suas alterações, executando o aplicativo no modo de Visualização como demonstram as etapas nesta seção.As you customize the app, test your changes by running the app in Preview mode, as the steps in this section describe.

  1. Na barra de navegação à esquerda, clique ou toque na miniatura superior para selecionar a ViewScreen.In the left navigation bar, click or tap the top thumbnail to select the ViewScreen.

    Selecionar ViewScreen

  2. Abra o modo de Visualização pressionando F5 (ou clicando ou tocando no ícone Visualização no canto superior direito).Open Preview mode by pressing F5 (or clicking or tapping the Preview icon near the upper-right corner).

    Abrir modo de visualização

  3. Clique ou toque na seta Avançar de um registro para mostrar os detalhes sobre esse registro.Click or tap the Next arrow for a record to show details about that record.
  4. Na ChangeScreen, altere as informações em um ou mais campos e, em seguida, salve as alterações clicando ou tocando em Salvar, ou remova o registro clicando ou tocando em Remover.On the ChangeScreen, change the information in one or more fields, and then save your changes by clicking or tapping Save, or remove the record by clicking or tapping Remove.
  5. Feche o modo de Visualização pressionando Esc (ou clicando ou tocando no ícone Fechar abaixo da barra de título).Close Preview mode by pressing Esc (or by clicking or tapping the close icon under the title bar).

    Fechar modo de visualização

Próximas etapasNext steps