PowerApps: Left Navigation Menu (Component)

 Hello Friends,

Welcome back with another post on PowerApps. Today, we will talk about Left Navigation Menu. First look at the below screenshot.

Here, the left navigation is shown in Collapse and Expand mode. We will try to create similar kind of navigation with only single level. There will be no nested menu. That we will discuss in another post. So, let's start-

1. The process we will follow is-
1. Create Left Navigation Menu as PowerApps Component using-
1. A Hamburger Icon For Expand/Collapse
2. A Gallery
3. A Current Selected Indicator
4. An Icon
5. A Display Text Label
2. Input Property :- MenuItems (Table type) to build menu links
3. Input Property :- CurrentScreenTitle (Text type) to show current selected menu option
4. Variable :- varOpenCloseMenu (true/false) to expand collapse Menu  
2. Start PowerApps maker portal. Then click on "Apps" from left navigation menu and the click on "Component libraries (preview)" from right section.
3. 
4. Now click on "+ New component library (preview)" option showing at top navigation bar. It will ask to provide a name. Let's give "LeftNavigationComponent" and click on create. It will create a canvas component of 640x640 and the Components tab selected by default. The app also has Screens tab. This is provided to test the component.
5. The basic difference between Canvas App and Component App is that Component App does not contain App component therefore it cannot be used as a full fledged App. We can create component in Canvas App also but that will be limited only to that app. Making component using Component library provides these components available to all apps.
6. Now, our approach to make it dynamic as far as possible.
7. Rename the component as "LeftNavComponent".
8. 
   
   
9. Set the Height property to "Max(App.Height,App.DesignHeight)".
10. Set the Width property to "Max(App.Width,App.DesignWidth)/5". I am setting width as 20% of the App width. We will change it later on to make it more dynamic for Expand/Collapse.
11. Now save the component. It will ask you to provide the Component library Name. I have chosen "LeftNavComponentLibrary".
12. 
    
    
13. Add an icon "Hamburger". Set -
1. X-Position:- 0
2. Y-Position:- 0
3. Width:- 70
4. Height:- 70
5. Padding (Top/Bottom/Left/Right):- 5
6. Rename:- IconHamburger
14. 
15. Add Blank Vertical gallery and rename it "GalleryLeftMenu". Set -
1. X-Position:- 0
2. Y-Position:- IconHamburger.Y + IconHamburger.Height (Gallery will start from the ending position of IconHamburger)
3. Width:- Parent.Width (Gallery width will be according to the Parent control width irrespective of Collapse/Expand)
4. Height:- Parent.Height-GalleryLeftMenu.Y (Gallery height will be Parent control height - starting position of gallery)
16. 
    
    
17. Add an input property to LeftNavComponent-
1. Display Name:- Input Menu Table
2. Name:- InputMenuTable (it will automatically filled based upon Display Name)
3. Description:- Add description as per your wish
4. Property Type:- Input
5. Data Type:- Table
18. Click on Create button to create the custom property.
19. Set the data for this property-

20. Table(
        {
            Title: "Home",
            Icon: Home,
            Screen: App.ActiveScreen
        },
        {
            Title: "Add",
            Icon: Add,
            Screen: App.ActiveScreen
        },
        {
            Title: "News",
            Icon: Newspaper,
            Screen: App.ActiveScreen
        }
    )
    

