Criar uma aplicação baseada em telas de raiz com base em dados do ExcelCreate a canvas app from scratch based on Excel data

Crie a sua própria aplicação baseada em telas do zero com base nos dados do Excel (formatados como uma tabela) e, em seguida, adicione dados de outras origens, se quiser.Create your own canvas app from scratch based on Excel data, formatted as a table, and then add data from other sources if you want. 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 dos ecrãs, os utilizadores podem navegar por um conjunto de registos.On one screen, users can browse through a set of records. No outro, podem 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. Essa abordagem leva mais tempo do que criar um aplicativo básico do Excel , mas os criadores de aplicativos com mais experiência podem usá-lo para criar o melhor aplicativo para suas necessidades.This approach takes more time than creating a basic app from Excel does, but app makers who have more experience can use it to build the best app for their needs.

Pré-requisitosPrerequisites

Para seguir exatamente os passos neste tutorial, crie primeiro um ficheiro do Excel com estes dados de exemplo.To follow the steps in this tutorial exactly, first create an Excel file using this sample data.

  1. Copie estes dados e, em seguida, cole-os num ficheiro do Excel.Copy this data, and then paste it into an Excel file.

    StartDayStartDay StartTimeStartTime VoluntárioVolunteer Cópia de SegurançaBackup
    SábadoSaturday 10:00 - 12:0010am-noon RibeiroVasquez SarmentoKumashiro
    SábadoSaturday 12:00 - 14:00noon-2pm FerreiraIce AndradeSinghal
    SábadoSaturday 14:00 - 16:002pm-4pm SousaMyk BarbosaMueller
    DomingoSunday 10:00 - 12:0010am-noon SantosLi FariaAdams
    DomingoSunday 12:00 - 14:00noon-2pm SousaSingh CorreiaMorgan
    DomingoSunday 14:00 - 16:002pm-4pm MacedoBatye BotelhoNguyen
  2. Formate esses dados como uma tabela, chamada Schedule, para que os aplicativos de energia possam analisar as informações.Format that data as a table, named Schedule, so that Power Apps can parse the information.

    Para obter mais informações, veja Format a table in Excel (Formatar uma tabela no Excel).For more information, see Format a table in Excel.

  3. Salve o arquivo com o nome eventsignup. xlsx, feche-o e, em seguida, carregue-o em uma conta de armazenamento em nuvem, como o onedrive.Save the file under the name eventsignup.xlsx, close it, and then upload it to a cloud-storage account, such as OneDrive.

Importante

Pode utilizar o seu próprio ficheiro do Excel e utilizar este tutorial apenas para consultar os conceitos gerais.You can use your own Excel file and review this tutorial for general concepts only. No entanto, os dados no ficheiro do Excel têm de estar formatados como uma tabela.However, the data in the Excel file must be formatted as a table. Para obter mais informações, veja Format a table in Excel (Formatar uma tabela no Excel).For more information, see Format a table in Excel.

Abrir uma aplicação em brancoOpen a blank app

  1. Entre no Power apps.Sign in to Power Apps.

  2. Em Faça a sua própria aplicação, selecione Aplicação de tela de espaço vazio.Under Make your own app, select Canvas app from blank.

    Criar uma aplicação baseada em telas em brancoCreate blank canvas app

  3. Especifique um nome para a sua aplicação, selecione Telefone e, em seguida, selecione Criar.Specify a name for your app, select Phone, and then select Create.

    Pode criar uma aplicação do zero para telemóveis ou para outros dispositivos (tais como tablets).You can design an app from scratch for phones or for other devices (such as tablets). Este tópico centra-se na criação de uma aplicação para telemóveis.This topic focuses on designing an app for phones.

    Especificar o nome e formato da aplicaçãoSpecify name and format of app

    O Power apps Studio cria um aplicativo em branco para telefones.Power Apps Studio creates a blank app for phones.

  4. Se a caixa de diálogo Bem-vindo ao Power apps Studio for aberta, selecione ignorar.If the Welcome to Power Apps Studio dialog box opens, select Skip.

