Add a scrolling screen to a canvas app

In a canvas app, create a screen that users can scroll to show different items. For example, create a phone app that shows data in several charts, which users can display if they scroll.

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. Screen size and orientation may also affect how the sections are arranged.

Prerequisites

  1. Create a blank canvas app.
  2. Learn how to add and configure controls.

Create a scrolling screen

  1. Select New screen below the top menu.

  2. Select Scrollable.

    Select new screen and then choose scrollable screen type.

    A new scrollable screen is added to the app.

    A screenshot that shows the scrollable screen added to the app.

Add controls

Scrollable screen includes a fluid grid with one data card by default. Data cards help separate building blocks on the screen. To make screen scrollable with multiple controls, add more data cards. And then, add controls in data cards as required.

To add data cards, you can select Add section at the bottom of the scrollable screen.

Add section button highlighted on the scrollable screen on the canvas.

We'll start by adding controls on the data card available with the scrollable screen by default, and then add a new section that adds another data card. Once a new data card is available, we'll then add another control inside the new data card.

Together, both data cards and the controls within the data cards would extend the default length of the screen, requiring the use of the scrolling ability of the screen.

Tip

To learn more about data cards, see Understand data cards.

  1. Select + (Insert) from the left-pane.

    Alt text that describes the content of the image.

  2. Expand Charts, and then select Column chart.

  3. Resize the chart added on the screen to consume about two-thirds of the screen.

  4. Reduce the size of the data card to the size of the added chart.

    Resize the data card on the screen to consume two-thirds of the screen.

  5. Select Add section on the screen to add another section.

    A new data card added to the screen.

  6. Select Insert > Charts > Line chart.

  7. Scroll down on the screen using the scroll bar on the right-side of the screen, and then select Add section to add a third data card.

  8. Select Insert > Input > Pen input.

  9. Resize the pen input control by increasing the width inside the data card.

    Pen input control resized to use more width on the screen.

  10. Press F5 on the keyboard to preview the app. Scroll down using the scroll bar to lower part of the screen.

    Preview scrollable screen.

Now that you've demonstrated how to use scrollable screen, customize the app further as per your business requirements.

Scrolling screen for forms

Since Power Apps uses data cards to create sections, Display form and Edit form controls can't be inserted on them. Nesting of such a combination of controls together may degrade the performance of the app. Hence, when using form controls, use layout containers such as a vertical container control.

Tip

To learn about working with forms, see Understand canvas app forms.

There are multiple different methods to configure scrolling with forms:

Use Vertical Overflow property

Use of the Vertical Overflow property is a basic method of using a scrolling screen that has a form.

  1. Ensure you're using a blank screen, and not a scrollable screen.

  2. Select Insert > Layout, and then select Vertical container.

  3. From the right-side of the screen in the properties pane, select Vertical Overflow property drop-down, and choose Scroll.

    Vertical overflow property of the container set to Scroll.

  4. Add the edit or display form with the required fields. When the list of fields exceeds the size of the container inside the screen, you'll be able to scroll inside the container using the scroll bar.

    Scrollable vertical container using the Vertical Overflow property set to scroll having a display form.

Use containers within Vertical container

For complex apps, you may consider adding containers within a vertical container control. And then, adjust the height of the form and the inner container as shown below.

  1. Ensure you're using a blank screen, and not a scrollable screen.

  2. Select Insert > Layout, and then select Vertical container.

  3. From the right-side of the screen in the properties pane, select Vertical Overflow property drop-down, and choose Scroll.

  4. Select Insert > Layout, and then select Container.

  5. From the right-side of the screen in the properties pane, turn Flexible height property to Off.

    Flexible height property turned off for the container.

  6. Add the edit or display form with the required fields.

  7. To enable scrolling within the screen for the form, update the height of the container added in step 4, and the form.

    Scrollable form that uses container and form height for scroll capability.

For more information about working with responsiveness of an app, see Building responsive canvas apps and Responsive layouts

See also