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:
Em outra tela, os usuários podem criar um registro, atualizar um ou mais campos em um registro ou excluir um registro inteiro:
Pré-requisitos
Você pode examinar este tutorial para ver apenas os conceitos gerais ou pode seguir exatamente se concluir essas etapas.
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 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.
Salve o arquivo com o nome eventsignup.xlse, em seguida, carregue-o para uma conta de armazenamento em nuvem, como o OneDrive.
Se você não estiver familiarizado com PowerApps:
- Saiba como adicionar um controle e definir suas propriedades, que determinam como o controle aparece e se comporta.
- Saiba como adicionar e renomear uma tela.
Criar um aplicativo em branco e conectar a dados
No PowerApps Studio, clique ou toque em Novo no menu Arquivo (próximo à borda esquerda da tela).
No bloco Aplicativo em branco, clique ou toque em Layout do telefone.
Se solicitado, faça o tour de introdução para compreender as principais áreas do PowerApps (ou clique ou toque em Ignorar).
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.
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.
No painel direito, clique ou toque em Adicionar fonte de dados.
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.
Em Escolher um arquivo do Excel, navegue até eventsignup.xlsx, e, em seguida, clique ou toque nele.
Em Escolher uma tabela, marque a caixa de seleção Agenda e clique ou toque em Conectar.
A guia Fontes de dados do painel direito mostra quais fontes de dados você adicionou ao aplicativo.
Este tutorial requer apenas uma fonte de dados, mas você pode adicionar mais fontes de dados posteriormente.
Mostrar os dados
Na guia Início, clique ou toque em Nova tela e, em seguida, clique ou toque em Tela de lista.
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.
Clique ou toque em qualquer lugar da galeria, exceto em uma seta, como diretamente abaixo da caixa de pesquisa.
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.
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.
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
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.
Para obter mais informações sobre o Classificação, Filtro, e outras funções
Selecione o controle Rótulo na parte superior da tela clicando ou tocando no controle.
Na lista de propriedades, clique ou toque em Texto, copie o texto e cole-o na barra de fórmulas.
“Exibir Registros”
Criar o ChangeScreen e a sua faixa
Exclua Screen1 e renomeie Screen2 como ViewScreen.
Adicione uma tela e renomeie-a ChangeScreen.
Na guia Inserir, clique ou toque em Texto e, em seguida, clique ou toque em Rótulo.
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.
- Defina a propriedade Text como esta fórmula:
Adicionar e configurar um formulário
Na guia Inserir, clique ou toque em Formulários e, em seguida, clique ou toque em Editar.
Mova e redimensione o formulário para abranger a maior parte da tela.
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.
Defina a propriedade Fonte de dados do Form1 para Agenda.
Defina a propriedade Item do Form1 para esta expressão:
BrowseGallery1.SelectedNo painel direito, clique ou toque na caixa de seleção de cada campo para mostrá-lo.
Na parte inferior da formulário, clique ou toque em Adicionar um cartão personalizado.
Adicione um controle Rótulo ao novo cartão.
Defina a propriedade AutoHeight do controle como true e a propriedade Texto para esta fórmula:
Form1.ErrorO rótulo mostrará os erros do formulário.
Na barra de navegação à esquerda, clique ou toque na miniatura de ChangeScreen para selecioná-la.
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.
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.
Adicione um controle de Botão ao formulário e defina a propriedade do botão Texto como "Salvar".
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.
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.
Defina a propriedade Visível do botão Remover para esta fórmula:
Form1.Mode=FormMode.EditEsta etapa oculta o botão Remover quando o usuário está criando um registro.
O ChangeScreen corresponde a este exemplo:
Definir a navegação de ViewScreen
Na barra de navegação à esquerda, clique ou toque na miniatura de ViewScreen.
Clique ou toque na seta Avançar para o primeiro registro na galeria.
Defina a propriedade OnSelect desta célula para esta fórmula:
Navigate(ChangeScreen,ScreenTransition.None)
No canto superior direito, clique ou toque no ícone de adição.
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.
Na barra de navegação à esquerda, clique ou toque na miniatura superior para selecionar a ViewScreen.
Abra o modo de Visualização pressionando F5 (ou clicando ou tocando no ícone Visualização no canto superior direito).
Clique ou toque na seta Avançar de um registro para mostrar os detalhes sobre esse registro.
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.
Feche o modo de Visualização pressionando Esc (ou clicando ou tocando no ícone Fechar abaixo da barra de título).
Próximas etapas
- Pressione Ctrl-S para salvar seu aplicativo na nuvem e executá-lo de outros dispositivos.
- Compartilhe o aplicativo para que outras pessoas possam executá-lo.
- Saiba mais sobre galerias, formulários, e fórmulas.