Adicione uma variedade de elementos de interface do usuário ao seu aplicativo e configure aspectos da aparência e comportamento diretamente, da barra de ferramentas ou na barra de fórmulas. Esses elementos de interface do usuário são chamados de controles e os aspectos que você configura são chamados de propriedades.

Pré-requisitos

  1. Inscreva-se no PowerApps, instale-o, abra-o e entre, fornecendo as mesmas credenciais que usou para se inscrever.

  2. No PowerApps Studio, clique ou toque em Novo no menu Arquivo (perto da borda esquerda).

    Opção Novo no menu Arquivo

  3. No bloco Aplicativo em branco, clique ou toque em Layout de telefone.

    Criar um aplicativo do zero

  4. Se você for convidado a fazer o tour de introdução, clique ou toque em Avançar para se familiarizar com as principais áreas da interface PowerApps (ou clique ou toque em Ignorar).

    Tela de abertura do tour de introdução

    Você pode sempre fazer o tour mais tarde clicando ou tocando no ícone do ponto de interrogação no canto superior direito, em seguida, clicando ou tocando em Fazer o tour de introdução.

Adicionar um controle

Você pode adicionar qualquer controle em uma variedade de categorias clicando ou tocando na guia inserir da barra de ferramentas, clicando ou tocando em uma categoria e, em seguida, clicando ou tocando no controle que desejar. Nesta seção, examine os controles em cada categoria para se familiarizar com os tipos de controles que podem ser adicionados e onde é possível encontrar cada tipo.

Se precisar de mais espaço para controles, adicione uma tela.

Configure um controle diretamente

Neste procedimento, você adicionará e configurará um controle Rótulo, mas poderá aplicar muitos dos mesmos princípios a outros controles.

  1. Na barra de ferramentas, clique ou toque na guia Inserir e, em seguida, clique ou toque em Rótulo.

    Guia Inserir

    Quando você adiciona um controle, ele é selecionado por padrão. Você também pode selecionar um controle existente clicando ou tocando nele. Quando um controle é selecionado, uma caixa de seleção aparece ao seu redor e outras áreas da interface do usuário são alteradas de forma que você possa configurar o controle selecionado. Por exemplo, um controle Rótulo selecionado é semelhante a este elemento gráfico.

    Um rótulo selecionado

    Importante: se um controle for selecionado quando você selecionar outro controle ou uma área em branco da tela, o primeiro elemento não será mais selecionado.

  2. Torne o controle Rótulo mais estreito arrastando um manipulador na borda direita da caixa de seleção para a esquerda. (O manipulador intermediário aparecerá somente se você ampliar.)

    Um rótulo redimensionado

    Também é possível redimensionar um controle modificando suas propriedades Height, Width, ou ambas, como este tópico descreve posteriormente.

  3. Mova o controle Rótulo arrastando a própria caixa de seleção (ou modificando as propriedades X, Y ou ambas, como este tópico descreve posteriormente).

  4. Clique três vezes no texto exibido no controle Rótulo e, em seguida, digite Olá, mundo.

    Um rótulo com texto personalizado

    Também é possível modificar esse texto definindo a propriedade Texto desse controle, como este tópico descreve posteriormente.

  5. Exclua o controle Rótulo clicando ou tocando nele e, depois, pressione Excluir.

  6. Restaure o controle Rótulo pressionando Ctrl-Z (ou repetindo as quatro primeiras etapas deste procedimento).

Configure um controle da barra de ferramentas

Ao configurar um controle da barra de ferramentas, é possível especificar uma variedade maior de opções que você poderia diretamente.

  1. Com o controle Rótulo selecionado, clique ou toque na guia Início da barra de ferramentas.

    Guia Início

  2. Clique ou toque em Preenchimento e clique ou toque em uma cor como azul marinho.

    Opção de preenchimento

    O controle Rótulo reflete a seleção.

    Um rótulo com preenchimento água-marinha

  3. Altere a família de fontes e o tamanho do texto (por exemplo, para Georgia, tamanho 18).

    Controles Font

    O controle Rótulo reflete a seleção.

    Georgia, tamanho 18

  4. Clique ou toque na guia Rótulo, clique ou toque em VerticalAlign e, em seguida, clique ou toque em Superior.

    Guia Caixa de texto

    O controle Rótulo reflete a seleção.

    Um rótulo com texto alinhado na parte superior da caixa

