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.


Prerequisites

  1. You have already added the PowerApps ShortPoint Element on your Page. Please follow this article to find out how to add your first PowerApps application to SharePoint.




STEP 1: Detect the Orientation of Your PowerApps Application

Sign-in to 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:



Go to the setting page of your application and click Screen size + orientation:




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

First, make sure you add your PowerApps element into the appropriate column size. PowerApps are designed to work best with fixed sizes. For page layout purposes, apps that use a portrait orientation usually fit well in one-third of the three-column layout. Apps that use a landscape orientation usually fit well in wide column layouts like one-column, 2/3 or 3/4.


The Invoices PowerApps example from this tutorial has a landscape 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) does 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:



Edit the ShortPoint Web Part and configure your PowerApps element. Select Custom Size, from the Settings tab and insert the height and the calculated width. Click Update and Save Web Part. Now the embedded PowerApps application will be aligned with the sibling element.




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



That's it!


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