Ligar a dadosConnect to data

  1. No meio do ecrã, selecione ligar aos dados.In the middle of the screen, select connect to data.

  2. No painel Dados, selecione a ligação para a sua conta de armazenamento na cloud, se for apresentada.In the Data pane, select the connection for your cloud-storage account if it appears. Caso contrário, siga estes passos para adicionar uma ligação:Otherwise, follow these steps to add a connection:

    1. Selecione Nova ligação, o mosaico da sua conta de armazenamento na cloud e, em seguida, Criar.Select New connection, select the tile for your cloud-storage account, and then select Create.
    2. Se lhe for pedido, forneça as credenciais dessa conta.If prompted, provide your credentials for that account.
  3. Em Escolher um ficheiro do Excel, escreva ou cole as primeiras letras de eventsignup para filtrar a lista e, em seguida, selecione o ficheiro que carregou.Under Choose an Excel file, type or paste the first letters of eventsignup to filter the list, and then select the file that you uploaded.

  4. Em Escolher uma tabela, selecione a caixa de verificação de Agenda e, em seguida, selecione Ligar.Under Choose a table, select the checkbox for Schedule, and then select Connect.

  5. Feche o painel Dados ao clicar no ícone de fechar (X) no canto superior direito.In the upper-right corner of the Data pane, close it by selecting the close icon (X).

Criar o ecrã da vistaCreate the view screen

  1. No separador Home Page, selecione a seta para baixo junto a Novo ecrã para abrir uma lista de tipos de ecrã e, em seguida, selecione Lista.On the Home tab, select the down-arrow next to New screen to open a list of screen types, and then select List.

    É 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. Na parte superior do novo ecrã, selecione o controlo Etiqueta e substitua [Título] por Ver registos.At the top of the new screen, select the Label control, and then replace [Title] with View records.

    Alterar a barra de título

  3. Na barra de navegação esquerda, selecione BrowseGallery1.In the left navigation bar, select BrowseGallery1.

    A galeria é rodeada por uma caixa de seleção com identificadores.A selection box with handles surrounds the gallery.

    Adicionar um ecrã de lista

  4. No separador Propriedades do painel direito, selecione a seta para baixo do menu Esquema.On the Properties tab of the right-hand pane, select the down arrow for the Layout menu.

    Abrir o menu Esquema

  5. Selecione Título, subtítulo e corpo.Select Title, subtitle, and body.

  6. Na barra de fórmulas, substitua CustomGallerySample por Agenda. Substitua também as duas instâncias de SampleText por Voluntário.In the formula bar, replace CustomGallerySample with Schedule, and replace both instances of SampleText with Volunteer.

  7. Na extremidade direita da barra de fórmulas, selecione a seta para baixo e, em seguida, selecione Formatar texto.On the right edge of the formula bar, select the down arrow, and then select Format text.

    A fórmula corresponde a este exemplo:The formula matches this example:

    SortByColumns(
        Search(
            Schedule;
            TextSearchBox1.Text;
            "Volunteer"
        );
        "Volunteer";
        If(
            SortDescending1;
            SortOrder.Descending;
            SortOrder.Ascending
        )
    )
    
  8. No painel Propriedades do painel direito, selecione Editar junto à etiqueta Campos.On the Properties tab of the right-hand pane, select Edit next to the Fields label.

  9. Na caixa Title2 , selecione voluntário, na caixa Subtitle2 , selecione StartDaye, na caixa Body1 , selecione StartTime.In the Title2 box, select Volunteer, in the Subtitle2 box, select StartDay, and in the Body1 box, select StartTime.

  10. Feche o painel Dados ao clicar no ícone de fechar (X) no canto superior direito.In the upper-right corner of the Data pane, close it by selecting the close icon (X).

Os utilizadores podem ordenar e filtrar a galeria pelo nome do voluntário com base nas funções SortByColumns e Pesquisar nessa fórmula.Users can sort and filter the gallery by volunteer name based on the SortByColumns and Search functions in that formula.

  • Se o utilizador escrever, pelo menos, uma letra na caixa de pesquisa, a galeria só mostrará os registos nos quais o campo Voluntário 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 field contains the text that the user typed.
  • Se um utilizador selecionar o botão Ordenar (entre o botão Atualizar e o botão de adição na barra de título), a galeria mostrará os registos por ordem ascendente ou descendente (consoante o número de vezes que o utilizador selecionar o botão) com base no campo Voluntário.If a user selects the sort button (between the refresh button and the plus button in the title bar), the gallery shows the records in ascending or descending order (depending on how many times the user selects the button) based on the Volunteer field.

Para obter mais informações sobre estas e outras funções, veja a referência de fórmulas.For more information about these and other functions, see the formula reference.

