Adicionar e configurar um controle no PowerAppsAdd and configure a control in PowerApps

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, na guia Propriedades ou na barra de fórmulas.Add a variety of UI elements to your app, and configure aspects of their appearance and behavior directly, from the toolbar, in the Properties tab, or in the formula bar. Esses elementos de interface do usuário são chamados de controles e os aspectos que você configura são chamados de propriedades.These UI elements are called controls, and the aspects that you configure are called properties.

Pré-requisitosPrerequisites

  1. Inscreva-se no PowerApps, instale-o, abra-o e entre, fornecendo as mesmas credenciais que usou para se inscrever.Sign up for PowerApps, install it, open it, and then sign in by providing the same credentials that you used to sign up.
  2. No PowerApps Studio, clique ou toque em Novo no menu Arquivo (perto da borda esquerda).In PowerApps Studio, click or tap New on the File menu (near the left edge).

    Opção Novo no menu Arquivo

  3. No bloco Aplicativo em branco, clique ou toque em Layout do telefone.On the Blank app tile, click or tap Phone layout.

    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).If you're prompted to take the intro tour, click or tap Next to get familiar with key areas of the PowerApps interface (or click or tap Skip).

    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.You can always take the tour later by clicking or tapping the question-mark icon near the upper-right corner and then clicking or tapping Take the intro tour.

Adicionar um controleAdd a control

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.You can add any control in a variety of categories by clicking or tapping the Insert tab of the toolbar, clicking or tapping a category, and then clicking or tapping the control that you want. 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.In this section, review the controls in each category to get familiar with the types of controls that you can add and where you might find each type.

  • Na guia Inserir, clique ou toque em qualquer uma dessas categorias e, em seguida, clique ou toque no controle que deseja adicionar:On the Insert tab, click or tap any of these categories, and then click or tap the control that you want to add:

    Texto: rótulo, entrada de texto, texto de HTML de entrada de canetaText: Label, Text input, HTML Text, Pen input
    Controles: botão, lista suspensa, seletor de data, caixa de listagem, caixa de seleção, opção, ativar/desativar, controle deslizante, classificação, temporizadorControls: Button, Drop down, Date picker, List box, Check box, Radio, Toggle, Slider, Rating, Timer
    Galeria: vertical, horizontal, altura flexível, vertical em branco, horizontal em branco, altura flexível em brancoGallery: Vertical, Horizontal, Flexible height, Blank vertical, Blank horizontal, Blank flexible height
    Tabela de dadosData table
    Formulários: editar, exibir, formulário de entidadeForms: Edit, Display, Entity form
    Mídia: imagem, câmera, código de barras, vídeo, áudio, microfone, adicionar imagemMedia: Image, Camera, Barcode, Video, Audio, Microphone, Add picture
    Gráficos: gráfico de colunas, gráfico de linhas, gráfico de pizzaCharts: Column chart, Line chart, Pie chart
    ÍconesIcons

Dica: se você precisar de mais espaço para controles, adicione outra tela.Tip: If you need more space for controls, add another screen.

Configure um controle diretamenteConfigure a control directly

Neste procedimento, você adicionará e configurará um controle Rótulo, mas poderá aplicar muitos dos mesmos princípios a outros controles.In this procedure, you'll add and configure a Label control, but you can apply many of the same principles to other controls.

  1. Clique ou toque na guia Inserir e, em seguida, clique ou toque em Rótulo.Click or tap the Insert tab, and then click or tap Label.

    Guia Inserir

    Quando você adiciona um controle, ele é selecionado por padrão.When you add a control, it's selected by default. Você também pode selecionar um controle existente clicando ou tocando nele.You can also select an existing control by clicking or tapping it. 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.When a control is selected, a selection box surrounds it, and other areas of the UI change so that you can configure the selected control. Por exemplo, um controle Rótulo selecionado é semelhante a este elemento gráfico.For example, a selected Label control resembles this graphic.

    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.Important: If a control is selected when you select another control or a blank area of the screen, the first element is no longer selected.

  2. Torne o controle Rótulo mais estreito arrastando um manipulador na borda direita da caixa de seleção para a esquerda.Make the Label control narrower by dragging a handle on the right edge of the selection box to the left. (O manipulador intermediário aparecerá somente se você ampliar.)(The middle handle appears only if you zoom in.)

    Um rótulo redimensionado

    Também é possível redimensionar um controle modificando suas propriedades Height, Width, ou ambas, como este tópico descreve posteriormente.You can also resize a control by modifying its Height, Width, or both properties, as this topic describes later.

  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).Move the Label control by dragging the selection box itself (or by modifying the X, Y, or both properties, as this topic describes later).
  4. Clique três vezes no texto exibido no controle Rótulo e, em seguida, digite Olá, mundo.Triple-click the text that appears in the Label control, and then type Hello, world.

    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.You can also modify this text by setting the Text property of this control, as this topic describes later.

