Flyout Menu Component (Left/Right) 09-25-2019 16:59 PM - last edited 04-16-2020 13:15 PM

[Edwin-Abdalian]

I've created a flyout menu which is very easy to configure and reuse in your apps.

Just 3 steps:

1. Create a button to show/hide the menu and set the OnSelect property of it to UpdateContext({locShowMenu: !locShowMenu)
2. Insert the Component and set these custom properties:

**Data Source = collection or a table

Table(
    {
        Title: "Home",
        MenuIcon: Home,
        Screen: Screen1
    },
    {
        Title: "Appointments",
        MenuIcon: AddToCalendar,
        Screen: Screen2
    })

**Show Menu = locShowMenu

**Left Side Flyout = true (if you would like the menu to fly in/out from left. else set it to false to make it a right side flying menu

1. Set the Visible property of the component to “Name of the Component”.ComponentVisibility. for example ‘Flyout Menu_1’.Component Visibility

[Edwin-Abdalian]

and here is a video.

[pawxlead]

Thank you for sharing this component. It has helped me a lot, because I just started learning powerapps a couple of weeks ago, and through this component I learned a lot. I have a question, where do you create the variable "glbMenuVisibility"? Thank you very much for your help, regards from Chile!

[Edwin-Abdalian]

glad to hear that it was helpful.

the variable is set on Timers Start and End

[Pietersa]

Good day,

In your example gif you are able to search and select a patient when the menu has slided away.

How do we get this sorted.

We have added a search field as a gallary but are unable to search or select.

[Edwin-Abdalian]

that is not a part of the component. you need to use the Filter function to only show records that match a certain criteria. for example EmployeeName = YourTextbox

you can learn more about the finction here

[kmk]

Hi @Edwin-Abdalian 

Can you help me here.

https://powerusers.microsoft.com/t5/Building-Power-Apps/how-to-fly-left-right-menu-bar-when-icon-cli...

[Turtlestein]

This is awesome thank you. Question, how did you get the OnSelect for the Gallery to recognize columns from the table such as MenuIcon, Title, Screen. I am attempting to add more. But I cannot get it to recognize any columns I add when creating the collection on app start.

Example:

ClearCollect(
menustuff,
{
Title: "This Page",
MenuIcon: Home,
Screen: Screen2,
ScreenAlternative: Screen3
},
{
Title: "That Page",
MenuIcon: Home,
Screen: Screen1,
ScreenAlternative: Screen3
}
)

Edit: Added example

[Felipe_Gonzalez]

Hello!

Maybe, it´s because you´re using a Collection instead of using a table Object in your data source, like the flyout menu example. Try using Table object, maybe it works 🙂

Regards from Chile!

[newbie_automate]

This is great post. Very easy to implement. I have a slight problem however looks like the opacity of my flyout menu is low as a result my main screen elements are overlapping my content in the flyout menu. How do i fix this.