PAWIT.PW

My dedicated space, focusing on Power Apps and other Power Platform stuff 😉

Why you should ALWAYS use ‘Container’ in Canvas App

Introduction

Hello everyone, Today I will talk about Power Apps, There is a powerful control that is not very well known, “Container

Well, Some experienced Power Apps develop will know that container is a control that will be used when the app is need to be responsive, That’s right!

BUT I will explain why everyone who develop Canvas App should use container in all of their app, even it’s not responsive.

I will not go in detail, Just explain why container is super powerful control

What is Container

  • Width / Height
  • Position / Placing Order
  • Gap between each control

There are 3 types of container

  • Container (I will called this normal container)
    • This is like… a box, You can just place other control in container. You can still freely arrange control inside.
  • Vertical Container
    • Same as normal container but it will not allow overlapping of control inside it. Each control will arrange in vertical style
  • Horizon Container
    • Same as Vertical Container but in horizontal style

All of these function allow you to easily manage & arrange your app. Especially when you need to re-arrange the design Let’s see how!

Demonstration

Here are sample of basic Canvas App screen, This screen is just a screen to display list of data using gallery with some button and filter

Bring “New Button” to the first and shift TextInput, DatePicker to the left

Without container

You will need to drag button to the left and then drag other control to the left, ONE-BY-ONE this will be a hard work if you have many control.

With container

Just 3 click, Regardless of how many control in same row!!

Resize column width in Gallery

Without container

You will need to resize or move other text label for other column to fill the existing space. Imagine if your gallery have 10 column, This is crazy

With container

Each control are automatically resize themselves to fill existing space, Amazing!!

My boss want to push navigation bar to the bottom.

Without container

This is CRAZY, Imagine to do this on screen that contains 30+ controls. You can wasting an hour doing this.

With container

They shift up automatically. It’s a magic XD

Human isn’t perfect, Everyone can make mistake.

This is common problem for Canvas App designer. Some time it very hard to arrange to screen to a pixel-perfect position.

Without container

With container

Since size & margin / padding is controlled by container, This mean your app will be always pixel-perfect!

Conclusion

Using container will make your Canvas App look professional and also easy to arrange and less effort to maintain.

Download

I know that understanding container isn’t easy and I not cover the detailed tutorial about how to use container here.

However, You can download the simple app I use to demonstrate above to play learning & play with container!

,

Leave a Reply

Your email address will not be published. Required fields are marked *