Configure um controle da barra de ferramentasConfigure a control from the toolbar

Ao configurar um controle da barra de ferramentas, é possível especificar uma variedade maior de opções do que ao configurar um controle diretamente.By configuring a control from the toolbar, you can specify a wider variety of options than you can by configuring a control directly.

  1. Com o controle Rótulo selecionado, clique ou toque na guia Início da barra de ferramentas.With the Label control selected, click or tap the Home tab of the toolbar.

    Guia Início

  2. Clique ou toque em Preenchimento e clique ou toque em uma cor como azul marinho.Click or tap Fill, and then click or tap a color such as aquamarine.

    Opção de preenchimento

    O controle Rótulo reflete a seleção.The Label control reflects your selection.

    Um rótulo com preenchimento água-marinha

  3. Altere a família de fontes e o tamanho do texto (por exemplo, paraChange the font family and the size of the text (for example, to 18 pt. Georgia, tamanho 18).Georgia).

    Controles Font

    O controle Rótulo reflete a seleção.The Label control reflects your selection.

    Georgia, tamanho 18

  4. Clique ou toque na guia Rótulo, clique ou toque em VerticalAlign e, em seguida, clique ou toque em Superior.Click or tap the Label tab, click or tap VerticalAlign, and then click or tap Top.

    Guia Caixa de texto

    O controle Rótulo reflete a seleção.The Label control reflects your selection.

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

Configurar um controle da guia PropriedadesConfigure a control from the Properties tab

Usando a guia Propriedades, você pode configurar um controle sem escrever uma fórmula.By using the Properties tab, you can configure a control without writing a formula. Neste procedimento, você adicionará e configurará outro controle Rótulo, mas poderá aplicar muitos dos mesmos princípios a outros controles.In this procedure, you'll add and configure another Label control, but you can apply many of the same principles to other controls.

  1. Adicione outro controle Rótulo, conforme descrito anteriormente neste tópico.Add another Label control as described earlier in this topic.
  2. Com o novo controle selecionado, clique ou toque na guia Propriedades do painel direito.With the new control selected, click or tap the Properties tab in the right-hand pane.

    Painel Propriedades

  3. Na caixa texto, digite guia Propriedades.In the Text box, type Properties tab.

    Texto do Rótulo do painel Propriedades

    O controle Rótulo mostra o texto digitado.The Label control shows the entered text.

    Texto da tela do painel Propriedades

  4. Clique ou toque no ícone Preenchimento do painel Propriedades e, em seguida, clique ou toque em uma cor.Click or tap the Fill icon in the Properties panel, and then click or tap a color.

    Texto da cor do painel Propriedades

    O controle Rótulo reflete a seleção.The Label control reflects your selection.

    Cor da tela do painel Propriedades

  5. Clique ou toque na propriedade Cor no painel Propriedades.Click or tap the Color property in the properties panel.

    Propriedade do painel Propriedades

    O valor da propriedade Cor está realçado na barra de fórmulas.The value of the Color property is highlighted in the formula bar.

    Expressão de propriedade do painel Propriedades

    1. Exclua o segundo controle Rótulo clicando ou tocando nele e, depois, pressione Excluir.Delete the second Label control by clicking or tapping it and then pressing Delete.

Configure um controle na barra de fórmulasConfigure a control in the formula bar

Usando a barra de fórmulas, é possível definir propriedades que não podem ser definidas diretamente, na guia Propriedades ou da barra de ferramentas.By using the formula bar, you can set properties that you can't set directly, in the Properties tab, or from the toolbar. 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.For example, you can set a tooltip that appears when a user points to the control but doesn't click or tap it. Também é possível especificar fórmulas complicadas que aumentam o alcance do seu aplicativo.You can also specify complicated formulas that increase the power of your app.

Cada alteração feita anteriormente neste tópico atualizou o valor de uma propriedade para o controle que você configurou.Each change that you made earlier in this topic updated the value of a property for the control that you configured.

  • Quando você redimensionou o controle, a propriedade Width foi alterada.When you resized the control, you changed its Width property.
  • Quando você moveu o controle, as propriedades X e Y foram alteradas.When you moved the control, you changed its X and Y properties.
  • Quando você alterou o texto que o controle exibe, as propriedades Texto foram alteradas.When you changed the text that the control displays, you changed its Text property.

Em vez de configurar um controle diretamente, na guia Propriedades 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.Instead of configuring a control directly, in the Properties tab, or from the toolbar, you can also update the value of a property by selecting it in the property list and then specifying a value in the formula bar. Com essa abordagem, você pode procurar por uma propriedade em ordem alfabética e especificar mais tipos de valores.By taking this approach, you can search for a property alphabetically, and you can specify more types of values.

  1. Com o controle Rótulo restante 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.With the remaining Label control selected, click or tap Text in the property list, and then type "My Company Name" (including the quotation marks) in the formula bar.

    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.When you surround a string of text with quotation marks, you specify that it should be treated exactly as you typed it. Como alternativa, é possível definir o valor de uma propriedade como uma fórmula.As an alternative, you can set the value of a property to a formula.

  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.With the Label control selected, click or tap Text in the property list, and then type Today() (without quotation marks) in the formula bar.

    O controle mostra a data atual.The control shows the current date.

    Função Today

    Dica: você pode formatar datas e horas de várias maneiras, além de realizar cálculos nelas.Tip: You can format dates and times in various ways, in addition to performing calculations on them.

