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 Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

May UG Leader Call Carousel 768x460.png

June User Group Leader Call

Join us on June 28 for our monthly User Group leader call!

PA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.

PA.JPG

New Release Planning Portal (Preview)

Check out our new release planning portal, an interactive way to plan and prepare for upcoming features in Power Platform.

Top Solution Authors
Users online (1,379)