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
• Setting PowerApps Orientation and Custom Sizes
  • Step 1: Detect the Orientation of Your PowerApps Application
  • Step 2: Select the Display Option in Your PowerApps Design Element
  • Step 3: Select a Custom Size to Align the Embedded App with the Content from Your Page

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:

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: 

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:

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.

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:

• Adding Your First PowerApps Application to SharePoint
• How to Pass Dynamic Parameters to PowerApps From ShortPoint
• How to Change PowerApps Loading Icon and Color
• Embed PowerApps on SharePoint On-Premises and SharePoint Online (cross-tenant)