Containers in their current form were introduced in PowerApps when I was no longer actively working on the Platform as I took a break in 2022. Containers have been around since way before, but they were only available as scrollable screen with limited types and features. Later when they were introduced in their current format they expanded the capabilities to another level solving various problems such as responsiveness, vertical and horizontal scrolls (beyond the one provided by galleries)
Now as I have been working on PowerApps again for the last couple of months the age old requirements of scrollable galleries, horizontal scroll along with vertical scroll has come into picture. And the solution is containers. But how?? Let us explore
I have been exposed to some weird stuff in containers before- I don’t do much development but over last year or so I was still getting a flavor of capabilities from far off. But for this current client- since he is quite supportive, I tried going above and beyond solving the usability concerns
Initial Solution
At first, the problem was solved by moving the controls inside the gallery by manipulating X of controls beyond the first 3 (frozen) columns with the help of a slider. The slider gave a value input between 0 and 1000, and based on the value we kept decreasing the X of the labels and they kept moving left to leave room for the other columns coming from the right. Pretty neat, but sluggish; doesn’t move using trackpad gestures or is at any point smooth to say the least. But it’s functional none the less and we have other parts of the application to complete.
Feedback
As soon as the users begin using the tool, they start complaining about the functionality. Understandably so, and now they have my undivided attention- as most of the other activities are completed and there are no other problems being reported. So I start brainstorming to different solutions. I came up with quite a couple of approaches to reach solution options evolving over 3 days to reach number 3 as explained below:
- Solution 1
- The first instinct was reduce the number of columns being shown- the users do not need to see all the columns all the time; so I created some logical groupings and put them up in a radio button list, and the users can choose to see all columns, column set 1 or column set 2 and so on
- The users had to move a lot of the scroll bar (it was given across the entire screen) even when they had just a few extra columns. So the second instinct was to decrease the scroller size based on number of columns, even further more when combined with the limited columns being shown above
- Solution 2
- I was not on board with the slider still since I love to use gestures (been using them since 2006! while most of them were not even introduced and HP had some high level ones) so I kept trying with the containers, understanding them more and more conceptually as I went along
- Now this solution used ton of containers but bottom line, the hierarchy is shown below:
- 0-Container- this is the outer container
- 1-Horizontal Container- this container has vertical scroll enabled
- 2-Container- this is an extended height container
- 3-Horizontal Container- this is again an extended height container, with horizontal scroll enabled
- 4-Container- this is an extended width container
- 1-Horizontal Container- this container has vertical scroll enabled
- 0-Container- this is the outer container
- 2 has the gallery with frozen columns, 4 has the gallery with moving columns. Each of the galleries has a header row above the gallery within the same container so it moves vertically (an issue) and horizontally (not an issue) with the respective galleries
- This solution solved the gesture problem but had 2 other problems: One you could not see the horizontal scroll so it is not intuitive to the user to scroll towards the right and two the header rows vanish when you scroll down
- Solution 3
- At this point the client has gone ahead with Solution 1 but it is weekend and I have some time so I open up a new application to tinker around with and end up solving problem two from above Solution 2
- What remains to be done is the horizontal scroll, which I kind of made a flail version of using slider control to mimic the horizontal slider to give the feel. I did not however enable the drag of the horizontal slider (left it as ‘displaymode.view’) as I did not want to worry too much about it, but I do have idea on how that can be solved too
Reach out to me at admin@viralvector-us.com mentioning PowerApps Support if you would like me to provide some consulting on achieving the above functionalities and more in Power Platform!