Criar o ecrã de alteraçãoCreate the change screen

  1. No separador Home Page, selecione a seta para baixo junto a Novo ecrã e, em seguida, selecione Formulário.On the Home tab, select the down arrow next to New screen, and then select Form.

  2. Na barra de navegação esquerda, selecione EditForm1.In the left navigation bar, select EditForm1.

  3. No separador Propriedades do painel direito, selecione a seta para baixo junto a Origem de dados e, em seguida, selecione Agenda na lista apresentada.On the Properties tab of the right-hand pane, select the down arrow next to Data source, and then select Schedule in the list that appears.

  4. Na origem de dados especificada, selecione Editar campos.Under the data source that you just specified, select Edit fields.

  5. No painel Campos, selecione Adicionar campo, selecione a caixa de verificação de cada campo e, em seguida, selecione Adicionar.In the Fields pane, select Add field, select the check box for each field, and then select Add.

  6. Selecione a seta junto ao nome de cada campo para os fechar e, em seguida, arraste o campo Voluntário para cima, de forma a que seja apresentado na parte superior da lista de campos.Select the arrow next to the name of each field to collapse it, and then drag the Volunteer field up so that it appears at the top of the list of fields.

    Reordenar os campos

  7. Feche o painel Campos ao clicar no ícone de fechar (X) no canto superior direito.In the upper-right corner of the Fields pane, close it by selecting the close icon (X).

  8. Defina a propriedade Item do formulário como esta expressão ao escrevê-la ou colá-la na barra de fórmulas:Set the Item property of the form to this expression by typing or pasting it in the formula bar:

    BrowseGallery1.Selected

  9. Na parte superior do ecrã, selecione o controlo Etiqueta e, em seguida, substitua [Título] por Alterar registos.At the top of the screen, select the Label control, and then replace [Title] with Change records.

    Alterar a barra de título

Eliminar e mudar o nome dos ecrãsDelete and rename screens

  1. Na barra de navegação esquerda, selecione as reticências (…) para Screen1 e, em seguida, Eliminar.In the left navigation bar, select the ellipsis (...) for Screen1, and then select Delete.

    Eliminar ecrã

  2. Selecione as reticências (…) para Screen2, selecione Mudar o nome e, em seguida, escreva ou cole ViewScreen.Select the ellipsis (...) for Screen2, select Rename, and then type or paste ViewScreen.

  3. Selecione as reticências (…) para Screen3, selecione Mudar o nome e, em seguida, escreva ou cole ChangeScreen.Select the ellipsis (...) for Screen3, select Rename, and then type or paste ChangeScreen.

Configurar os ícones no ecrã da vistaConfigure icons on the view screen

  1. Próximo da parte superior do ViewScreen, selecione o ícone de seta circular.Near the top of the ViewScreen, select the circular-arrow icon.

    Adicionar registo

  2. Defina a propriedade OnSelect desse ícone como esta fórmula:Set the OnSelect property for that icon to this formula:

    Refresh(Schedule)

    Quando o utilizador seleciona este ícone, os dados de Agendamento são atualizados no ficheiro do Excel.When the user selects this icon, the data from Schedule is refreshed from the Excel file.

    Para obter mais informações sobre esta e outras funções, veja a referência de fórmulas.For more information about this and other functions, see the formula reference.

  3. No canto superior direito do ViewScreen, selecione o ícone de adição.In the upper-right corner of the ViewScreen, select the plus icon.

    Adicionar registo

  4. Defina a propriedade OnSelect desse ícone como esta fórmula:Set the OnSelect property for that icon to this formula:

    NewForm(EditForm1);;Navigate(ChangeScreen;ScreenTransition.None)

    Quando o utilizador seleciona este ícone, ChangeScreen aparece com cada campo vazio, para que o utilizador possa criar um registo mais facilmente.When the user selects this icon, ChangeScreen appears with each field empty, so that the user can create a record more easily.

  5. Selecione a seta a apontar para a direita do primeiro registo na galeria.Select the right-pointing arrow for the first record in the gallery.

    Selecionar a seta

  6. Defina a propriedade OnSelect da seta como esta fórmula:Set the OnSelect property for the arrow to this formula:

    EditForm(EditForm1);; Navigate(ChangeScreen; ScreenTransition.None)

    Quando o utilizador seleciona este ícone, ChangeScreen aparece com cada campo a mostrar os dados do registo selecionado, para que o utilizador possa editar ou eliminar o registo mais facilmente.When the user selects this icon, ChangeScreen appears with each field showing the data for the selected record, so that the user can edit or delete the record more easily.

