Criar uma aplicação do zeroCreate an app from scratch

Crie a sua própria aplicação do zero através de uma das variadas origens de dados, adicionando outras mais tarde, se quiser.Create your own app from scratch using any one of a variety of data sources, adding more sources later if you want. Especifique o aspeto e o comportamento de cada elemento da IU, de modo a otimizar o resultado tendo em conta os seus objetivos concretos e o 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. Esta abordagem é muito mais intensiva em termos de tempo do que gerar uma aplicação automaticamente, mas os criadores de aplicações experientes podem criar a melhor aplicação para as 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.

Nota

Este tópico foi escrito para o PowerApps Studio para Windows, mas os passos são semelhantes se abrir o PowerApps num browser.This topic was written for PowerApps Studio for Windows, but the steps are similar if you open PowerApps in a browser.

Ao seguir este tutorial, vai criar uma aplicação que contém dois ecrãs.By following this tutorial, you'll create an app that contains two screens. Num ecrã, os utilizadores podem navegar por um conjunto de registos:On one screen, users can browse through a set of records:

Ecrã no qual o utilizador pode navegar por um conjunto de registos

No outro ecrã, o utilizador pode criar um registo, atualizar um ou mais campos num registo ou eliminar um registo inteiro:On the other screen, users can create a record, update one or more fields in a record, or delete an entire record:

Ecrã no qual o utilizador pode adicionar ou atualizar dados

Pré-requisitosPrerequisites

Pode rever neste tutorial apenas os conceitos gerais ou pode segui-lo exatamente se concluir estes passos.You can review this tutorial for general concepts only, or you can follow it exactly if you complete these steps.

  1. Copie estes dados e, em seguida, cole-os num ficheiro 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 10:00 - 12:0010am-noon RibeiroVasquez SarmentoKumashiro
    SábadoSaturday 12:00 - 14:00noon-2pm FerreiraIce AndradeSinghal
    SábadoSaturday 14:00 - 16:002pm-4-pm SousaMyk BarbosaMueller
    DomingoSunday 10:00 - 12:0010am-noon SantosLi FariaAdams
    DomingoSunday 10:00 - 12:0010am-noon SousaSingh CorreiaMorgan
    DomingoSunday 10:00 - 12:0010am-noon MacedoBatye BotelhoNguyen
  2. Formate os dados como uma tabela, chamada Agenda, para 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, veja Criar uma tabela do Excel numa folha de cálculo.For more information, see Create an Excel table in a worksheet.

  3. Guarde o ficheiro com o nome eventsignup.xls e, em seguida, carregue-o para uma conta de armazenamento na cloud, 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 não está familiarizado com o PowerApps:If you're new to PowerApps:

Criar uma aplicação em branco e ligar a dadosCreate a blank app, and connect to data

  1. No PowerApps Studio, clique ou toque em Nova, no menu Ficheiro (perto do lado esquerdo do ecrã).In PowerApps Studio, click or tap New on the File menu (near the left edge of the screen).

    Opção Nova no menu Ficheiro

  2. No mosaico Aplicação em branco, clique ou toque em Esquema de telemóvel.On the Blank app tile, click or tap Phone layout.

    Opção para criar uma aplicação a partir de dados

  3. Se lhe for pedido, faça a visita guiada de introdução para compreender as áreas principais 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).

    Visita guiada rápida

    Pode sempre fazer a visita guiada mais tarde, ao clicar ou tocar no ícone de ponto de interrogação, perto do canto superior esquerdo do ecrã, e, depois, clicar ou tocar em Fazer a visita guiada 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 num ícone, no canto superior direito, para mudar para a vista de miniatura.In the left navigation bar, click or tap an icon in the upper-right corner to switch to the thumbnail view.

    Alternar as vistas

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

    Adicionar origem de dados

  6. Execute um dos seguintes passos:Perform either of these steps:

    • Se já tiver uma ligação à sua conta de armazenamento na cloud, clique ou toque na mesma.If you already have a connection to your cloud-storage account, click or tap it.
    • Se não tiver uma ligação à conta de armazenamento na cloud, clique ou toque em Adicionar Ligação, clique ou toque no seu tipo de conta, clique ou toque em Ligar e, em seguida, (se lhe for pedido) indique as 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 ficheiro do Excel, navegue para eventsignup.xlsx e clique ou toque no mesmo.Under Choose an Excel file, browse to eventsignup.xlsx, and then click or tap it.

    Especificar o ficheiro do Excel que pretende utilizar

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

    Especificar a tabela do Excel que pretende utilizar

    O separador Origens de dados do painel do lado direito mostra as origens de dados que adicionou à aplicação.The Data sources tab of the right-hand pane shows which data sources you've added to your app.

    Mostrar origens de dados ligadas

    Este tutorial só precisa de uma origem de dados, mas pode adicionar mais posteriormente.This tutorial requires only one data source, but you can add more data sources later.

