PowerApps Canvas app: part I - creating a reusable menu component

PowerApps Canvas app: part I - creating a reusable menu component

Reinder Wit

Reinder Wit

So you’ve created a canvas app, with all sorts of screens and functionalities and some nice navigation on all those screens but as the app grows, you’re wondering how you’ll be able to maintain the navigation items on each screen. You’re surely not supposed to change the navigation on each of those screens everytime a new screen is added?

Nope, you’re not. With canvas components, you can easily create reusable elements for your canvas app, making it easy to maintain a navigation structure that is identical on all screens.
You’ve probably already seen the ‘Components’ tab, as it’s right next to the ‘Screens’ tab. Let’s look at how you can create a component that displays the navigation menu and that is reusable on all screens.

Let’s say we have an app with 4 screens (dashboard, search, edit & settings).
I’ve already created a reusable header component and each screen has a single label on it:

base app

Now before we can start to create and display the menu component, we need a datasource for the menu (as we will be displaying the menu using a Gallery).
While you’re still on the screens tab, click the app element in the tree view. In the OnStart event for the app (dropdown above the tree view), declare a MenuItems collection like so

menu items datasource

Here’s the JSON that I used:

ClearCollect(
    MenuItems,
    {
        Name: "Dashboard",
        Icon: Icon.Devices,
        Screen: Dashboard
    },
    {
        Name: "Search",
        Icon: Icon.Search,
        Screen: Search
    },
    {
        Name: "Edit",
        Icon: Icon.Edit,
        Screen: Edit
    },
    {
        Name: "Settings",
        Icon: Icon.Settings,
        Screen: Settings
    }
)

Within the app element in the tree view, click the ellipsis (…) and choose Run Onstart. The code within the onstart event will now get executed and our collection variable will be created.

Next, click on the Components tab, next to the Screens tab.
Click on the ‘+ New component’ button below the search box underneath the tab label to create a new component; double click on the new component to give it a meaningfull name, I used ‘ComponentMenu’.
The menu needs to have a certain size so for now, let’s just settle for a 200px width and a 640px height. I’ve also changed the background of our new component into a dark blue-ish color (#303145).
Your component should now resemble something like this:

create component

Now it’s time to insert our gallery. In the top navigation, go to Insert and from the Gallery dropdown, select the vertical layout. The gallery will get inserted; make sure it is the same size as our component (200 x 640). As a datasource, choose the MenuItems collection we created earlier:

new gallery

In the properties pane for the gallery, on the right side, set the template size to 45 and choose Title in the layout dropdown; the title elements will now show some icon string like ‘builtinicon’ but we can fix that off course.
Expand the Gallery item in the tree view on the left of the canvas and select the title element; give it these properties:

  • Text: ThisItem․Name
  • Font size: 14
  • Color: some light gray color
  • Font weight: normal
  • X: 40
  • Width: Parent.TemplateWidth - Self.X - 20

Next, select the arrow icon in the gallery and give it these properties:

  • Color: some light gray color
  • Top/Left: 0
  • Width: Parent.TemplateWidth
  • Height: Parent.TemplateHeight
  • Padding: Left 170, Right 10, Top/Bottom 0

By making the icon as big as the menu item and set the left padding, it basically covers the entire item and generates a pointer icon when hovering with the mouse, sweet…

Give the separator element the same color as the text and icon.
Now we’re going to add the menu icon: select one of the elements inside the gallery and from the ‘Insert > Icons’ top menu, click the first icon in the list (‘Add’). Give the new icon these properties:

  • Icon: ThisItem.Icon
  • Width/Height: 18
  • X: 10
  • Y: (Parent.TemplateHeight / 2) - (Self.Height / 2)
  • Color: a light color, the same as the text and arrow icon

Here’s what the component should now look like:

final menu

To have an indication for which screen you’re on, we are going to add 1 more item to the gallery.
From the ‘Insert > Icons’ dropdown in the top menu, select the Rectangle. Make sure the icon is added to the gallery element itself and move the rectangle to the bottom of the gallery items (using the ellipsis, choose ‘Reorder > Sent to back’).

With the rectangle selected, set these properties in the properties pane:

  • Width: Parent.TemplateWidth
  • Height: Parent.TemplateHeight
  • X/Y: 0
  • Visible: ThisItem.Screen = App.ActiveScreen
  • Color: light gray

Now that we are showing a light gray background for the active menu items, we need to also adjust the colors of the icons and the text inside an active menu item. Do this by using this If() statement for the color of those items:

If(
    ThisItem.Screen = App.ActiveScreen,
    RGBA(48, 49, 69, 1),
    RGBA(222, 222, 222, 1)
)

And finally, with the Gallery component selected, open the ‘Advanced’ tab in the properties pane and set the Navigate action for the OnSelect event to Navigate(ThisItem.Screen)

Our component is now ready!
Head back over to the ‘screens’ tab and insert the component on each of your screens using the ‘Insert > Custom’ menu option and you’re good to go:

insert component

Reinder Wit
Reinder Wit

Senior .NET developer