Configurar os ícones no ecrã de alteraçãoConfigure icons on the change screen

  1. Em ChangeScreen, selecione o ícone "X" no canto superior esquerdo.On ChangeScreen, select the "X" icon in the upper-left corner.

    Ícone Cancelar

  2. Defina a propriedade OnSelect desse ícone como esta fórmula:Set the OnSelect property for that icon to this formula:

    ResetForm(EditForm1);;Navigate(ViewScreen; ScreenTransition.None)

    Quando o utilizador seleciona este ícone, todas as alterações que o utilizador tenha efetuado neste ecrã são eliminadas e é apresentado o ecrã da vista.When the user selects this icon, any changes that the user made in this screen are discarded, and the view screen opens.

  3. No canto superior direito, selecione o ícone de marca de verificação.In the upper-right corner, select the checkmark icon.

    Ícone de marca de verificação

  4. Defina a propriedade OnSelect da marca de verificação como esta fórmula:Set the OnSelect property for the checkmark to this formula:

    SubmitForm(EditForm1);; Navigate(ViewScreen; ScreenTransition.None)

    Quando o utilizador seleciona este ícone, todas as alterações que o utilizador tenha efetuado neste ecrã são guardadas e é apresentado o ecrã da vista.When the user selects this icon, any changes that the user made is this screen are saved, and the view screen opens.

  5. No separador Inserir, selecione Ícones e, em seguida, o ícone de Lixo.On the Insert tab, select Icons, and then select the Trash icon.

  6. Defina o novo ícone da propriedade Cor como Branco e mova o novo ícone para que seja apresentado junto ao ícone de marca de verificação.Set the new icon's Color property to White, and move the new icon so it appears next to the checkmark icon.

    Ícone de lixo

  7. Defina a propriedade Visible do ícone de lixo como esta fórmula:Set the Visible property for the trash icon to this formula:

    EditForm1.Mode = FormMode.Edit

    Este ícone apenas será apresentado quando o formulário estiver no modo Edição e não no modo Novo.This icon will appear only when the form is in Edit mode, not in New mode.

  8. Defina a propriedade OnSelect do ícone de lixo como esta fórmula:Set the OnSelect property for the trash icon to this formula:

    Remove(Schedule; BrowseGallery1.Selected);; Navigate(ViewScreen; ScreenTransition.None)

    Quando o utilizador seleciona este ícone, o registo selecionado é eliminado da origem de dados e é apresentado o ecrã da vista.When the user selects this icon, the selected record is deleted from the data source, and the view screen opens.

Testar a aplicaçãoTest the app

  1. Selecione ViewScreen e, em seguida, abra a Pré-visualização ao premir F5 (ou ao selecionar o ícone de Pré-visualização junto ao canto superior direito).Select the ViewScreen, and then open Preview by pressing F5 (or by selecting the Preview icon near the upper-right corner).

    Abrir o Modo de pré-visualização

  2. Escreva ou cole uma ou mais letras na caixa de pesquisa para filtrar a lista com base no nome do voluntário.Type or paste one or more letters in the search box to filter the list based on the name of the volunteer.

  3. Selecione o ícone Ordenar uma ou mais vezes para mostrar os dados por ordem ascendente ou descendente com base no nome do voluntário.Select the sort icon one or more times to show the data ascending or descending order based on the name of the volunteer.

  4. Adicione um registo.Add a record.

  5. Atualize o registo que adicionou e, em seguida, guarde as alterações.Update the record that you added, and then save the changes.

  6. Atualize o registo que adicionou e, em seguida, cancele as alterações.Update the record that you added, and then cancel the changes.

  7. Elimine o registo que adicionou.Delete the record that you added.

  8. Feche o modo de Pré-visualização ao premir Esc (ou ao selecionar o ícone de fechar no canto superior direito).Close Preview mode by pressing Esc (or by selecting the close icon in the upper-right corner).

Passos seguintesNext steps

  • Prima Ctrl-S para guardar a sua aplicação na cloud, para que possa executá-la noutros dispositivos.Press Ctrl-S to save your app in the cloud so that you can run it from other devices.
  • Partilhe a aplicação para que outras pessoas possam executá-la.Share the app so that other people can run it.
  • Saiba mais sobre as funções, tais como Patch, que pode utilizar para gerir os dados sem criar um formulário padrão.Learn more about functions such as Patch, which you can use to manage data without creating a standard form.
  • Ligue esta aplicação a uma solução para que possa, por exemplo, implementá-la num ambiente diferente ou publicá-la no AppSource.Link this app to a solution so that you can, for example, deploy it to a different environment or publish it on AppSource.