Power Apps – Responsive Canvas Apps

By Vinod Thachin -

 Responsive design is a way of designing a webpage/app that allows to use flexible layouts and images, Styles. This allows to webpages detect the user screen size and orientation and change the display options accordingly.

Why Responsive design?

Technology changing rapidly these days. End user can access the site from any device (like Desktop, laptop, phone, tablets). If site is built to a specific target environment, site will be adjusted to the different devices. That will impact the end user accessibility to site. To make sure the great user experience to the end user, our site should be compatible to different devices.  If the user is intended to use the site in only in web browser, site/app should be flexible on different devices.

PowerApps are created to provide responsive for different devices and there is an app built for PowerApps for mobile devices. Downloading the PowerApps app and login to the app will pull all the app that are provided access to the user.

To build a responsive app, we need to consider following,

  •  Who are the different users going to use the app?
  •  How the app looks in different devices?
  •  Elements/components use in the app and can we make the elements to resize?
  •  How app should behave? (functionality of the app)

After gathering the requirements, we need to create the app layouts and designs.

We need to make sure following settings has been updated.

  • Open https://make.powerapps.com
  • Open the app and click on File -> Settings
  • In Settings Tab, select “Display” and Disable “Scale to fit, Lock aspect ratio and Lock orientation” to off as below.

Once updating the changes, select the layout of the app. There are different layouts are available in the screen section. Split Screen will have two sections occupying 50% on each section in desktop view. In Mobile view, it will display one under one occupying entire width. Sidebar layout has fixed width sidebar on the left. Body consists fixed height and main section takes all the width.

Using Containers

Containers are major elements to use in PowerApps responsive design. Containers can be Auto-layout containers in Vertical or horizontal directions. Horizontal Containers or Vertical Containers can be used to layouts the child controls. This container will to fix the position of the child components to set X and Y point for a control.

Here are the options to choose auto-layouts container,


The top container should be set to X =0 and Y =0 position.

To create two side layouts, add a Vertical container and add two Horizontal container side by side. Set X and Y properties as Flexible width.

There are some known issues with the containers.

  • Container Wrap property is enabled, child control Align property will not set.
  • If the container is too small, the Center and End options will not accessible.  
  • We are not allowed to resize/re-position the Canvas app as drag and drop controls are disabled.
  • Data table, Chart and adding picture will not be supported.





Comments

Post a Comment

Popular posts from this blog

Linksys Wireless Connection Failure

By -
I configured the Linksys wireless router [WRT54G] couple of years before and it just worked great. I myself configured the password and everything worked great at my home. Anyone comes in home takes my password and it just worked great most of the time. all these were with windows server 2003 and Dell machaines. When I bought a new Hp DV9000 (XP) I had an issue connecting to the home wireless. I started browsing and found this solution: Issue : Couldn't connect to the selected connection. 1. Installed an update http://www.microsoft.com/downloads/thankyou.aspx?familyId=17d997d2-5034-4bbb-b74d-ad8430a1f7c8&displayLang=en Issue after the update : Acquiring Network address status and stayed there. Did the following after that: 1. Browsed http://192.168.1.1/ 2. used the user-id / password of the connection (default userid is empty & pwd is admin) 3. Navigated to wireless (Basic wireless settings), click Reset security and name your userid for SSID 4. Clicked save settings 5. cli
Read more

The security validation for this page is invalid. Click Back in your Web

By -
If you are getting the following error, while renaming the page title using publishingpage object " The security validation for this page is invalid. Click Back in your Webbrowser, refresh the page, and try your operation again ." Code Snippet: PublishingWeb publishingweb = PublishingWeb.GetPublishingWeb(newUri(" http://YourPortal/Plans/ ")); PublishingPage pp =publishingweb.GetPublishingPages()["Pages/TestArticle.aspx"]; pp.Title = e.Node.Text; pp.Update(); You should check for this : Navigate thru the followwing and turn the security validation Off Central Administration--->application management---->web application settings-->"turn security validation off"
Read more

Power Apps toPower Automate Error - The input body for trigger 'manual' of type 'Request' did not match its schema definition , the input String does not validate against the date

By Vinod Thachin -
While working with power Apps to Power automate, passing the Date time values as Text(DateTimeValue) throws error as below. The input body for trigger 'manual' of type 'Request' did not match its schema definition. Error details: 'String '' does not validate against format 'date'.'. After checking the Microsoft documentation and few blogs i found out the date values should be passed as a formatted date time. TO pass the date time  we need to use following functions. Text(<<DateTimePicker>>.SelectedDate,"[$-en-US]yyyy-mm-dd") Even after passing the value i am still seeing the same issue and finally found out the default value ids sending as empty and formulae failing for empty values. So we need to make sure the Date Value should not go blank to the formulae and the value should be formatted using the formulae as above. Hope this helps.
Read more