Crie seu próprio aplicativo do zero usando qualquer uma das várias fontes de dados, adicionando mais fontes posteriormente, se desejar. 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. 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.

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.

Seguindo este tutorial, você criará um aplicativo que contém duas telas. Em uma tela, os usuários podem navegar por meio de um conjunto de registros:

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:

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

Pré-requisitos

Você pode examinar este tutorial para ver apenas os conceitos gerais ou pode seguir exatamente se concluir essas etapas.

  1. Copie esses dados e, em seguida, cole-os em um arquivo do Excel.

    Dia de início Hora de início Voluntário 1 Voluntário 2
    Sábado 10h – meio-dia Vasquez Kumashiro
    Sábado meio-dia – 14h Gelo Singhal
    Sábado 14h – 16h Myk Mueller
    Domingo 10h – meio-dia Li Adams
    Domingo 10h – meio-dia Singh Morgan
    Domingo 10h – meio-dia Batye Nguyen
  2. Formate esses dados como uma tabela chamada Agenda, de modo que o PowerApps possa analisar as informações.

    Para obter mais informações, consulte Criar uma tabela do Excel em uma planilha.

  3. Salve o arquivo com o nome eventsignup.xlse, em seguida, carregue-o para uma conta de armazenamento em nuvem, como o OneDrive.

  4. Se você não estiver familiarizado com PowerApps:

Criar um aplicativo em branco e conectar a dados

  1. No PowerApps Studio, clique ou toque em Novo no menu Arquivo (próximo à borda esquerda da tela).

    Opção Novo no menu Arquivo

  2. No bloco Aplicativo em branco, clique ou toque em Layout do telefone.

    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).

    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.

  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.

    Alternar entre modos de exibição

  5. No painel direito, clique ou toque em Adicionar fonte de dados.

    Adicionar fonte de dados

  6. Execute uma das seguintes etapas:

    • Se você já tiver uma conexão à sua conta de armazenamento em nuvem, clique ou toque nela.
    • 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.
  7. Em Escolher um arquivo do Excel, navegue até eventsignup.xlsx, e, em seguida, clique ou toque nele.

    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.

    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.

    Mostrar fontes de dados conectadas

    Este tutorial requer apenas uma fonte de dados, mas você pode adicionar mais fontes de dados posteriormente.

Mostrar os dados

  1. Na guia Início, clique ou toque em Nova tela e, em seguida, clique ou toque em Tela de lista.

    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 galeria abrange toda a tela abaixo da caixa de pesquisa.

  2. Clique ou toque em qualquer lugar da galeria, exceto em uma seta, como diretamente abaixo da caixa de pesquisa.

    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.

    Selecionar galeria

  4. Na lista de propriedades, clique ou toque em Items, copie esta fórmula e cole-a na barra de fórmulas:

    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.

    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_". Neste exemplo, a coluna "Voluntário 1" aparece em uma fórmula como "Voluntário_x0020_1".

    Essa galeria mostra os dados da tabela Agenda.

    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. 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.

    O botão de classificação pode classificar os registros com base nos dados da coluna Voluntário 1. Se um usuário clicar ou tocar nesse botão, a ordem de classificação alternará entre crescente e decrescente.

    Essa fórmula contém as funções Sort, If, IsBlank, Filter e Text. Para obter mais informações sobre essas e outras funções, consulte a referência de fórmula

  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).

    A galeria mostra estes resultados.

    Classificar e filtrar a galeria

    Para obter mais informações sobre o Classificação, Filtro, e outras funções

  6. Selecione o controle Rótulo na parte superior da tela clicando ou tocando no controle.

    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.
    “Exibir Registros”

    Alterar barra de título

Criar o ChangeScreen e a sua faixa

  1. Exclua Screen1 e renomeie Screen2 como ViewScreen.

    Renomear a tela

  2. Adicione uma tela e renomeie-a ChangeScreen.

    Adicionar e renomear tela

  3. Na guia Inserir, clique ou toque em Texto e, em seguida, clique ou toque em Rótulo.

  4. Configure o controle Rótulo que você acabou de adicionar:

    • Defina a propriedade Text como esta fórmula:
      “Alterar registro”
    • Defina a propriedade Preencher como esta fórmula:
      RGBA (62, 96, 170, 1).
    • Defina a propriedade Cor como esta fórmula:
      RGBA (255, 255, 255, 1)
    • Defina a propriedade Alinhar como Centralizar.
    • Defina a propriedade X como 0.
    • Defina a propriedade Largura como 640.

    O controle Rótulo reflete as alterações.

    ChangeScreen com faixa

Adicionar e configurar um formulário

  1. Na guia Inserir, clique ou toque em Formulários e, em seguida, clique ou toque em Editar.

  2. Mova e redimensione o formulário para abranger a maior parte da tela.

    Adicionar um formulário

    O formulário é denominado Form1 por padrão, a menos que você já tenha adicionado e removido um formulário. Nesse caso, renomeie o formulário para Form1.

  3. Defina a propriedade Fonte de dados do Form1 para Agenda.

  4. Defina a propriedade Item do Form1 para esta expressão:
    BrowseGallery1.Selected

  5. No painel direito, clique ou toque na caixa de seleção de cada campo para mostrá-lo.

    Mostrar campos no formulário

  6. Na parte inferior da formulário, clique ou toque em Adicionar um cartão personalizado.

    Adicionar um cartão personalizado

  7. Adicione um controle Rótulo ao novo cartão.

  8. Defina a propriedade AutoHeight do controle como true e a propriedade Texto para esta fórmula:
    Form1.Error

    O rótulo mostrará os erros do formulário.

  9. Na barra de navegação à esquerda, clique ou toque na miniatura de ChangeScreen para selecioná-la.

  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.

  11. Defina a propriedade OnSelect da seta para esta fórmula:

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

    Quando o usuário clica ou toca na seta a função Navegar mostra o ViewScreen.

  12. Adicione um controle de Botão ao formulário e defina a propriedade do botão Texto como "Salvar".

    Adicionar um botão Salvar

  13. Defina a propriedade OnSelect do botão para esta fórmula:

    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.

  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:

    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.

  15. Defina a propriedade Visível do botão Remover para esta fórmula:
    Form1.Mode=FormMode.Edit

    Esta etapa oculta o botão Remover quando o usuário está criando um registro.

    O ChangeScreen corresponde a este exemplo:

    ChangeScreen final

Definir a navegação de ViewScreen

  1. Na barra de navegação à esquerda, clique ou toque na miniatura de ViewScreen.

    Abrir ViewScreen

  2. Clique ou toque na seta Avançar para o primeiro registro na galeria.

    Seta Avançar

  3. Defina a propriedade OnSelect desta célula para esta fórmula:

    Navigate(ChangeScreen,ScreenTransition.None)

  4. No canto superior direito, clique ou toque no ícone de adição.

    Adicionar registro

  5. Defina a propriedade OnSelect do ícone selecionado para esta fórmula:

    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.

Executar o aplicativo

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.

  1. Na barra de navegação à esquerda, clique ou toque na miniatura superior para selecionar a ViewScreen.

    Selecionar ViewScreen

  2. Abra o modo de Visualização pressionando F5 (ou clicando ou tocando no ícone Visualização no canto superior direito).

    Abrir modo de visualização

  3. Clique ou toque na seta Avançar de um registro para mostrar os detalhes sobre esse registro.

  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.

  5. Feche o modo de Visualização pressionando Esc (ou clicando ou tocando no ícone Fechar abaixo da barra de título).

    Fechar modo de visualização

Próximas etapas