Create Scrollable Screen in PowerApps

Introduction

A scrollable screen is one of the most lucrative features one can add to their project. It helps scroll the entire screen and avoid.

Scenario

In this, we shall see details of the request and then will provide people to go and comment. This makes a large screen that requires scrolling. If there are different controls or different sections that need their own scrolling. Multiple screens without any need become irritating, so this implementation will be useful. It will make one scroll per screen.

Objective

We will be creating a scrollable screen for different purposes. A large screen could also have one scroll bar instead of multiple.

Step 1. Create a new Scrollable screen

Step 2. Scrollable screen feature explained

The scrollable screen can be scrolled throughout. When a scrollable screen is created, a canvas and a data card are added by default.

Step 3. Set the height width of the pane as per the need

From the highlighted border we can pull the border and bring it to the yellow border. It is just to show the flexibility of the screen.

Step 4. Ensure to align the Add section after entering the controls

Sometimes Add section is not clickable. This unclickable problem happens if the Add section overlaps with other controls or datacard1 or the control added in datacard1. In my case, Form1 is not inside datacard1 in the treeview(navigation), but it is still associated with datacard1 in the form.

Step 5. How to add controls to the scrollable screen?

All the controls in the scrollable screen will be added within the data card always except the one control that is added through the pane (we can see from the above screen text is Add an item from the insert pane) And within the same canvas. The scrollable screen always scrolls one canvas so the entire screen becomes scrollable. All the controls will be added in the same canvas by using a pane or Add section.

This popup allows you to enter comments.

Add first control

Add the rest of the controls.

Step 6. Add the second or next control on the scrollable screen

In the below screen, we can not see Gallery 2 because it was cut.

After pasting we can see Gallery 2 in DataCard2. The screen will grow as Gallery2 grows and the entire screen will be scrollable.

Step 7. Make Gallery Height dynamic

If gallery height is not dynamic then on screen two scroll bars appear. To avoid this one scroll bar has to be hidden or made flexible. So, the ideal scenario is to make the gallery scroll bar disappear. We need to write the height formula to make the gallery scroll bar dynamic.

Conclusion

In the above article, we saw how to make a scrollable screen. How to add controls to the scrollable screen.

This is a very handy feature while using the app on phone. The entire screen could be scrolled just like any other app.