How can we help you today?

How to Set PowerApps Orientation and Custom Sizes

After reading this article, you will learn how to choose the appropriate orientation or custom size for your embedded PowerApps application.


TABLE OF CONTENTS


Prerequisites

  • You have the latest version of ShortPoint SPFx installed on your SharePoint environment.
  • You are a ShortPoint Designer with an active license.
  • You have added the PowerApps ShortPoint Element on your Page. Please follow this article to find out how to add your first PowerApps application to SharePoint.

Setting PowerApps Orientation and Custom Sizes

Step 1: Detect the Orientation of Your PowerApps Application

Sign in to the PowerApps Portal and select the application you want to embed into the SharePoint page using ShortPoint. Click Edit from the dropdown action menu of your application:


Open app in PowerApps


Go to the settings page of your application and view the Orientation and Size:



Step 2: Select the Display Option in Your PowerApps Design Element

Switch to Grid Mode, open the Power Apps Design Element settings, and set it to the appropriate orientation. 


PowerApps are designed to work best with fixed sizes. For page layout purposes, apps with a portrait orientation usually fit well in one-third of the three-column layout. Apps with a landscape orientation, usually fit well in wide-column layouts like one-column, 2/3, or 3/4.


The Room Booking PowerApps example from this tutorial has a landscape orientation


Select orientation


Step 3: Select a Custom Size to Align the Embedded App with the Content from Your Page


In case the default Display Options (Portrait or Landscape) do not align your content as you wish, you should use a custom size to embed your app.  For instance, if you want to align the height of your app with the content of a sibling element, detect the required height and calculate the corresponding width for your PowerApps Element. 


Make sure you respect the aspect ratio, otherwise, you will see a gray background area around your app:

  • Portrait (9:16) - e.g. for a height of 410px, the corresponding width would be: (410*9 )/16 = 230.62px
  • Landscape (16:9) - e.g. for a height of  410px, the corresponding width would be (410*16)/9 = 728.99px


Open the developer tools (F12) and select the sibling element. Go to the Computed tab, from the top-right side of your developer tools window and identify the height of the element:


check height of sibling element


Go back to Grid Mode and edit your PowerApps Design Element. Select Custom Size, from the Design tab and insert the height and the calculated width. Click Update. Now the embedded PowerApps application will be aligned with the sibling element.


Custom size


Note: If you need to embed the application with a specific width, you can calculate the height in the same manner:

  • Portrait (9:16) : Height = (Width*16)/9
  • Landscape (16:9) : Height = (Width*9)/16


Remember to Save your changes and Publish/Republish your page when you are done.


That's it! You are now able to set the orientation and enter a custom size for your PowerApps Design Element.


Related articles:



Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 12 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more