PowerApps Reusable Component for left or top navigation

Introduction

We often come across to have reusable stuff in PowerApps. One such building block is component which could be reused. We can make a component and re-use it on several screens as well as in other apps entirely.

In this post, we will see how to create a reusable component which could be used as left or top navigation.

Scenario

We shall see to create component which could be created once but used on several screens. It makes the app user friendly plus adds standard to the app.

Objective

Creating a component menu.

Step 1. Create a new component

Launch Power Apps Studio, then start from scratch to develop a new canvas app. Next, create a new component named cmp_LeftNav from the Components menu by clicking on New component. Use the RGBA value as shown in screenshot to set the component's Fill attribute to a dark blue color.

Step 2. Create a new custom input property

Next, create a new custom input property named Items with the data type Table.

Step 3. Create dummy values to design the menu with Table property

Items attribute of Items custom property will have information in table data type format regarding icons and text to appear for navigation and which screen the navigation must navigate to. We need to write the dummy values in the Items attribute of Items property as shown below.

Step 4. Create 4 additional new custom input properties to display menu colors

1. Color
2. CurrentIndicator Color
3. HoverFill
4. SelectedFill
5. Default

I am showing how to create Color custom input property. Similarly, we need to create all the rest 3.

We can create the custom property in any particular order.

Enter color attribute of each color property. For Color custom property it is shown in screenshot. For rest of the three enter the color values similarly.

You might see the few controls added in screenshot here, kindly ignore them as the screenshot was taken later. Below screenshot shows to set Default attribute of Default property.

Step 5. Build Navigation menu using icons and text

Icons and text explaining each menu item will be displayed in a gallery on the side navigation menu. Add a vertical gallery onto the component. I did not add the blank vertical gallery.

Step 6. Set all attributes of Gallery

Height: Parent.Height

Width: 100

ShowScrollbar: false

TemplatePadding: 0

TemplateSize: Parent.Height/9

Step 7. Add a new icon in the Gallery

Now add a new icon into the gallery.After adding this icon I have deleted the existing icons and controls which was pre existing in the gallery.

After adding the icon into the gallery, add the following properties and values or add these values as per UI design.

Color: Color.AntiqueWhite //cmp_LeftNav.Color

Icon: ThisItem.Icon

Height: 35

Width: 35

X: (Parent.TemplateWidth-Self.Width)/2

Y: 15

Step 8. Add a new label under the icon with below properties

Text: ThisItem.Value

Align: Center

Size: 10

Width: Parent.TemplateWidth

X: 0

Y: 50

Color: RGBA(255, 255, 255, 1)

Component looks like a menu now with white icon and black text.

Step 9. Build Current screen selector

A small vertical rectangle that shows the current screen will appear next to a menu item when it is selected.

Custom property Default will be used to achieve this functionality. Default custom property will store the name of the current screen.

Repeat to verify the name of the 1st menu option in the Default property so there is a value to build the component with.

Step 10. Insert a label in the gallery with blank text

Just like above let us fill some more properties to make the visualization better.

Fill: cmp_LeftNav.CurrentIndicatorColor

Height:  Parent.TemplateHeight-30 // This value set as per your UI design

Visible: ThisItem.Value=cmp_LeftNav.Default

Width: 5

X=0 // This value set as per your UI design

Y=15 // This value set as per your UI design

Step 11. Design HoverFill

When the menu is hovered, the particular selection should be highlighted.

Add a label without any text again and set these properties to reflect the design.

Height: Parent.TemplateHeight-20 // This value set as per your //UI design

Width: Parent.TemplateWidth-20

Fill:  If(ThisItem.Value=cmp_LeftNav.Default, cmp_LeftNav.SelectedFill, Color.Transparent)

HoverFill: cmp_LeftNav.HoverFill

PressedFill: cmp_LeftNav.SelectedFill

X=0

Y=20

Onselect property

Step 12. Set height and width of gallery

Height: 700 Width: 80

Step 13. Use the component in the app

Ensure we have all the pages created in our app so that navigation could be tested properly.

 

Navigation option will be linked to corresponding screens through the code in PowerApps app.

Step 14. App OnStart Code

Since the menu options are not intended to be modified while the application is running, they will be kept as a table within a variable rather than a collection. Add this code to the app's OnStart property. Next, launch App OnStart.

Step 15. Add component onto both of the screens

Add the component to ScrnAllItems and ScrnAllItems_1 and use the variable name (varLeftNavigation) on Items property varLeftNavigation is set on OnStart property of app.

The navigation component gets added like this and we need to fix the height and width as per our requirement.

From

After adjusting the height and width

Step 16. Set Items and Default property of left navigation component

 

We can set default property to text that we want to appear as Label on Left menu. In above screenshot we can see that none of the icons are appearing. Once we click on Run OnStart

Step 17. Add component in all the screens

Similarly, we need to add the component for left navigation needs to be added in all the screens so that we can go and come back. Align UI design as per design. Now, we click on these menu, it takes us to that particular screen.

Conclusion

In the above article, we saw how to create reusable component and how to add them to use it.