Mostrar os dadosShow the data

  1. No separador Início, clique ou toque em Novo ecrã e, em seguida, clique ou toque em Listar ecrã.In the Home tab, click or tap New screen and then click or tap List screen.

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

    É adicionado um ecrã com vários controlos predefinidos, como uma caixa de pesquisa e um controlo de Galeria.A screen is added with several default controls, such as a search box and a Gallery control. A galeria cobre o ecrã inteiro abaixo da caixa de pesquisa.The gallery covers the entire screen under the search box.

  2. Clique ou toque em qualquer parte na galeria, exceto numa 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 a galeria

  3. No painel direito, abra a lista Esquemas e, em seguida, clique ou toque na opção que mostra um título, um subtítulo e o 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 a galeria

  4. Na lista de propriedades, clique ou toque em Itens, 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 não tiver a certeza de onde está a lista de propriedades, veja Adicionar e configurar controlos.If you're not sure where the property list is, see Add and configure controls.

    Nota

    Para origens de dados do Excel ou do SharePoint que contêm nomes de coluna com espaços, o PowerApps mostra os espaços como "_x0020_".For Excel or SharePoint data sources that contain column names with spaces, PowerApps shows the spaces as "_x0020_". Neste exemplo, a coluna "Volunteer 1" aparece numa fórmula como "Volunteer_x0020_1".In this example, the column "Volunteer 1" appears in a formula as "Volunteer_x0020_1".

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

    Os dados de Agenda na galeria, por predefinição

    Uma caixa de pesquisa pode filtrar a galeria com base em texto que o utilizador escrever.A search box can filter the gallery based on text that the user types. Se o utilizador escrever, pelo menos, uma letra na caixa de pesquisa, a galeria só mostra os registos nos quais o campo Voluntário 1 contém o texto escrito.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 para ordenar pode ordenar os registos 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 o utilizador clicar ou tocar neste botão, a sequência de ordenação alterna entre ordem ascendente e descendente.If a user clicks or taps that button, the sort order toggles between ascending and descending.

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

  5. Escreva um i na caixa de pesquisa e clique ou toque no botão de ordenaçã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.

    Ordenar e filtrar a galeria

    Mais informações sobre as funções Ordenar, Filtrar, entre outrasMore information about the Sort, Filter, and other functions

  6. Clique ou toque no controlo de Etiqueta, na parte superior do ecrã, para o selecionar.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 e copie-o 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.
    "Ver Registos""View Records"

    Alterar a barra de título

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

  1. Elimine Screen1 e mude o nome Screen2 para ViewScreen.Delete Screen1, and rename Screen2 to ViewScreen.

    Mudar o nome do ecrã

  2. Adicionar um ecrã e mude o nome para ChangeScreen.Add a screen, and rename it ChangeScreen.

    Adicionar e mudar o nome do ecrã

  3. No separador Inserir, clique ou toque em Texto e, em seguida, clique ou toque em Etiqueta.On the Insert tab, click or tap Text, and then click or tap Label.

  4. Configure o controlo de Etiqueta que acabou de adicionar:Configure the Label control that you just added:

    • Defina a propriedade Text para esta fórmula:Set its Text property to this formula:
      "Alterar registo""Change record"

    • Defina a propriedade Fill para esta fórmula:Set its Fill property to this formula:
      RGBA(62, 96, 170, 1).RGBA(62, 96, 170, 1).

    • Defina a propriedade Color para esta fórmula:Set its Color property to this formula:
      RGBA(255, 255, 255, 1)RGBA(255, 255, 255, 1)

    • Defina a propriedade Align para Center.Set its Align property to Center.

    • Defina a propriedade X para 0.Set its X property to 0.

    • Defina a propriedade Width para 640.Set its Width property to 640. O controlo de Etiqueta reflete as suas alterações.The Label control reflects your changes.

      ChangeScreen com faixa

