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

Access Denied Host Header Sharepoint 2010 Windows Server 2008 R2

By -
If you are running into a weird issue, where you get prompted for your credentials repeatedly in your local sharepoint server and was denied access to the site, even though you are using an administrator account, and if this happens only when you create a nice host header and on 80 port, then you are here at the right place - Just read the below. Method 1 works for me :  Click  Start , click  Run , type  regedit , and then click  OK . In Registry Editor, locate and then click the following registry key: HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Lsa\MSV1_0 Right-click  MSV1_0 , point to  New , and then click  Multi-String Value . Type  BackConnectionHostNames , and then press ENTER. Right-click  BackConnectionHostNames , and then click  Modify . In the  Value data  box, type the host name or the host names for the sites that are on the local computer, and then click  OK . Quit Registry Editor, and then restart the IISAdmin service. Reference :  http://support.microso
Read more