Criar um aplicativo otimizado para dispositivos móveis que usa designs dinâmicos

  • 6 minutos

Neste exercício, criamos um aplicativo de tela única otimizado para dispositivos móveis com base nos dados das máquinas de café Contoso. O objetivo deste exercício é proporcionar experiência na construção de um aplicativo com contêineres de layout automático e mostrar em primeira mão como os aplicativos dinâmicos se comportam. Criamos um aplicativo totalmente novo, então acesse a página inicial do Power Apps e siga estas etapas.

  1. Baixe a planilha Excel CoffeeMachineData.xlsx. Selecione o link e o botão Fazer download do arquivo bruto para fazer download do arquivo. Depois de fazer os downloads, continue na próxima etapa.

  2. Vá para make.powerapps.com. Selecione Criar>Aplicativo em branco>Aplicativo de tela em banco>Tablet. Forneça um nome ao seu aplicativo e pressione Criar.

  3. Você pode consultar o diagrama abaixo para obter assistência nas próximas etapas, numeradas de acordo com as etapas. Na barra de comandos, selecione o botão Configurações. (Talvez seja necessário selecionar Aplicativo no painel Visualização em árvore para exibi-lo.)

    Imagem das etapas numeradas de 3 a 7 e 9. A imagem mostra o painel Configurações do aplicativo junto com a barra de comandos e a exibição em árvore.

  4. No painel pop-up Configurações, selecione a guia Exibição, role para baixo e Desative a opção Dimensionar para ajustar (esta ação altera automaticamente a opção Bloquear taxa de proporção para Desativar).

  5. Feche o pop-up Configurações.

  6. Crie uma Nova tela com um layout de Barra lateral para seu aplicativo. Nomeie-a como “Catalog Screen”.

  7. Crie uma Nova tela a partir de Modelos>Sucesso. Nomeie-a como "Success Screen".

  8. Excluir Screen1.

  9. Em seguida, selecione o botão Adicionar dados na barra de comandos. Em seguida, localize/selecione OneDrive for Business.

  10. No painel Escolha um arquivo do Excel no lado direito da tela, selecione seu arquivo CoffeeMachineData.xlsx, em seguida, selecione a tabela CoffeeMachines. Conecte a tabela selecionando Conectar na parte inferior do painel.

  11. Selecione o contêiner horizontal no lado esquerdo da tela, chamado SidebarContainer1. Consulte a imagem abaixo para obter as próximas etapas.

    Captura de tela das etapas numeradas de 11 a 13.

  12. Selecione o ícone de adição (+) no contêiner e insira uma Galeria vertical em SidebarContainer1 e selecione CoffeeMachines como fonte de dados. Defina a propriedade Fill como Color.LightSteelBlue.

  13. A seguir inseriremos um formulário na Catalog Screen. Selecione MainContainer1, que está no lado direito da tela do aplicativo. Selecione o ícone de adição (+) (ou o botão Inserir na barra de comandos) para inserir Editar formulário. No painel Propriedades no lado direito da tela, selecione CoffeeMachines como a Fonte de dados.

  14. Ainda no painel Propriedades, selecione a opção Editar campos em Fonte de dados.

  15. No painel Campos, selecione Adicionar campo e adicione todos os campos marcando a caixa ao lado de cada nome de campo no pop-up Escolher um campo. Em seguida, selecione o botão Adicionar na parte inferior.

  16. Feche o painel Campos.

  17. Enquanto o Form1 ainda está selecionado, no menu suspenso Propriedade no canto superior esquerdo da tela, selecione a propriedade Item e, no campo de fórmula (fx), insira Gallery1.Selected

  18. Por fim, ainda no seu formulário, defina a propriedade Fill como Color.LightSteelBlue

  19. A seguir, adicionamos ao nosso contêiner de cabeçalho. Selecione o controle HeaderContainer e use o ícone de adição (+) para inserir um controle de Rótulo de texto e ajuste as propriedades no menu suspenso da seguinte forma:

    Text: "Contoso Coffee Catalog"

    Size: altere de 13 para 20

    Height: altere de 40 para Parent.Height

    Width: altere de 150 para 200

  20. Usando o botão Alinhar na barra de comandos (à esquerda do botão Cor; alternativamente, você pode olhar para a seleção Alinhamento de texto no painel Propriedades à direita), altere Alinhar de Alinhar à esquerda para Justificar.

  21. Em seguida, insira um controle Image em HeaderContainer1 e ajuste as propriedades da seguinte forma:

    Image: User().Image

    Height: Parent.Height

  22. Vamos criar um ícone de conexão inserindo um Ícone de Globo em HeaderContainer1. Ajuste as propriedades da seguinte maneira:

    Height: 20

    Width: 20

    Color: If(Connection.Connected, Color.Green, Color.LightSteelBlue)

  23. A seguir, justificamos à direita nossos itens HeaderContainer. Para fazer isso, selecione HeaderContainer1 no modo de exibição de árvore e procure no painel Propriedades à direita a opção Justificar (horizontal). A terceira opção é Fim. Selecione-o.

  24. Finalmente, vamos adicionar um pouco de cor de fundo ao nosso contêiner de cabeçalho. Ajuste a propriedade Fill como Color.LightSteelBlue

  25. Selecione MainContainer1, onde reside seu formulário. Insira um controle Botão com as seguintes propriedades:

    Text: "Salvar"

    Width: Parent.Width

    OnSelect: SubmitForm(Form1)

  26. Selecione o formulário dentro de MainContainer1 e ajuste a propriedade OnSuccess para Navigate('Success Screen')

  27. No painel de Exibição em árvore, selecione Success Screen.

  28. Selecione o ícone Check (iconCheck1) e atualize a propriedade OnSelect para:

    Back()

  29. Coloque o aplicativo no modo de visualização. Ajuste a tela para o iPhone 12 selecionando o menu suspenso Telefone. Você notou como sua tela mudou os controles? Experimente alguns tablets e telefones diferentes mudando de orientação para ver como a tela muda.

Nosso aplicativo simples e dinâmico agora pode ser usado em qualquer plataforma. Muito bem!