Adicionar e configurar um formulárioAdd and configure a form

  1. No separador 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 do ecrã.Move and resize the form to cover most of the screen.

    Adicionar um formulário

    O formulário tem o nome Form1 por predefinição, a menos que já tenha adicionado e removido outro formulário.The form is named Form1 by default unless you already added and removed a form. Nesse caso, mude o nome do formulário para Form1.In that case, rename the form to Form1.

  3. Defina a propriedade DataSource de Form1 para Schedule.Set DataSource property of Form1 to Schedule.

  4. Defina a propriedade Item de 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 verificação de cada campo para o mostrar.In the right-hand pane, click or tap the checkbox for each field to show it.

    Mostrar campos no formulário

  6. Junto à parte inferior do 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 controlo de Etiqueta no novo cartão.Add a Label control in the new card.

  8. Defina a propriedade AutoHeight do novo controlo para true e defina a propriedade Text 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

    A etiqueta irá mostrar os eventuais 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 o selecionar.In the left navigation bar, click or tap the thumbnail for the ChangeScreen to select it.

  10. No separador 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 do ecrã.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 utilizador clica ou toca na seta, a função Navegar abre o ViewScreen.When the user clicks or taps the arrow, the Navigate function opens the ViewScreen.

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

    Adicionar o botão “Guardar”

  13. Defina a propriedade OnSelect do botão como 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 utilizador clica ou toca no botão, a função SubmitForm guarda as alterações à origem de dados e o ViewScreen volta a aparecer.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 do ecrã, adicione outro botão e defina as respetivas propriedades Texto como "Remover" e OnSelect como 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 utilizador clica ou toca neste botão, a função Remover remove o registo e o ViewScreen volta a aparecer.When the user clicks or taps this button, the Remove function removes the record, and the ViewScreen reappears.

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

    Este passo oculta o botão Remover quando o utilizador está a criar um registo.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 a partir do ViewScreenSet navigation from ViewScreen

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

    Abrir o ViewScreen

  2. Clique ou toque na seta Seguinte do primeiro registo na galeria.Click or tap the Next arrow for the first record in the gallery.

    Seta Seguinte

  3. Defina a propriedade OnSelect da seta como 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 registo

  5. Defina a propriedade OnSelect do ícone selecionado como 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 utilizador clica ou toca neste ícone ChangeScreen aparece com cada campo vazio, para que o utilizador possa criar um registo mais facilmente.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 a aplicaçãoRun the app

Enquanto vai personalizando a sua aplicação, teste as alterações ao executá-la no Modo de pré-visualização, conforme descrito nos passos desta secçã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 ViewScreen.In the left navigation bar, click or tap the top thumbnail to select the ViewScreen.

    Selecionar ViewScreen

  2. Prima F5 (ou clique ou toque no ícone Pré-visualizar, junto ao canto superior direito) para abrir o Modo de pré-visualização.Open Preview mode by pressing F5 (or clicking or tapping the Preview icon near the upper-right corner).

    Abrir o Modo de pré-visualização

  3. Clique ou toque na seta Seguinte de um registo mostrar os detalhes do mesmo.Click or tap the Next arrow for a record to show details about that record.

  4. No ChangeScreen, altere as informações num ou mais campos e, em seguida, clique ou toque em Guardar, para guardar as alterações, ou em Remover, para remover o registo.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. Prima Esc (ou clique ou toque no ícone de fechar, na barra de título) para fechar o Modo de pré-visualização.Close Preview mode by pressing Esc (or by clicking or tapping the close icon under the title bar).

    Fechar o Modo de pré-visualização

Passos seguintesNext steps