Flyout Menu Component (Left/Right) 09-25-2019 00:39 AM - last edited 12-17-2021 14:10 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

[Chrisguff12]

@Edwin-Abdalian 

Hello, I really like your app and plan to use it in many future app. I was wondering if there is way to change the screen transition? Right now, I believe it’s a cover right but with the menu and screen movement it’s a little jarring to the eyes. Would it be possible to change it to Fade?

[n1ckmuk]

has a change in powerapps broken this component? I'm using this in quite a few apps and they have all suddenly stopped working with an error;

[Vansyork]

Having the same issue here, have you found a solution yet?

[n1ckmuk]

Yes...

https://powerusers.microsoft.com/t5/Building-Power-Apps/something-has-broken-all-my-apps/m-p/873355#...

[Vansyork]

Thanks for you anwser, It helped me fix the problem! What a weird issue... I had to put 'dummy' data in the components datasource with the same signature of the data I used to push in, and then set the datasource again on the screens side.

[Mike_KaiserPerm]

ok, this is weird but it worked and it removed the problem I had in a previous app that was using this component.

Screen vs screen

I assume Screen is a reserved word now, or that changed recently.   When I changed the structure of the collection to have a lowercase s, the error about an expected different collection went away

Example 1 with a variable

Set(
_myMenu,Table(
{
Title: "LOGOUT",
MenuIcon: Airplane,
screen: SplashScreen  //This is what I changed screen from Screen.
},
{
Title: "Virtual Board",
MenuIcon: Home,
screen: VirtualBoard  //This is what I changed screen from Screen.
}
)
)

Same way with a collection

ClearCollect(
colMenu,
{
Title: "LOGOUT",
Icon: Airplane,
screen: scr_SPLASH
},
{
Title: "HOME",
Icon: Home,
screen: scr_HOME
},

{
Title: "REQUEST STAFF",
Icon: LogJournal,
screen: scr_REQUEST
},
{
Title: "ENTER AND DEPLOY STAFF",
Icon: Icon.Draw,
screen: scr_BACKENTER
},
{
Title: "NOMINATE STAFF",
Icon: People,
screen: scr_NOMINATE
},
{
Title: "REDEPLOY STAFF",
Icon: DetailList,
screen: scr_REVIEW
},
{
Title: "VIEW SCHEDULES",
Icon: Newspaper,
screen: scr_VIEW_SCHEDULE
},

{
Title: "Experiment",
Icon: Clock,
screen: scr_3DaySchedule
}
,
{
Title: "EDIT RECORDS",
Icon: Icon.Erase,
screen: scr_EDIT_NOM
},

{
Title: "CONTACTS",
Icon: Icon.People,
screen: scr_CONTACTS
},

{
Title: "ADMIN",
Icon: Settings,
screen: scr_ADMIN
},
{
Title: "HELP",
Icon: Waypoint,
screen: scr_HELP
}
)

[wahlau]

hi, i still can't figure out, i did change Screen to screen, menu appear but can't navigate to the target

as i found the screen target encounter error, please help

[Mike_KaiserPerm]

Not sure what screen target error is - post an error message that you see.   
Is the menuIcon control in the component fixed.  that was supposed to be ThisItem.MenuIcon.

Note the capitalization as it matters.  Everything must match.

[wahlau]

Is ok, I found the issue already, in the onselect you need to change Screen to screen manual too.

[arlgroup]

Can I have source file, please? Thanks