If you're building Power Apps and feeling a bit overwhelmed by containers, don't worry, you're not alone. Many developers find containers to be a bit tricky at first, but once you understand the basics and the purpose behind them, it can make a huge difference in creating an organized and efficient design experience.
Honestly, when I first began making canvas Power Apps, I fought against using containers because I felt restricted. I found myself frustrated by the clipping that occurred when my objects were too large or placed beyond the edges of the container. My workaround was to place all objects at the top level directly on the screen and to reference other objects in each X and Y property.
I was winning my battle to outsmart them until I had to reassign coordinates to each object after deleting a single text label. Containers could be avoided, but at what cost? I surrendered and devoted time to understanding my enemy and its strengths; once I realized the utility of containers, I was able to save myself time and headache while designing.
Containers define sections of the screen to facilitate a more organized design experience. They can be used to prevent overlapping elements, to create depth, to quickly align/justify content, and to create responsive designs.
Containers organize and declutter the Tree View sidebar into collapsible sections of objects, and when given a background color, they can even be used to create depth and to hide or display different content.
My initial frustration with these tools mostly came from not understanding a lot of the properties of directional containers. So, I created some visuals to help me to grasp the concepts. Now I can share them with you! 😀
Alright, properties all making sense now? Let’s get into some other handy features of containers.
To see what it’s like to modernize your entire organization, download our free guide.
Get the Free GuideTwo things to know about Parent References:
For example, to center an object horizontally within a container, the object’s X property would be set to
( Parent.Width – Self.Width ) / 2
Directional containers cannot have objects that overlap. A method to get around this we’ve used is to place a default (non-directional) container within the directional container and place overlapping objects within the default container. Not the most elegant solution, but it works.
For example, placing a symbol in front of a circle is not possible within a directional container, but if nested within a default container, the two objects can overlap.
Outside of us saying “containers should be used ALL the time” 😉, they can be especially useful for a few situations:
So many uses for Containers! I hope these gave you a few ideas for how to use them in your apps.
When I started working with Power Apps, I misunderstood the intent and purpose of containers, and I fought against them and what I thought were constraints. I just had to take some time to understand how the properties of containers work and how objects within them interact to realize they were actually a big help.
I had given up on my battle, but by joining forces, I was able to win the war. Now, the only apps I create that DON’T use Containers are little test apps that I use like scrap paper.