Power Platform Responsive Layouts and Components

People open apps on phones, tablets, and wide monitors. A responsive layout adapts to each screen, and reusable components keep the design consistent.

The Problem With Fixed Sizes

A beginner often places controls at exact pixel positions. The app looks perfect on one screen and breaks on another. Responsive design replaces fixed positions with rules that follow the screen size.

Turn Off Scale to Fit

Open Settings, then Display, and switch off Scale to fit. Lock aspect ratio should stay off too. These switches stop the app from stretching and let formulas control the layout.

Container Controls

Containers arrange their children automatically. Two types do most of the work.

Horizontal Container

Children line up from left to right. Set the direction, spacing, and alignment in the properties pane.

Vertical Container

Children stack from top to bottom. A header, a body, and a footer sit neatly inside one vertical container.

+------------- Vertical Container (full screen) -------------+
|  Header  (fixed height 60)                                 |
+------------------------------------------------------------+
|  Horizontal Container (fills remaining height)             |
|  +----------------+  +----------------------------------+  |
|  | Menu           |  | Content                          |  |
|  | (width 200)    |  | (fills remaining width)          |  |
|  +----------------+  +----------------------------------+  |
+------------------------------------------------------------+
|  Footer  (fixed height 40)                                 |
+------------------------------------------------------------+

Each child can use a fixed size or a fill portion. A fill portion of 1 for the menu and 3 for the content gives a quarter and three quarters of the width on any screen.

Formula-Based Sizing

Outside containers, use the screen size in formulas.

Width  = Parent.Width - 40
Height = Parent.Height * 0.5
X      = (Parent.Width - Self.Width) / 2

App.Width and App.Height report the current window size and update when the user rotates a device.

Switching Layouts by Screen Size

Set a variable that tells the app which layout to use.

Set(gblIsPhone, App.Width < 600)

A gallery can then show one column on phones and three columns on wide screens through its TemplateSize and WrapCount properties.

Components

A component is a custom control you build once and reuse many times. A company header with a logo, a title, and a sign-out button makes a perfect first component.

Custom Properties

Input properties send values into a component, such as the title text. Output properties send values out, such as the selected menu item. Behavior properties let the component trigger actions in the host screen.

Component Libraries

A component library stores components in one place. Many apps import the library and receive updates when the owner publishes a new version.

  Component Library: "Brand Kit"
     |-- cmpHeader
     |-- cmpPrimaryButton
     |-- cmpConfirmDialog
        |            |            |
   Leave App     Sales App    Asset App

Layman Example: Modular Furniture

A responsive layout works like modular furniture. The same sofa pieces fit a small apartment or a large hall by rearranging. A component works like a standard drawer unit: build it once, place it in every room, and replace the handle in one factory instead of fifty homes.

Testing Different Screens

• Resize the browser window while playing the app.
• Switch the app orientation under Settings, then Display.
• Open the app on a real phone before sharing it widely.
• Check text length in other languages, since labels may grow.

Accessibility and Readability

Responsive design includes people with different needs. Choose text sizes of at least 14 points, keep strong contrast between text and background, and set the AccessibleLabel property on icons and images. Leave generous space around buttons so fingers on small screens tap the correct target. Test keyboard navigation with the Tab key to confirm every control receives focus in a logical order.

Key Takeaways

Containers, relative formulas, and components turn a rigid screen into a flexible product. Build structure first, add details second, and every device displays a clean app.