cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
kmk
Helper V
Helper V

how to create menu and sub-menu in using component for reusable

Hi 

We have a requirement to create Menu and Submenus.

i just followed few channels(youtube) https://www.youtube.com/watch?v=3J8cH0qGpow

but they are displaying only menus (first level menu) but not second level under menu.

Can some one help me how to create second level sub-menus.

 

 

 

1 ACCEPTED SOLUTION

Accepted Solutions
v-bofeng-msft
Community Support
Community Support

Hi @kmk :

Do you want to create a second level sub-menus?

I thought of a solution to achieve this function through groupby

Ive made a test for your reference:

Component

Considering that you have already watched the video, my plan skips some steps, but I think you should be able to understand this solution. If you have any questions, don't hesitate to let me know.

The point is to use groupby function to create a hierarchical table to achieve a two-level menu

1\set the MenuItems property to:

GroupBy(Table({id:1,menuLabel:"A",screen:App.ActiveScreen},{id:1,menuLabel:"B",screen:App.ActiveScreen},{id:2,menuLabel:"C",screen:App.ActiveScreen}),"id","submenu")

/*in my solution , id is the main menu, menuLabel is the sub menu*/

/*This is a hierarchical table used to create submenus*/

2\add two gallery(galmenu/galmenu_1)

galmenu:

TemplateFill: If(ThisItem.IsSelected,ColorFade(galmenu.Fill,50%))

Fill: RGBA(39, 67, 125, 1)

Items: Component1.MenuItems

(the arrow:OnSelect: Select(Parent))

galmenu_1:

TemplateFill: If(ThisItem.IsSelected,ColorFade(galmenu.Fill,50%))

Fill: RGBA(39, 67, 125, 1)

Items: galmenu.Selected.submenu  /*get the sub table from the data source*/

(the arrow:OnSelect: Select(Parent);Navigate(ThisItem.screen,ScreenTransition.Fade))

 

Screen:

3\Add 4 screens(Screen1/2/3/4)

4\set App-OnStart to

ClearCollect(colMenuItems,GroupBy(Table({id:1,menuLabel:"A",screen:Screen1},{id:1,menuLabel:"B",screen:Screen2},{id:2,menuLabel:"C",screen:Screen3},{id:3,menuLabel:"C",screen:Screen4}),"id","submenu"))

/*This is a hierarchical table used to create submenus*/

5\Add the component

MenuItems: colMenuItems

 

2.png

Best Regards,

Bof

View solution in original post

2 REPLIES 2
v-bofeng-msft
Community Support
Community Support

Hi @kmk :

Do you want to create a second level sub-menus?

I thought of a solution to achieve this function through groupby

Ive made a test for your reference:

Component

Considering that you have already watched the video, my plan skips some steps, but I think you should be able to understand this solution. If you have any questions, don't hesitate to let me know.

The point is to use groupby function to create a hierarchical table to achieve a two-level menu

1\set the MenuItems property to:

GroupBy(Table({id:1,menuLabel:"A",screen:App.ActiveScreen},{id:1,menuLabel:"B",screen:App.ActiveScreen},{id:2,menuLabel:"C",screen:App.ActiveScreen}),"id","submenu")

/*in my solution , id is the main menu, menuLabel is the sub menu*/

/*This is a hierarchical table used to create submenus*/

2\add two gallery(galmenu/galmenu_1)

galmenu:

TemplateFill: If(ThisItem.IsSelected,ColorFade(galmenu.Fill,50%))

Fill: RGBA(39, 67, 125, 1)

Items: Component1.MenuItems

(the arrow:OnSelect: Select(Parent))

galmenu_1:

TemplateFill: If(ThisItem.IsSelected,ColorFade(galmenu.Fill,50%))

Fill: RGBA(39, 67, 125, 1)

Items: galmenu.Selected.submenu  /*get the sub table from the data source*/

(the arrow:OnSelect: Select(Parent);Navigate(ThisItem.screen,ScreenTransition.Fade))

 

Screen:

3\Add 4 screens(Screen1/2/3/4)

4\set App-OnStart to

ClearCollect(colMenuItems,GroupBy(Table({id:1,menuLabel:"A",screen:Screen1},{id:1,menuLabel:"B",screen:Screen2},{id:2,menuLabel:"C",screen:Screen3},{id:3,menuLabel:"C",screen:Screen4}),"id","submenu"))

/*This is a hierarchical table used to create submenus*/

5\Add the component

MenuItems: colMenuItems

 

2.png

Best Regards,

Bof

Laila92
New Member

Helpful resources

Announcements
Power Apps News & Annoucements carousel

Power Apps News & Announcements

Keep up to date with current events and community announcements in the Power Apps community.

Power Apps Community Blog Carousel

Power Apps Community Blog

Check out the latest Community Blog from the community!

Top Solution Authors
Top Kudoed Authors
Users online (6,395)