Explorar controles e telas em aplicativos de tela
Nesta unidade, vamos examinar os controles que já adicionamos no aplicativo, tanto na Galeria quanto no Formulário, e também vamos adicionar algumas telas no aplicativo a fim de nos prepararmos para a próxima unidade.
Controles no Power Apps
Um controle é um elemento de interface do usuário que produz uma ação ou mostra informações. Muitos controles no Power Apps são como controles usados em outros aplicativos: rótulos, caixas de entrada de texto, listas suspensas, elementos de navegação e assim por diante.
Além desses controles comuns, o Power Apps oferece controles mais especializados, disponíveis no botão + Inserir, que inclui um campo de pesquisa para ajudar você a encontrar o que procura.
Alguns controles que podem adicionar interesse e impacto a seus aplicativos incluem:
Galerias: controles que são contêineres de layout e contêm um conjunto de controles que mostram os registros de uma fonte de dados.
Formulários: controles que mostram detalhes sobre os seus dados e permitem a criação e a edição de registros.
Mídia: controles que permitem que você adicione imagens da tela de fundo e incluem um botão de câmera (para que os usuários possam tirar fotos pelo aplicativo), um leitor de código de barras para a captura rápida de informações de identificação e muito mais.
Gráficos: controles que permitem adicionar gráficos, incluindo dados do Power BI, para que os usuários possam realizar análises instantâneas dos dados.
Para ver quais controles estão disponíveis, selecione a guia + Inserir e expanda os vários campos. Conforme faz isso, você vê o utilitário do campo de pesquisa que o ajuda a encontrar rapidamente o que procura. Tente inserir alguns valores no campo de pesquisa para ver o comportamento.
Controles e propriedades da galeria
Na galeria na tela, você deverá ver diferentes controles. O tipo de controle tem um ícone à esquerda do nome para indicar o tipo. Observe como há dois controles de forma, um retângulo e um separador. Selecione o controle retângulo na Exibição em árvore. Você verá que o padrão é a propriedade OnSelect, que indica "Select(Parent)". A menos que você designe uma propriedade OnSelect diferente para qualquer um desses controles de galeria, todos eles terão como padrão Select(Parent), o que significa que a seleção desse controle seleciona a própria Galeria.
Agora, selecione o controle Galeria (não um rótulo ou forma nele; talvez seja necessário encontrá-lo na Exibição em árvore) e observe a propriedade OnSelect. No momento, está definido como falso, o que significa que a seleção de qualquer controle em sua galeria não fará nada até que você defina uma ação.
Selecione novamente o controle Retângulo da galeria na Exibição em árvore. Agora vá para a propriedade Visible selecionando o valor suspenso à esquerda do campo de entrada da fórmula (fx). Observe que todas as propriedades disponíveis para o controle estão em uma lista rolável, para que você possa localizar/selecionar a propriedade Visible. A propriedade Visible está presente em todos os controles. Observe que esse controle tem ThisItem.IsSelected no campo de fórmula.
IsSelected é um valor booliano, avaliado como "true" ou "false", para saber se esse item na Galeria está selecionado ou não. Apenas um item na Galeria pode ser selecionado por vez; portanto, esse valor só pode ser "true" para um item. Se você colocar o aplicativo no modo de Visualização. Tente selecionar algumas cafeteiras diferentes e observe como o controle Retângulo só é exibido para aquela que você selecionou. O retângulo visível também corresponde ao item exibido no formulário ao lado da galeria.
Outros controles notáveis são o Separador, que também é um retângulo, mas está sempre visível (no momento tem a cor branca, por isso, não é exibido em nossa tela branca) e um ícone intitulado "NextArrow1", que, no momento, não faz nada além de selecionar o pai da galeria e um controle Imagem. Digamos que queremos mudar NextArrow1 para um lápis de edição, para dar ao usuário uma indicação de que ele deve pressionar esse controle para editar a máquina de café. Lembra-se de que a barra de cabeçalho reflete algumas propriedades alteráveis para o controle selecionado? Selecione o botão suspenso Ícone no cabeçalho e você verá o ícone Editar lápis exibido em Ações. Selecione-o para alterar a seta para a direita para um ícone Editar.
Vamos discutir brevemente o controle de imagem. Como definimos um campo de imagem nos dados, o Power Apps conseguiu discernir o que é inserido nesse campo dos dados. Se você tivesse outra imagem para exibir aqui, poderia colocá-la na propriedade Image deste controle. Por exemplo, se tivesse um item sem uma imagem no campo de imagem, você poderia usar uma fórmula para verificar se o campo de imagem estava em branco e, em caso afirmativo, exibir uma imagem diferente. O campo de imagem simplesmente deseja uma imagem.
Como já abordamos os rótulos, vamos passar para os controles do formulário.
Controles e propriedades de formulário
Vamos abordar rapidamente as duas propriedades mais importantes do formulário. DataSource é a tabela de dados conectada ao formulário. Isso é importante para que, quando o formulário for atualizado, ele saiba onde gravar os dados. A segunda propriedade importante é Item. O item, para o aplicativo, é o item selecionado em nossa galeria.
No formulário, quando você seleciona um Campo, esse campo é mostrado como um DataCard na Exibição em árvore. Observe como cada DataCard contém quatro controles diferentes. Os dois controles mais importantes no DataCard são o controle de rótulo, que incluirá inicialmente o nome DataCardKey, e o controle de entrada de texto, que incluirá inicialmente o nome DataCardValue. Os outros dois controles são opcionais e dependem de os dados serem necessários ou não. StarVisible é um rótulo de texto com um asterisco que é exibido se você designa esse campo como obrigatório (no formulário ou nos dados). ErrorMessage é outro rótulo de texto que é exibido se você tenta enviar um formulário e essa entrada está ausente. Você pode observar as propriedades Visible desses controles. Visible é avaliado como: "true" ou "false". A função And() que você verá no controle StarVisible significa que ambas as condições, separadas por vírgula, devem ser verdadeiras para que a função seja avaliada como "true".
Muitas das propriedades nos controles de formulário não podem ser alteradas, a menos que você "desbloqueie" o cartão, e há um bom motivo para isso. Embora o objetivo de um controle de formulário seja facilitar a entrada de dados, ele é muito menos flexível para fins de design. Se adicionarmos ou removermos campos do formulário existente, os controles serão redimensionados automaticamente e perderemos as edições feitas (lembre-se da entrada de texto do Product Summary). Posteriormente, aprenderemos mais sobre como personalizar a entrada de dados, mas vamos evitar a personalização de cartões de formulário por enquanto.
Para os dados do formulário Máquinas de Café, o único controle de entrada não textual está em ImageDataCard. Observe como esse cartão tem um controle adicional junto com os quatro que vimos anteriormente, o controle Adicionar imagem. O controle Adicionar imagem é um controle de mídia que permite selecionar uma imagem do dispositivo (ou um local online) para substituir a imagem existente. Ao "Tocar ou selecionar para adicionar uma imagem", você verá uma janela pop-up Abrir que permite selecionar um arquivo de imagem e Abrir essa imagem no formulário.
Duas propriedades importantes que você deve conhecer para cada cartão de dados são Default e Update. A propriedade Default informa qual coluna dos dados fornece o default-value para o cartão. A propriedade Update informa de qual controle de entrada vêm os dados que o Power Apps usa para atualizar os dados desse registro.
Selecione o cartão Product Summary, apenas o cartão, e não o campo de entrada de texto no cartão. Observe que o valor Default do cartão é ThisItem.'Product Summary', que é o valor que você vê no campo de entrada de texto DataCardValue. Mude para a propriedade Update do cartão e observe que esse cartão recebe as informações de atualização de DataCardValue.Text do cartão. Assim, quando enviamos o formulário, o Power Apps obtém tudo o que está escrito nesse campo de entrada de texto e atualiza o ‘Product Summary’ para esse item.
É possível desbloquear e adicionar outros controles em um cartão e alterar a propriedade de atualização do cartão, desde que o controle que você está adicionando forneça o tipo de dados que sua fonte de dados espera.
Por fim, devemos fornecer ao Power Apps um comando SubmitForm para que ele salve todas as alterações inseridas no formulário. Nesse caso, há o botão “Salvar alterações” abaixo do formulário, que se adequa a esse propósito. Se você selecionar o botão (enquanto estiver no modo de edição), observe que a propriedade OnSelect é SubmitForm(Form1), que obtém cada cartão de formulário atualizado e os grava de volta na fonte de dados.
Adição de telas
Até agora, o aplicativo tinha apenas uma tela. Nas próximas duas unidades, adicionaremos mais algumas funcionalidades à medida que continuamos a personalizar o aplicativo. Siga este procedimento para adicionar telas ao aplicativo:
Selecione Screen1 no painel Exibição em árvore, selecione o botão Nova tela na barra de comandos ou na parte superior do painel Exibição em árvore e selecione o modelo de tela Em branco.
Repita para adicionar uma terceira tela.
Vamos renomear as três telas. Para isso, clique duas vezes em Screen1 no painel de Exibição em árvore e renomeie-a como "Catalog Screen".
Repita o processo para renomear Screen2 como “Home Screen” e Screen3 como “Admin Screen”.
Por fim, vamos reposicionar as telas na Exibição em árvore. Você pode fazer isso selecionando o botão de reticências e, em seguida, o comando Mover para cima.
Agora que entendemos melhor os controles de galeria e formulário e sabemos como adicionar telas ao aplicativo, vamos continuar modificando o aplicativo para aprimorar a experiência do usuário.