Advanced PowerApps Controls and Galleries: Nested Patterns and Responsive Design

// Each item is a tag button
Button_Tag.Width: Self.Width // Auto-sized to content
Button_Tag.Height: 40
Button_Tag.Text: ThisItem.Value
Button_Tag.AutoWidth: true

Result:
[Azure] [PowerApps] [Dataverse]
[Power Automate] [SharePoint]

Diagram: See the official Microsoft documentation for architecture details.

Responsive Design

Container Controls

Horizontal container (row layout):

Diagram: See the official Microsoft documentation for architecture details.

Container_Sidebar.Visible: !varIsMobile

Label_Title.Size:

If(varIsMobile, 18, varIsTablet, 22, 28)

Container_Header.LayoutDirection:

If(varIsMobile, Layout.Vertical, Layout.Horizontal)

**Breakpoint-based styling:**

```powerapps
// Responsive padding
Container_Main.PaddingLeft: 
```text
If(App.Width < 768, 10, App.Width < 1024, 20, 40)

// Responsive font sizes
Label_Heading.Size:

Switch(
    true,
    App.Width < 600, 16,
    App.Width < 900, 20,
    App.Width < 1200, 24,
    28  // Default for >1200px
)

// Responsive gallery template size
Gallery_Items.TemplateSize:

If(App.Width < 768, 80, 120)

### Orientation Changes

**Detect and respond:**

```powerapps
// App.OnStart
Set(varOrientation, If(App.Width > App.Height, "Landscape", "Portrait"));

// Screen.OnVisible
If(
```text
(App.Width > App.Height && varOrientation = "Portrait") ||
(App.Width < App.Height && varOrientation = "Landscape"),
Set(varOrientation, If(App.Width > App.Height, "Landscape", "Portrait"));
// Refresh gallery layouts
Reset(Gallery_Products)```
)

// Layout adjustments
Gallery_Products.Layout: 
```text
If(varOrientation = "Landscape", 
    Layout.Horizontal, 
    Layout.Vertical
)

## Custom Components

### Reusable Card Component

![Custom Components](/images/articles/powerapps/2025-12-08-powerapps-advanced-controls-galleries-nested-responsive-design-sec2-form.jpg)


**Component: ProductCard**

**Input properties:**

```powerapps
ProductID (Number)
ProductName (Text)
ProductPrice (Number)
ProductImage (Text)
ProductRating (Number)

Output properties:

OnCardClick (Action)
SelectedProduct (Record)

Component implementation:

Architecture Overview: Inside ProductCard component

Using the component:

// In gallery
Gallery_Products.Items: Products



// ProductCard instance inside gallery template
ProductCard_1.ProductID: ThisItem.ID
ProductCard_1.ProductName: ThisItem.Name
ProductCard_1.ProductPrice: ThisItem.Price
ProductCard_1.ProductImage: ThisItem.ImageURL
ProductCard_1.ProductRating: ThisItem.Rating

ProductCard_1.OnCardClick: 
```text
Patch(
    ShoppingCart,
    Defaults(ShoppingCart),
    {
        ProductID: ProductCard_1.SelectedProduct.ID,
        Quantity: 1,
        User: User().Email
    }
);
Notify("Added to cart", NotificationType.Success)

### Form Component

**Component: DynamicForm**

**Input properties:**

```powerapps
FormSchema (Table) - Column definitions
FormData (Record) - Initial values
FormMode (Text) - "New", "Edit", "View"

Output properties:

FormValues (Record) - Current form data
IsValid (Boolean) - All validations passed
OnSubmit (Action)

Component logic:

// Generate fields dynamically from schema
Gallery_FormFields.Items: FormSchema

// Each field renders based on type
If(
```text
ThisItem.Type = "Text",
TextInput_Field,
ThisItem.Type = "Number",
TextInput_Number,
ThisItem.Type = "Date",
DatePicker_Field,
ThisItem.Type = "Choice",
Dropdown_Field,
Label_Unknown```
)

// Collect form values
Button_Submit.OnSelect:
```text
Set(
    locFormValues,
    ForAll(
        Gallery_FormFields.AllItems,
        {
            Field: ThisRecord.FieldName,
            Value: Switch(
                ThisRecord.Type,
                "Text", TextInput_Field.Text,
                "Number", Value(TextInput_Number.Text),
                "Date", DatePicker_Field.SelectedDate,
                "Choice", Dropdown_Field.Selected.Value
            )
        }
    )
);
DynamicForm.OnSubmit

**Usage:**

