web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

Welcome to the Power Platform Communities
Season of Giving Solutions is Here!
Explore Copilot Studio Forums, Blogs & Galleries!
News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Blogs / Power Apps - Community Blog / Components From Components ...

Components From Components - Sliding Menu

Views (2)
wyattdave Profile Picture wyattdave 410 Moderator


It's an oldie but a goody, and I know there are lots of solutions to the mobile slide out menu, but I have my reasons for this simple approach.

- PCF custom component - requires pro code (security checks), and enablement by admins
- Standard custom component - The scoping of the component and passing of variables makes this solution painful for most.

There is one negative, you have to copy paste this to screens, but its simple enough and as long as you don't have loads of screens (and you really shouldn't), its not an issue.
The menu has 2 key components, a timer and container. The timer runs constantly (auto start, reset, repeat all set to true), and it does a validation check each cycle.
The onTimerEnd() code is:
If(viMenuWidth<App.DesignWidth/2 And vbMenuOpen,
    Set(viMenuWidth,viMenuWidth+40)
);
If(viMenuWidth> 0 And Not(vbMenuOpen),
    Set(viMenuWidth,viMenuWidth-40)
);

which checks to see if it is set to open or close, and if it is in the correct state. if it is not it decrease a variable used for the menu width.
The container is our menu, and it contains a gallery for all of our screens. The screens need to be stored in a collection created on the app onStart() (the only bit of configuration you need to do). 

Set(viMenuWidth,0);
Set(vbMenuOpen,false);
ClearCollect(colMenu,[
    {name:"Screen1",screen:Screen1},
    {name:"Screen2",screen:Screen2},
    {name:"Screen3",screen:Screen3},
    {name:"Screen4",screen:Screen4}
]);
Just ensure that the screen is the screen object, not text.

We then add a standard labels in the gallery that use the collections item name and onSelect() it navigates to the collection item screen.

menu

The final touches are the label underline uses below expression to show which screen you are on:
ThisItem.name=App.ActiveScreen.Name

And we have a hamburger icon to open/close the menu with below onSelect():
Set(vbMenuOpen,Not(vbMenuOpen))

I also used a change so that the menu still shows so we set color() to:
If(vbMenuOpen,Color.White,RGBA(0, 18, 107, 1))

On each screen set onHidden() to:
Set(vbMenuOpen,false);

Then its a simple case of copying and pasting the container and the menu on to each page.

studio
A copy of app can be found in my GitHub repo named 'menu.zip' here: https://github.com/wyattdave/Power-Platform/tree/main/Power%20App%20Artifacts 

Comments