Author Details

avatar-teacher

Evolvous

We are a team of tech enthusiast and this section is where we love to share our experience and our knowledge. We try our best to help you understand technical topics by giving you live instances of how-to’s, guides, tips, FAQ’s and troubleshoots.

If you like it or have questions, do share your feedback in the comments section below.

Two Level Left Navigation Component

Introduction:

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:

Solution:

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

In PowerApps, go to Components and click on “New Component” - Evolvous

  • 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”

Take a image control and set its property as “LeftNavComponent.ImgLogo - Evolvous

Two Level Left Navigation Component | Learn from Expert

  • 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)”

Two Level Left Navigation Component | Learn from Expert

  • 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)

Two Level Left Navigation Component | Learn from Expert

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

Two Level Left Navigation Component | Learn from Expert

  • 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”)

Two Level Left Navigation Component | Learn from Expert

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:

Change the ‘NavigateScreen’ value in collection “ColNavItems” as its “Screen Name”. - Evolvous

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