Adicionar uma tela com rolagem no PowerAppsAdd a scrolling screen in PowerApps

Crie uma tela que os usuários podem rolar para mostrar itens diferentes.Create a screen that users can scroll to show different items. Por exemplo, você talvez queira criar um aplicativo que exibe dados em um gráfico de colunas e um gráfico de linhas.For example, you might want to create an app that displays data in a column chart and line chart. Adicionando uma tela de rolagem, você pode adicionar vários controles, os quais os usuários podem exibir se eles rolarem a tela.By adding a scrolling screen, you can add multiple controls, which users can display if they scroll.

Quando você adiciona vários controles em uma seção, os controles mantêm suas posições relativas dentro dessa seção, independentemente se ele é um aplicativo de telefone ou um aplicativo de tablet.When you add multiple controls in a section, the controls maintain their relative positions within that section, regardless if it's a phone app or a tablet app. Observe que o tamanho da tela e a orientação podem determinar como as seções são organizadas.Note that the screen size and orientation may determine how the sections are arranged.

 

Pré-requisitosPrerequisites

Criar uma tela com rolagemCreate a scrolling screen

  1. Na guia Página Inicial, clique ou toque em Nova tela:On the Home tab, click or tap New screen:

    Opção de adicionar uma tela em um aplicativo

  2. Na guia Página Inicial, clique ou toque em Layoutse, em seguida, clique ou toque na opção de adicionar uma tela de rolagem infinita:On the Home tab, click or tap Layouts, and then click or tap the option to add an infinite scrolling canvas:

    Opção de adicionar uma tela de rolagem infinita

    A tela é adicionada:The canvas is added:

    Uma tela com uma tela de rolagem infinita, conforme a exibição padrão

Adicionar elementosAdd elements

Agora, vamos adicionar alguns controles à tela para ver como funciona a tela de rolagem.Now, let's add some controls to the canvas to see how the scrolling screen works.

  1. Na tela que você adicionou, clique ou toque em Adicionar um item da guia Inserir.In the canvas you added, click or tap Add an item from the Insert tab.

  2. Na guia Inserir, clique ou toque em Gráficos e, em seguida, clique em Gráfico de colunas.On the Insert tab, click or tap Charts, and then click or tap Column Chart.

    A opção de adicionar um gráfico de colunas

    Um gráfico de colunas é exibido no primeiro cartão na tela:A column chart appears in the first card on the screen:

    Gráfico de colunas padrão

  3. Na guia Inserir, clique ou toque em Texto, e, em seguida, clique ou toque em Entrada à caneta:On the Insert tab, click or tap Text, and then click or tap Pen input:

    Opção para adicionar um controle de caneta

  4. Mova o controle de caneta abaixo do gráfico e redimensione o controle de caneta para cobrir a parte inferior do cartão:Move the pen control below the chart, and resize the pen control to cover the bottom of the card:

    Mover e redimensionar o controle de caneta

Adicionar uma seçãoAdd a section

Agora, vamos adicionar outra carta com outro controle.Now, let's add another card with another control.

  1. Na parte inferior da tela, clique ou toque em Adicionar seção:Near the bottom of the screen, click or tap Add section:

    Opção para adicionar uma seção

    Um novo cartão é adicionado à tela:A new card is added to the screen:

    Um novo cartão abaixo da seção padrão

  2. Com o cartão ainda selecionado, vá até a guia Inserir, clique ou toque em Gráficose, em seguida, clique ou toque Gráfico de linhas.With the card still selected, go to the Insert tab, click or tap Charts, and then click or tap Line chart.

    O novo gráfico é grande demais para aparecer na tela com os outros controles:The new chart is too big to appear on the screen with the other controls:

    Um gráfico de linhas adicionado ao final do novo cartão

  3. Abra o modo de Visualização pressionando F5 (clicando ou tocando no ícone de reprodução no canto superior direito).Open Preview mode by pressing F5 (or by clicking or tapping the play icon near the upper-right corner).

    Abrir modo de visualização

  4. Role para baixo para exibir o novo gráfico de linhas.Scroll down to display the new line chart.

    A visualização mostra o gráfico de linhas