Configure um controle na barra de fórmulas

Usando a barra de fórmulas, é possível definir propriedades que não podem ser definidas diretamente ou da barra de ferramentas. Por exemplo, você pode definir uma dica de ferramenta que aparece quando um usuário aponta para o controle, mas não clicar nem tocar nela. Também é possível especificar fórmulas complicadas que aumentam o alcance do seu aplicativo.

Cada alteração feita anteriormente neste tópico atualizou o valor de uma propriedade para o controle que você configurou.

  • Quando você redimensionou o controle, a propriedade Width foi alterada.
  • Quando você moveu o controle, as propriedades X e Y foram alteradas.
  • Quando você alterou o texto que o controle exibe, as propriedades Texto foram alteradas.

Em vez de configurar um controle diretamente ou na barra de ferramentas, você também pode atualizar o valor de uma propriedade selecionando-a na lista de propriedades e, em seguida, especificando um valor na barra de fórmulas. Com essa abordagem, você pode procurar por uma propriedade em ordem alfabética e especificar mais tipos de valores.

  1. Com o controle Rótulo selecionado, clique ou toque em Texto na lista de propriedades e, em seguida, digite “Nome de Minha Empresa” (incluindo as aspas) na barra de fórmulas.

    Uma cadeia de caracteres literal em um rótulo

    Ao colocar uma cadeia de caracteres de texto entre aspas, você especifica que ela deve ser tratada exatamente como você digitou. Como alternativa, é possível definir o valor de uma propriedade como uma fórmula.

  2. Com o controle Rótulo selecionado, clique ou toque em Texto na lista de propriedades e, em seguida, digite Today() (sem aspas) na barra de fórmulas.

    O controle mostra a data atual.

    Função Today

    Dica: você pode formatar datas e horas de várias maneiras, além de realizar cálculos nelas.

Configurar dois controles para interagir entre si

Neste procedimento, você adicionará uma caixa de seleção e, em seguida, configurará o rótulo que você já tem para ser exibido somente quando a caixa de seleção for marcada.

  1. Clique ou toque na guia Inserir.

    Guia Inserir

  2. Clique ou toque em Controles e, em seguida, clique ou toque em Caixa de seleção.

    Inserir caixa de seleção

  3. Mova o controle Caixa de seleção de forma que ele seja exibido abaixo do controle Rótulo e defina a propriedade Text do controle Caixa de seleção para que a opção Mostrar texto seja exibida.

    Configurar caixa de seleção

  4. Com o controle Check box ainda selecionado, clique ou toque na guia Início.

    Renomear caixa de seleção

  5. Clique ou toque no nome atual do controle Check box (à direita da Nova tela) e, em seguida, digite MyCheckbox.

    Renomear caixa de seleção

  6. Clique ou toque no controle Rótulo para selecioná-lo, clique ou toque na guia Rótulo e, em seguida, clique ou toque na opção Visível.

    Propriedade Visível

  7. Na barra de fórmulas, exclua true e, em seguida, digite ou cole esta fórmula:

    If(MyCheckbox!Value = true, true, false)

    Essa função If indica que o rótulo deve ser exibido apenas quando a caixa de seleção é marcada. Como a caixa de seleção está desmarcada, o controle Rótulo desaparece (exceto a caixa de seleção).

    Fórmula Visível

  8. Clique ou toque no controle Check box para adicionar a caixa de seleção a ele e, em seguida, clique ou toque novamente para adicionar uma marca de seleção.

    O Rótulo é exibido novamente:

    O rótulo é exibido quando a caixa de seleção é marcada

  9. Desmarque o controle Caixa de seleção para ocultar o controle Rótulo.

    O rótulo desaparece quando a caixa de seleção é desmarcada

Este exemplo é básico, mas você pode configurar o comportamento e a aparência do seu aplicativo, criando uma ou mais fórmulas de simples a complexa.

Renomear uma tela ou um controle

Ao renomear uma tela ou controle, você pode criar fórmulas que são mais fáceis de ler e manter.

  1. Clique ou toque na tela ou no controle que deseja renomear.

  2. Na guia Início, clique ou toque no nome do controle (à direita de Nova tela) e, em seguida, digite o nome que desejar.

    Renomear uma caixa de seleção