Exercício: criar a navegação de tela básica para um aplicativo de tela
Nesta unidade, continuaremos a trabalhar no aplicativo Máquinas de Café Contoso; portanto, verifique se abriu o aplicativo que continuamos a criar neste módulo de aprendizagem.
Adicionaremos a navegação na tela do aplicativo para que o usuário possa passar para as diferentes telas do aplicativo. Quando você cria um aplicativo, a tela na parte superior da exibição em árvore é aquela em que o aplicativo vai parar, a menos que você defina deliberadamente uma tela diferente na fórmula StartScreen do aplicativo. Em nosso caso, a primeira tela que alguém verá quando compartilharmos um aplicativo será a ‘Home Screen’.
Siga as etapas abaixo para adicionar a navegação ao aplicativo:
Vá para a 'Home Screen' do aplicativo e Insira dois controles de botão.
Posicione ambos no centro da tela, um acima do outro, com espaço entre eles, para que o usuário não possa tocar acidentalmente em um enquanto tenta tocar no outro.
Segurando a tecla Shift, selecione ambos os controles. Alguns controles têm propriedades idênticas que são fáceis de alinhar com ambos selecionados. Mantenha ambos os controles selecionados nas próximas duas etapas.
Selecione o controle suspenso Alinhar na barra de comandos e selecione "Alinhar à esquerda". Se você não vir o controle suspenso Alinhar na barra de comandos, clique com o botão direito do mouse (com ambos os controles selecionados) e você verá um menu suspenso da opção Alinhar em um pop-up.
Observação
O recurso Alinhar é uma maneira poderosa de alinhar rapidamente vários controles ao mesmo tempo. Outro recurso poderoso a ser observado é Desfazer, que também está na barra de comandos, à direita do botão Voltar.
Agora, observe o painel Propriedades à direita e encontre as propriedades Largura e Altura. Esses são campos de entrada numéricos. Insira 250 para Width e 100 para Height.
Altere a propriedade Text do botão na parte superior para "Exibir Catálogo" e a propriedade Text do botão inferior para "Admin Screen".
A seguir, adicionaremos as primeiras funções que permitirão a navegação na tela. A função Navigate tem um parâmetro obrigatório, a tela para a qual o aplicativo vai navegar. Ao adicionar uma função Navigate, você insere o nome da tela entre aspas simples; lembre-se de que o Power Apps solicitará que você o digite na barra de fórmulas. Selecione o botão "Exibir Catálogo" e adicione o seguinte à propriedade OnSelect:
Navigate('Catalog Screen')Da mesma forma, selecione o botão com o nome "Admin Screen" e insira o seguinte na propriedade OnSelect:
Navigate('Admin Screen')Dar ao o usuário a capacidade de navegar da tela inicial vai mantê-lo na tela de destino, a menos que forneçamos uma maneira de retornar à tela inicial. Você já viu a função Navigate, que pode ser usada para levar o usuário de volta à tela inicial, mas o Power Apps tem uma maneira de voltar à tela anterior em que o usuário estava por meio da função Back. Vá para a Catalog Screen e adicione um controle Botão.
Arraste o novo Botão para o canto inferior direito da tela e atualize a propriedade Text para indicar “Voltar”.
Agora, atualize a propriedade OnSelect do novo botão para o seguinte:
Back()Essa fórmula retornará o usuário à tela anterior.
Vá para a Admin Screen e repita as duas etapas acima.
Agora, retorne à Home Screen e coloque o aplicativo no modo de visualização. Tente selecionar o botão "Exibir Catálogo" e usar o botão "Voltar" para retornar à página inicial. Tente o mesmo com os botões da Admin Screen.
Dica
O aplicativo só entenderá Voltar se você navegar primeiro para essa tela por meio do aplicativo. Se você começar a visualizar o aplicativo na Catalog Screen ou na Admin Screen, o Power Apps não terá contexto para qual tela navegar com a função Back. Portanto, ao visualizar o aplicativo, lembre-se de iniciar a visualização na Home Screen.
Parabéns! Agora você adicionou a navegação básica ao aplicativo. Se quiser saber mais sobre navegação em aplicativos, exploraremos isso no próximo módulo de aprendizagem. Após uma breve verificação de conhecimento, fique conosco para aprender mais algumas ações que você pode realizar para levar seu aplicativo ao próximo patamar.