Two Level Left Navigation Component

Introduction: This post will give an overview of the Two Level Left Navigation Component and its key features.

Components make it easier to build reusable controls, such as navigation menus and which makes easy to reuse them as building blocks inside the app.

Required:

• PowerApps

Solution:

• In PowerApps, go to Components and click on “New Component” and then rename that as “LeftNavComponent”.

• Create below Custom Properties:

a. ImgLogo: Input: Image type
b. lblHeader: Input: Text type
c. SelectedItemId: Input: Number Type
d. PrimaryColor: input: Color type
e. Text Color: Input : Color
f. OnSelect:Behaviour: Text Type
g. SelectedItemOutput:Output: Number
h. MenuItems: Input: Table

• Take a image control and set its property as “LeftNavComponent.ImgLogo”

• Also take a label control and make its property as “LeftNavComponent.lblHeader” . Please take reference from above two images.
•  “MenuItems” value is like below. We can change the icon as need. Will provide the reference link for this in below.

Table(
{Id: 1, Title: "Get Data", Icon:"data:image/svg+xml;utf8, " & EncodeUrl("
"), Category:"PITS",NavigateScreen:App.ActiveScreen},
{Id: 2, Title: "Create/Update",Icon:"data:image/svg+xml;utf8, " & EncodeUrl("
"), Category:"PITS",NavigateScreen:App.ActiveScreen},
{Id: 3, Title: "Get Data", Icon:"data:image/svg+xml;utf8, " & EncodeUrl("
"), Category:"SAP",NavigateScreen:App.ActiveScreen},
{Id: 4, Title: "Create/Update",Icon:"data:image/svg+xml;utf8, " & EncodeUrl("
"), Category:"SAP",NavigateScreen:App.ActiveScreen},
{Id: 5, Title: "Get Data", Icon:"data:image/svg+xml;utf8, " & EncodeUrl("
"), Category:"NAGOX",NavigateScreen:App.ActiveScreen},
{Id: 6, Title: "Create/Update",Icon:"data:image/svg+xml;utf8, " & EncodeUrl("
"), Category:"NAGOX",NavigateScreen:App.ActiveScreen},
{Id: 7, Title: "Get Data",Icon:"data:image/svg+xml;utf8, " & EncodeUrl("
"), Category:"Budgeting Solution",NavigateScreen:App.ActiveScreen}
}

• Now insert a gallery (Named as “GalMenuItems”) and set its Data source as “Distinct(LeftNavComponent.MenuItems,Category)”

• Take a image control and label control inside the gallery “GalMenuItems” and make its values as
  Image: LookUp(LeftNavComponent.MenuItems, Category = ThisItem.Result).Icon
  Label: ThisItem.Result

Now take nested gallery named as “GalSubMenu” inside the gallery and set its data source as “Filter(LeftNavComponent.MenuItems, Category = ThisItem.Result)”

• Inside the nested gallery ““GalSubMenu”  add a image control and set its value as below

• Now take a button control inside the nested gallery and give set below properties:
  OnSelect: Set(gblNavSelectedId, ThisItem); LeftNavComponent.OnSelect(); Navigate(ThisItem.NavigateScreen,Cover)
  Text: ThisItem.Title
  Color: If(LeftNavComponent.SelectedItemId = ThisItem.Id,LeftNavComponent.PrimaryColor,LeftNavComponent.TextColor)

• Set a Output property “SelectedItemOutput” value as “gblNavSelectedId.Id”

• Now on app on start create a collection to get MenuItems like below:

• Now go to “Screens Tab” and create a new screen and add the developed component (It will have a name like “LeftNavComponent_1”)and set its properties as below:
  ImgLogo: give the image value here
  lblHeader: enter your text here
  OnSelect: Set(gblSelectedNavItem,LeftNavComponent_1.SelectedItemOutput)
  MenuItems: colNavMenu
  PrimaryColor: ColorValue(“Your Value”)
  SelectedItemId: gblSelectedNavItem
  TextColor: ColorValue(“Your Value”)

Note:
1. On Screen visible, set the value for gblSelectedNavItem like “Set(gblSelectedNavItem, 1)”, because to select the menu item from component. Its value changes for each screen. Example:  Set(gblSelectedNavItem, 2). Its depends on select of menu item which navigates to which screen

2. Change the ‘NavigateScreen’ value in collection “ColNavItems” as its “Screen Name”.
Example:

Here is the reference link for svg controls:
Building a beautiful Power Apps mobile navigation menu – SVG’s (part 3) — Kristine Kolodziejski