Configurar dois controles para interagir entre siConfigure two controls to interact with each other

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.In this procedure, you'll add a check box and then configure the label that you already have to appear only when the check box is selected.

  1. Clique ou toque na guia Inserir.Click or tap the Insert tab.

    Guia Inserir

  2. Clique ou toque em Controles e, em seguida, clique ou toque em Caixa de seleção.Click or tap Controls, and then click or tap Check box.

    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.Move the Check box control so that it appears below the Label control, and set the Text property of the Check box control so that Show text appears.

    Configurar caixa de seleção

  4. Com o controle Caixa de seleção ainda selecionado, clique ou toque em seu nome imediatamente acima da guia Propriedades e, em seguida, digite MyCheckboxWith the Check box control still selected, click or tap its name just above the Properties tab, and then type MyCheckbox

    Renomear caixa de seleção

  5. Clique ou toque no controle Rótulo para selecioná-lo.Click or tap the Label control to select it.
  6. Na guia Propriedades, clique ou toque na propriedade Visível.On the Properties tab, click or tap the Visible property.

    Propriedade Visível

  7. Na barra de fórmulas, exclua true e, em seguida, digite ou cole esta fórmula:In the formula bar, delete true, and then type or paste this formula:

    If(MyCheckbox.Value = true, true, false)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.This If function states that the label should appear only when the check box is selected. Como a caixa de seleção está desmarcada, o controle Rótulo desaparece (exceto a caixa de seleção).Because the check box is cleared, the Label control disappears (except for the selection box).

    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.Click or tap the Check box control to add the selection box to it, and then click or tap it again to add a check mark.

    O Rótulo é exibido novamente:The Label reappears:

    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.Clear the Check box control to hide the Label control.

    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.This example is basic, but you can configure the behavior and appearance of your app by building one or more formulas from simple to complex.

Renomear uma tela ou um controleRename a screen or a control

Ao renomear uma tela ou controle, você pode criar fórmulas que são mais fáceis de ler e manter.By renaming a screen or control, you can build formulas that are easier to read and maintain.

  1. Clique ou toque na tela ou no controle que deseja renomear.Click or tap the screen or the control that you want to rename.
  2. No painel direito, clique ou toque no nome do controle (imediatamente acima da guia Propriedades) e, em seguida, digite o nome que você deseja.In the right-hand pane, click or tap the name of the control (just above the Properties tab), and then type the name that you want.

    Renomear caixa de seleção

Localizar e selecionar um controle ou uma telaFind and select a screen or a control

É possível localizar e selecionar uma tela ou controle, mesmo os que estão ocultos ou sobrepostos a outro controle, pesquisando-os no painel esquerdo.You can find and select a screen or a control, even if it's hidden or overlaps with another control, by searching for it in the left-hand pane. Este painel mostra uma miniatura de cada tela no aplicativo ou uma exibição hierárquica de cada tela e os controles que ele contém.This pane shows either a thumbnail of each screen in the app or a hierarchical view of each screen and the controls that it contains.

  • Para mudar entre miniaturas e a exibição hierárquica, toque ou clique em um ícone no canto superior direito do painel.To switch between the thumbnails and the hierarchical view, click or tap an icon in the upper-right corner of the pane.

    Alternar entre modos de exibição

  • Para localizar um controle, digite um ou mais caracteres para realçar os nomes de controle que contêm o texto que você digitou.To find a control, type one or more characters to highlight the control names that contain the text that you typed.

    Se você clicar ou tocar em um resultado de pesquisa, esse controle será selecionado no aplicativo.If you click or tap a search result, you select that control in the app.

    Pesquisar no modo de exibição de árvore

  • Para mover uma tela para cima ou para baixo, duplicá-la, excluí-la ou renomeá-la, clique com o botão direito do mouse nela (ou clique ou toque no botão de reticências próximo a ela) e, em seguida, clique ou toque na opção desejada.To move a screen up or down, duplicate it, delete it, or rename it, right-click it (or click or tap the ellipsis next to it), and then click or tap the option that you want.

    Menu de contexto do modo de exibição de árvore

  • Para copiar/colar um controle, duplicá-lo, excluí-lo ou renomeá-lo, clique com o botão direito do mouse nele (ou clique ou toque no botão de reticências próximo a ele) e, em seguida, clique ou toque na opção desejada.To copy/paste a control, delete it, or rename it, right-click it (or click or tap the ellipsis next to it), and then click or tap the option that you want.