Skip to main content
Microsoft logo
Power Apps
    • AI Builder
    • Automate processes
    • Azure + Power Apps
    • Build apps
    • Connect data
    • Pages
  • Pricing
    • Overview
    • Become a Partner
    • Find a Partner
    • Find partner offers
    • Partner GTM Resources
    • Blog
    • Customer stories
    • Developer Plan
    • Documentation
    • For IT Leaders
    • Roadmap
    • Self-paced learning
    • Webinars
    • App development topics
    • Overview
    • Issues
    • Give feedback
    • Overview
    • Forums
    • Galleries
    • Submit ideas
    • User groups
    • Register
    • ·
    • Sign in
    • ·
    • Help
    Go To
    • Power Apps Community
    • Welcome to the Community!
    • News & Announcements
    • Get Help with Power Apps
    • Building Power Apps
    • Microsoft Dataverse
    • AI Builder
    • Power Apps Governance and Administering
    • Power Apps Pro Dev & ISV
    • Power Apps Portals
    • Connector Development
    • Power Query
    • GCC, GCCH, DoD - Federal App Makers (FAM)
    • Power Platform Integration - Better Together!
    • Power Platform Integrations
    • Power Platform and Dynamics 365 Integrations
    • Community Blog
    • Power Apps Community Blog
    • Galleries
    • Community Connections & How-To Videos
    • Community App Samples
    • Webinars and Video Gallery
    • Canvas Apps Components Samples
    • Kid Zone
    • Emergency Response Gallery
    • Events
    • 2021 MSBizAppsSummit Gallery
    • 2020 MSBizAppsSummit Gallery
    • 2019 MSBizAppsSummit Gallery
    • Community Engagement
    • Community Calls Conversations
    • Experimental
    • Error Handling
    • Power Apps Experimental Features
    • Community Support
    • Community Accounts & Registration
    • Using the Community
    • Community Feedback
    cancel
    Turn on suggestions
    Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
    Showing results for 
    Search instead for 
    Did you mean: 
    • Power Apps Community
    • Galleries
    • Canvas Apps Components Samples
    • Flyout Menu Component (Left/Right)

    Flyout Menu Component (Left/Right)

    09-25-2019 00:39 AM - last edited 12-17-2021 14:10 PM

    Edwin-Abdalian
    Impactful Individual
    27269 Views
    LinkedIn LinkedIn Facebook Facebook Twitter Twitter
    Edwin-Abdalian
    Edwin-Abdalian Impactful Individual
    Impactful Individual
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    Flyout Menu Component (Left/Right)

    ‎09-25-2019 12:39 AM

    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

    Custom Properties.png

    Preview file
    83 KB
    Flyout Menu.msapp
    Labels:
    • Labels:
    • Components
    Message 1 of 44
    27,269 Views
    13 Kudos
    Reply
    • All forum topics
    • Previous Topic
    • Next Topic
    • « Previous
      • 1
      • 2
      • 3
      • 4
      • 5
    • Next »
    Chrisguff12
    Chrisguff12 Resolver I
    Resolver I
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎02-25-2021 04:07 PM

    @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?

    Message 31 of 44
    1,872 Views
    0 Kudos
    Reply
    n1ckmuk
    n1ckmuk Helper I
    Helper I
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎03-26-2021 10:55 AM

    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;

    n1ckmuk_0-1616781315181.png

     

    Message 32 of 44
    1,814 Views
    0 Kudos
    Reply
    Vansyork
    Vansyork
    Frequent Visitor
    In response to n1ckmuk
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎03-31-2021 06:04 AM

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

    Message 33 of 44
    1,772 Views
    0 Kudos
    Reply
    n1ckmuk
    n1ckmuk Helper I
    Helper I
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎03-31-2021 07:38 AM

    Yes...

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

    Message 34 of 44
    1,772 Views
    1 Kudo
    Reply
    Vansyork
    Vansyork
    Frequent Visitor
    In response to n1ckmuk
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎04-05-2021 11:58 PM

    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.

    Message 35 of 44
    1,718 Views
    0 Kudos
    Reply
    Mike_KaiserPerm
    Mike_KaiserPerm Advocate I
    Advocate I
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎04-18-2021 03:32 PM

    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
    }
    )

     

    Message 36 of 44
    1,669 Views
    0 Kudos
    Reply
    wahlau
    wahlau
    Frequent Visitor
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎04-19-2021 08:33 AM

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

    wahlau_0-1618846360512.png

    as i found the screen target encounter error, please help

     

    Message 37 of 44
    1,660 Views
    1 Kudo
    Reply
    Mike_KaiserPerm
    Mike_KaiserPerm Advocate I
    Advocate I
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎04-19-2021 11:53 AM

    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.

    Message 38 of 44
    1,649 Views
    1 Kudo
    Reply
    wahlau
    wahlau
    Frequent Visitor
    In response to Mike_KaiserPerm
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎04-19-2021 05:52 PM

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

    wahlau_0-1618879914231.png

     

    Message 39 of 44
    1,638 Views
    1 Kudo
    Reply
    arlgroup
    arlgroup Helper I
    Helper I
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎06-09-2021 11:11 AM

    Can I have source file, please? Thanks

    Message 40 of 44
    1,211 Views
    0 Kudos
    Reply
    • « Previous
      • 1
      • 2
      • 3
      • 4
      • 5
    • Next »

    Power Platform

    • Overview
    • Power BI
    • Power Apps
    • Power Pages
    • Power Automate
    • Power Virtual Agents

    Browse

    • Sample apps
    • Services

    Downloads

    • Windows
    • iOS
    • Android

    Learn

    • Documentation
    • Support
    • Community
    • Give feedback
    • Blog
    • Partners

    • © 2023 Microsoft
    • Follow Power Apps
    • Privacy & cookies
    • Manage cookies
    • Terms of use
    • Trademarks
    California Consumer Privacy Act (CCPA) Opt-Out Icon Your California Privacy Choices