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
- Color
- CurrentIndicator Color
- HoverFill
- SelectedFill
- 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.
Join the conversation! Your thoughts help the community grow.