```powerapps
// Define schema
ClearCollect(
```text
colCaseSchema,
{FieldName: "Title", Label: "Case Title", Type: "Text", Required: true},
{FieldName: "Priority", Label: "Priority", Type: "Choice", Required: true, Choices: ["High", "Normal", "Low"]},
{FieldName: "Description", Label: "Description", Type: "Text", Required: false},
{FieldName: "DueDate", Label: "Due Date", Type: "Date", Required: false}```
)

// Use component
DynamicForm_1.FormSchema: colCaseSchema
DynamicForm_1.FormMode: "New"
DynamicForm_1.OnSubmit: 
```text
Patch(
    Cases,
    Defaults(Cases),
    DynamicForm_1.FormValues
);
Navigate(Screen_Success)

Diagram: See the official Microsoft documentation for architecture details.

// Each stat card takes equal width

Diagram: See the official Microsoft documentation for architecture details.

Progress Indicator

Diagram: See the official Microsoft documentation for architecture details.

Accessibility

Focus Order

// Set TabIndex for logical navigation
TextInput_Name.TabIndex: 1
TextInput_Email.TabIndex: 2
Dropdown_Department.TabIndex: 3
Button_Submit.TabIndex: 4
Button_Cancel.TabIndex: 5

Screen Reader Labels

Gallery_Products.AccessibleLabel: "Product list, " & CountRows(Products) & " items"

Icon_Edit.AccessibleLabel: "Edit product " & Gallery_Products.Selected.Name

Button_Submit.AccessibleLabel: "Submit form, creates new case"

Keyboard Navigation

// Handle Enter key in text input
TextInput_Search.OnChange:
```text
If(
    IsMatch(TextInput_Search.Text, "\n$"),  // Enter key pressed
    Select(Button_Search)  // Trigger search
)

// Escape key closes modal
Screen_Modal.OnVisible:

Set(varModalOpen, true)

If(varModalOpen && /* Escape key detection logic */,

Set(varModalOpen, false);
Back()```
)

Best Practices

1. Nested Galleries: Limit to 2 levels, use lazy loading
2. Flexible Height: Enable AutoHeight sparingly (performance cost)
3. Responsive Design: Define breakpoints (mobile <768, tablet <1024, desktop ≥1024)
4. Components: Create for repeated patterns (cards, forms, buttons)
5. Modern Controls: Use for new apps (better performance)
6. Accessibility: Always set TabIndex and AccessibleLabel

Troubleshooting

Nested gallery not displaying:

• Check inner gallery Items formula references outer gallery correctly (Gallery_Outer.Selected.ID)
• Verify inner gallery Height is sufficient (should be dynamic based on item count)
• Ensure inner gallery TemplatePadding doesn't hide content

Flexible height gallery jumps/flickers:

• Reduce AutoHeight labels (CPU intensive)
• Use fixed heights where possible
• Implement virtualization (only render visible items)

Responsive layout breaks on device:

• Test App.Width values on actual devices (not just browser resize)
• Use Container controls instead of absolute positioning
• Check for hardcoded widths/heights

Architecture Decision and Tradeoffs

When designing low-code development solutions with Power Apps, consider these key architectural trade-offs:

Recommendation: Start with the managed approach for most workloads and move to custom only when specific requirements demand it.

Validation and Versioning

• Last validated: April 2026
• Validate examples against your tenant, region, and SKU constraints before production rollout.
• Keep module, CLI, and SDK versions pinned in automation pipelines and review quarterly.

Security and Governance Considerations

• Apply least-privilege access using RBAC roles and just-in-time elevation for admin tasks.
• Store secrets in managed secret stores and avoid embedding credentials in scripts or source files.
• Enable audit logging, data protection policies, and periodic access reviews for regulated workloads.

Cost and Performance Notes

• Define budgets and alerts, then monitor usage and cost trends continuously after go-live.
• Baseline performance with synthetic and real-user checks before and after major changes.
• Scale resources with measured thresholds and revisit sizing after usage pattern changes.

Official Microsoft References

• https://learn.microsoft.com/power-apps/
• https://learn.microsoft.com/power-platform/admin/
• https://learn.microsoft.com/power-platform/guidance/

Public Examples from Official Sources

• These examples are sourced from official public Microsoft documentation and sample repositories.
• Documentation examples: https://learn.microsoft.com/power-apps/
• Sample repositories: https://github.com/microsoft/PowerApps-Samples
• Prefer adapting these examples to your tenant, subscriptions, and governance requirements before production use.

Key Takeaways

• Nested galleries enable master-detail views but require performance optimization
• Flexible height galleries with AutoHeight adapt to dynamic content
• Responsive design uses App.Width/App.Height with breakpoint formulas
• Custom components encapsulate reusable UI patterns
• Modern controls provide better performance and built-in responsiveness
• Accessibility requires TabIndex, AccessibleLabel, and keyboard support

Next Steps

• Explore Power Apps Component Framework (PCF) for code components
• Implement infinite scroll for large datasets
• Add swipe gestures for mobile interactions
• Build dashboard templates with modern controls

Additional Resources

• Gallery Control Reference
• Responsive Design
• Component Library

Design once, adapt everywhere.