Skip to main content
Microsoft logo
Power Apps
    • AI Builder
    • Automate processes
    • Azure + Power Apps
    • Build apps
    • Connect data
    • Portals
  • Pricing
    • Overview
    • Become a Partner
    • Find a Partner
    • Find consulting services
    • Blog
    • Customer stories
    • Documentation
    • Roadmap
    • Self-paced learning
    • Webinars
    • Overview
    • Issues
    • Give feedback
    • Overview
    • Forums
    • Galleries
    • Submit ideas
    • Register
    • ·
    • Sign In
    • ·
    • Help
    Go To
    • Power Apps Community
    • 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
    • Power Platform Integration - Better Together!
    • Power Platform Integrations
    • Power Platform and Dynamics 365 Integrations
    • Community Blog & News
    • News & Announcements
    • Power Apps Community Demo Extravaganza 2020
    • Galleries
    • Community App Samples
    • Webinars and Video Gallery
    • Canvas Apps Components Samples
    • Kid Zone
    • Business Value Webinars and Video Gallery
    • Emergency Response Gallery
    • 2019 Microsoft Business Applications Summit Recordings (Archived)
    • Microsoft Business Applications Summit 2020 Session Recordings
    • Ideas
    • Power Apps Ideas
    • 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

    Edwin-Abdalian
    Solution Supplier
    9628 Views
    LinkedIn LinkedIn Facebook Facebook Twitter Twitter
    Edwin-Abdalian
    Edwin-Abdalian Solution Supplier
    Solution Supplier
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • 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
    Message 1 of 29
    9,628 Views
    8 Kudos
    Reply
    • All posts
    • Previous Topic
    • Next Topic
    • « Previous
      • 1
      • 2
      • 3
    • Next »
    marsdendd
    marsdendd Helper II
    Helper II
    In response to Edwin-Abdalian
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎06-04-2020 12:20 AM

    Thanks Edwin, yeah i tried that previously and this was the result. (see attached)

     

    Basically the flyout is in a half in/out state.

     

     

     

     

    Preview file
    23 KB
    Message 21 of 29
    500 Views
    0 Kudos
    Reply
    marsdendd
    marsdendd Helper II
    Helper II
    In response to bolin-stratus
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎06-04-2020 04:16 AM

    @bolin-stratus Did you solve this ?

     

    I was able to recreate the same behaviour in exactly the same way as you did. If i use the Information icon for example i get errors. If i change the Information icon to something like Settings then i don't have a problem.

    Message 22 of 29
    497 Views
    0 Kudos
    Reply
    marsdendd
    marsdendd Helper II
    Helper II
    In response to marsdendd
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎06-04-2020 04:37 AM

    @bolin-stratus 

     

    In my case have bottomed out the behaviour.  Information is preceded with either Icon. NotificationType. or TraceSeverity. 

     

    As a result I had to specify Icon.Information but not the other Icons. 

     

    Table(
    {
    Title: "Home",
    MenuIcon: Home,
    Screen: scrHomePage
    },
    {
    Title: "Reports Overview",
    MenuIcon: DockCheckProperties,
    Screen: scrReportOverview
    },
    {
    Title: "Support/Questions",
    MenuIcon: Icon.Information,
    Screen: scrHelp
    }
    )

    Message 23 of 29
    496 Views
    0 Kudos
    Reply
    bolin-stratus
    bolin-stratus Post Patron
    Post Patron
    In response to marsdendd
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎06-19-2020 01:41 PM

    @marsdendd - Sorry for the late response. I have been out on vacation. 

    I was able to rectify the issue I originally posted here by starting over and using a new instance of the component AND making sure not to reference the Search icon since it is a reserved word (formulas).  I definitely experienced some intermittent issues while working with the component.  I hope that helps.  

    Message 24 of 29
    458 Views
    0 Kudos
    Reply
    keithoon
    keithoon
    Frequent Visitor
    In response to bolin-stratus
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎06-21-2020 02:54 AM

    hi @bolin-stratus ,

     

    i had this issue indicating that MenuIcon is invalid. the workaround i did is replace MenuIcon with any other icons (E.g. Hamburger, etc). However, when i do that the dynamic icon display will not be achievable i suppose. did you have any such issues? kindly see the attached

    Preview file
    93 KB
    Message 25 of 29
    443 Views
    0 Kudos
    Reply
    ildeloge
    ildeloge
    Frequent Visitor
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎06-22-2020 01:06 AM

    Hi @Edwin-Abdalian,

    I love your app! Also the styles! Would it be possible please to share a sample of it? 

    Thanks!

    Message 26 of 29
    433 Views
    0 Kudos
    Reply
    bolin-stratus
    bolin-stratus Post Patron
    Post Patron
    In response to keithoon
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎06-22-2020 06:25 AM

    Hi @keithoon - I did not experience that you are seeing. My issues occurred as I begin to use various icons and the Flyout menu.There does not appear to be a known work around once you experience my issue, however replacing it with a new instance of the component fixed my issue.   

    Message 27 of 29
    428 Views
    0 Kudos
    Reply
    harperjo1
    harperjo1
    Regular Visitor
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎09-11-2020 11:15 AM

    Thanks for a great component and i hope to use in in my apps going forward but i cannot get this to work.

     

    I imported the component from your demo app into my existing app and set the configurations as you did in the demo. 

    The flyout works perfectly but the icons do not register as navigation points.........did i miss something?

     

    i can edit and navigate on your demo app very well just not in my current application.

    Message 28 of 29
    269 Views
    0 Kudos
    Reply
    tavanuka
    tavanuka
    Regular Visitor
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎11-09-2020 07:02 AM

    @bolin-stratus, @keithoon I have found the solution to the Icon problem.

    The Issue was somewhere in the parameter of the Icon label in the component, being straight up named "MenuIcon" and not ThisItem.MenuIcon. That fixed it immediately. 
    So, I hope this helps to whoever tries this wonderful Component. Thank you @Edwin-Abdalian!
    image.png

    Message 29 of 29
    128 Views
    0 Kudos
    Reply
    • « Previous
      • 1
      • 2
      • 3
    • Next »

    Power Platform

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

    Power Apps

    • Sign in
    • Sign up

    Browse

    • Sample apps
    • Services

    Downloads

    • Studio
    • iOS
    • Android

    Learn

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

    • © 2021 Microsoft
    • Follow Power Apps
    • Privacy & cookies
    • Manage cookies
    • Terms of use
    • Trademarks