Containers in Power Apps.

We have all tried to build responsive apps, failed and then stuck to the same default layout.

Microsoft now has introduced containers in Power Apps. With containers MS has also introduced few new control properties. These properties are dependent on the direction property. So what does that mean. It means now you can develop apps by inserting controls inside these containers and you don't have to worry about responsiveness. Consider these containers as responsive wrapper around your App.

Before this i use to leverage power apps forms control to achieve this, setting the height and with to App.Height and App.Width.

So lets set first the app settings set. First of all we need to turn off the below features.



Now if you come inside the app you, lets  add a container to your screen. The most basic one is the one in which you add a screen and then add container as an input control.




Immediately you will see we have a whole list of new Properties to play with.





Property like Direction has two values Horizontal and Vertical. Now the below properties have a cascading effect as to what value you set for this Property. 

Like if we insert 3 icons inside the container and set the direction property as horizontal, Justify propery as left and Align to Start as in the above diagram. We have the below result. i have set the flexible width property of the middle icon, and that is the reason you see it covering most part of the screen.


now if we just change the Direction property to Vertical.


Also, if you turn back the direction to Horizontal and reduce the size of the window you will see the yellow icon with flexible width reduces the width as per the app width.

Another important property is Wrap. This is disabled by default, but if you set it on and add new icons on the container you will see the wrapping effect on the controls. And when you reduce the size of the windows the controls automatically move to the next row.



There are also Screen container options to use in PowerApps. And by default all these screens are responsive. So if you add in controls with relative values.Creating Responsive Apps becomes easy.

 





I am sure, all this is just a beginning in the right direction and MS will soon add in more properties and features to leverage. Also with the introduction of Power FX the future looks very responsive.

As we already have a list of known issues. :)

https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/build-responsive-apps



Comments

Post a Comment

Popular posts from this blog

Creating Nested Galleries in Power Apps. (Parent-Child Relationship)

Image
 This is another most common scenario where in client has two parent child lists or any two lists having a common SharePoint column. And clients wishes to have a relationship on the PowerApps screen where in when he/she selects a particular lets say Program in our example. All the respective Projects following that Projects are shown. In such a scenario we can leverage nested galleries. So what we do in here is we add two galleries on our Power App screen. For Programs gallery the Left one on the screenshot above, we connect it to the Programs list For Second gallery we will connect it to the Projects list. But this is where the magic happens. Here we use Filter () function. So what we do in here is we set the Program's column value in Project's list equal to the Selected Program of left Gallery. i.e. the gallery connected to my Program's list. A more complex version of the same is where you inset the nested gallery inside your parent gallery. In this too everything remains
Read more

How to reset a datepicker control in PowerApps?

Image
 Scenario: Simple reset a date picker control. Issue, you can't use normal Reset() function to reset the datepicker control. Solution: Simple create a variable Set(varResetCD, True) and use this variable to update the reset property of DatePicker control. The below Reset() won't work in case of datepicker control We need to create a variable and use it at the Reset property of the datepicker control. Also, if you still see some text inside your date field there are two other places you need to check in one is the datepicker control advanced properties. In the above screenshot all you need to do is clear InputTextPlaceholder. And then select the control and check the DefaultDate property of the date.  This should be set to Today(), you can also change it to something like below If(varResetCD,Blank(),Today()) What this does is sets the control to blank if the variable you have declared above is true. 
Read more

Reset () function failing to work on Edit form for Combo boxes in Power App.

Image
 Hi Good day, Today we have a very interesting scenario. We have a cascading dropdowns on our Power App screen. The flow for these dropdowns is that a user selects the Division, and a list of Business units containing the selected Division is popped down in your Business Unit dropdown. Now to make it user friendly, we have on change code written on each dropdown. So that if the user decides to change the Division dropdown, the Business Unit dropdown is reset. Please remember in here we are talking in regarding to New Form. On Resetting the above Division combo box, since we have written the Reset function code on Change property of the Division Combo box.   Reset(ddBU);Reset(ddBPI);Reset(ddTeams). The above becomes Up till here everything is hunky dory. This is the classic case of how the Reset() function should behave. But that's not, when you move from new form to Edit form.   The Reset function behaves weirdly. It is able to reset the cascading dropdown values like above. But i
Read more