21. 
22. Come back to GalleryLeftMenu. Select it's Items property and set it to "LeftNavComponent.InputMenuTable".
23. Now click on Edit Gallery icon to add controls.
24. 
25. Add Icon >> Rectangle
26. Set properties-
1. X-Position:- 0
2. Y-Position:- 5
3. Width:- 10
4. Height:- 70
5. Rename:- RectangleCurrentSelected
27. Add Icon >> Add
28. Set properties-
1. X-Position:- 10
2. Y-Position:- 0
3. Width:- 70
4. Height:- 70
5. Padding (Top/Bottom/Left/Right):- 5
6. Rename:- IconMenu
7. Icon:- ThisItem.Icon
29. Add Label
30. Set properties-
1. X-Position:- 0
2. Y-Position:- 0
3. Width:- Parent.Width
4. Height:- 70
5. Padding (Top/Bottom/Right):- 5
6. Padding Left:- 75
7. Rename:- LabelDisplayText
8. Text:- ThisItem.Title
31. Come back to GalleryLeftMenu and select the property "TemplateSize". Set the value as 80.
32. Now click on "LeftNavComponent" and create a new custom property-
1. Display Name:- Current Menu Title
2. Name:- CurrentMenuTitle
3. Description:- It will store the title of current menu and will be used to make the current link Active.
4. Property type:- Input
5. Data type:- Text
33. Click on Create to create the property.
34. Now click on IconHamburger icon and select it's "OnSelect" property and set it's value as-
1. Set(varOpenCloseMenu,!varOpenCloseMenu)
35. It will be used to toggle the width of navigation menu.
36. Now click on LeftNavComponent and create another custom property-
1. Display Name:- Menu Width
2. Name:- MenuWidth
3. Description:- Current Width of Left Navigation Menu
4. Property type:- Output
5. Data type:- Number
37. Click on Create to create the property.
38. Now select this property from property dropdown and set it's function as -
1. If(varOpenCloseMenu,Max(App.Width,App.DesignWidth)/5+40,70)
39. 
40. Now click on GalleryLeftNavMenu and select it's width property. Set it's value to -
1. LeftNavComponent.MenuWidth
41. Do the same for "LeftNavComponent". Set it's width property to -
1. LeftNavComponent.MenuWidth
42. Now click on IconMenu and change it's properties as-
1. X-Position:- 10
2. Y-Position:- 5
3. Width:- 60
4. Height:- 70
5. Padding (Top/Bottom/Left/Right):- 10
43. 
    
    
44. Now click on "RectangleCurrentSelected" and set it's visible property to - 
1. ThisItem.Title = LeftNavComponent.CurrentMenuTitle
45. 
46. Alternatively, you may also use below function to show/hide the active link rectangle-
1. ThisItem.Screen = App.ActiveScreen
2. If you using this function, then you don't need to define the input property "CurrentMenuTitle".
3. This approach is more dynamic.
47. That's all.
48. Now, you want to test it. For this, click on Screens tab. You will find a default Screen1.
49. Rename it HomeScreen. Now click on Insert menu and click on Button to add a button. Rename this button as ButtonHome. Change the text of button as "Button Home" Now choose the OnSelect property of this button. Add below function-

1. ClearCollect(
       colNavMenuTable,
       Table(
           {
               Title: "Home",
               Icon: Home,
               Screen: HomeScreen
           },
           {
               Title: "Add",
               Icon: Add,
               Screen: AddScreen
           },
           {
               Title: "News",
               Icon: Newspaper,
               Screen: NewsScreen
           }
       )
   )
   

50. Now click on Insert >> Custom. You will find the recently created component (LeftNavComponent) over there. Click on it to add it.
51. Choose it's InputMenuTable property and set it to "colNavMenuTable", we have defined on above button click.
52. Now choose it's CurrentMenuTitle property and set it to "Home", the title defined for Home icon.
53. Make a copy of this screen twice and rename them as -
1. AddScreen 
1. (Update CurrentMenuTitle as "Add")
2. (Update button name as ButtonAdd and text as "Button Add")
2. NewsScreen
1. (Update CurrentMenuTitle as "News")
2. (Update button name as ButtonNews and text as "Button News")
54. Now play the app using Play link. Then click on ButtonHome to create the collection we have defined. As this is not an pure Canvas app therefore there is no App component where we can create the collection on OnStart. Therefore, we have used the button to achieve the purpose. The moment you click on button, collection will be created and the navigation will start reflecting. Now click on hamburger icon, Home icon, Add icon, News icon and see the performance.
55. Button Home
56. 
57. Button Add
58. 
59. Button News
60. 
61. This way we can achieve the navigation feature.
62. Now, if you wish to use this component in your app - 
1. Create an app
2. Add a screen
3. Click on Get more components link provided at the bottom of page.
4. A right side popup will display, choose the component you had build.
5. Click on Import.
63. It will be added in Library Components section in left side. Click on the component to add it to screen.
64. 
    
    
    
    
65. 
    
    
66. Now, you may define your collection on App >> OnStart property (the same, we have done using button in Components apps screen)
67. In my next post, we will discuss about nested navigation.
68. Lastly, I would like to thanks "Matthew Devaney" and "Reza Dorrani' whose posts and videos became an inspiration for me to design this component. I have made changes as per my requirements and clubbed features of both post and video. You may also visit below URLs to go through their posts and videos-
1. Matthew Devaney
   
2. Reza Dorrani

With this, I am concluding this post.

Happy Coding !!!

Will see you again with some new topics.

Stay Safe !

Stay Healthy !