Skip to content
Sentia Tech Blog
Sentia Tech Blog

  • About
  • Cloud & Infrastructure
  • Software Engineering & Development
  • AI, Data & Machine Learning
  • Cybersecurity & Digital Trust
Sentia Tech Blog

PowerApps Canvas App Part I: Creating a Reusable Menu Component

Alex, 14 April 202514 April 2025

Building apps faster and smarter often starts with creating reusable components. One of the most effective ways to improve consistency and reduce maintenance in PowerApps Canvas Apps is by building a reusable menu component. Yes, you can create a single menu that updates everywhere by changing it once.

This article covers everything you need to create a flexible, reusable menu component step-by-step.


Why Build a Reusable Menu?

A reusable menu offers:

  • Consistency across screens
  • Reduced maintenance by updating once
  • Faster development by reusing ready-made controls
  • Cleaner app structure for easier future changes

Instead of copy-pasting menus on every screen, a single component saves time and prevents errors.


Setting Up the Menu Component

Follow these steps to create your reusable menu:

1. Create a New Component

  • Go to the Tree View panel.
  • Select Components and click + New component.
  • Name it cmp_Menu.

2. Add a Gallery for Menu Items

  • Insert a Vertical Gallery inside the component.
  • Set the Items property to a table of menu options:
Table(
    {Label: "Home", Icon: Icon.Home, Screen: 'HomeScreen'},
    {Label: "Profile", Icon: Icon.Contact, Screen: 'ProfileScreen'},
    {Label: "Settings", Icon: Icon.Settings, Screen: 'SettingsScreen'}
)
  • Remove the default image and text controls inside the gallery.
  • Insert an Icon and Label side by side inside the gallery template.

3. Customize the Appearance

  • Set the Icon to ThisItem.Icon.
  • Set the Label to ThisItem.Label.
  • Style the items with padding, hover effects, and selected states.

Example for hover fill:

If(ThisItem.IsSelected, Color.LightBlue, Color.White)

4. Add a Navigation Function

Inside the OnSelect property of the gallery:

Navigate(ThisItem.Screen, ScreenTransition.Fade)

This makes the menu interactive, navigating users to the correct screens.


Making the Menu Truly Reusable

A good component accepts flexible data. Update the component to accept an external data source:

  1. Create a new custom property:
    • Property Name: MenuItems
    • Property Type: Table
  2. Update the Items property of the gallery:
If(
    IsEmpty(MenuItems),
    Table(
        {Label: "Home", Icon: Icon.Home, Screen: 'HomeScreen'},
        {Label: "Profile", Icon: Icon.Contact, Screen: 'ProfileScreen'},
        {Label: "Settings", Icon: Icon.Settings, Screen: 'SettingsScreen'}
    ),
    MenuItems
)

This way, you can pass different menus to the component without editing it directly.


Best Practices for the Menu Component

  • Use theme colors to match your app’s design system.
  • Group icons and labels properly using flexible height and width.
  • Include accessibility support by using tooltips and meaningful labels.
  • Test screen navigation thoroughly across different screen sizes.

Wrapping Up

A reusable menu component keeps your Canvas App organized and easy to scale. Instead of rebuilding the same structure over and over, you create it once and reuse it intelligently. Building on this idea, the next step focuses on user dialogs. See PowerApps Canvas App Part II: Creating a Basic Dialog Window to continue building your app toolkit.

Software Engineering & Development

Post navigation

Previous post
Next post

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • CloudFront Functions vs. Lambda@Edge: What You Need to Know
  • Reducing Image File Size Using ImageProcessor in Episerver
  • Key Features of a Reliable CI/CD Pipeline Service
  • EC2 Image Builder vs. Packer: Which Tool Should You Use?
  • Building a Privacy-First Login System: OAuth, MFA & Beyond

Archives

  • May 2025
  • April 2025
  • March 2025

Categories

  • AI, Data & Machine Learning
  • Cloud & Infrastructure
  • Cybersecurity & Digital Trust
  • Software Engineering & Development
©2025 Sentia Tech Blog