Skip to main content
Microsoft logo
Power Apps
    • AI Builder
    • Automate processes
    • Azure + Power Apps
    • Build apps
    • Connect data
    • Pages
    • Take a guided tour
  • 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
    • Re: Flyout Menu Component (Left/Right)

    Re: Flyout Menu Component (Left/Right)

    10-11-2021 04:53 AM

    Spata
    Frequent Visitor
    847 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
    28,590 Views
    13 Kudos
    Reply
    • All forum topics
    • Previous Topic
    • Next Topic
    • « Previous
      • 1
      • 2
      • 3
      • 4
      • 5
    • Next »
    anurag_vaishnav
    anurag_vaishnav
    Frequent Visitor
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎06-20-2021 10:19 PM

    Hi

     

    Thanks for this Component, very useful, however I have one error which I cant seems to fix. All my icons are showing "Waffle Icon" as shown in attached screen. I am using table (screen2). Title and Screens seems to be working fine.

     

    Anurag

    Preview file
    4 KB
    Preview file
    10 KB
    Message 41 of 44
    1,107 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

    ‎07-21-2021 02:11 PM

    This flyout menu started acting very weird lately.  I have it working in 1 apps, was working in a 2nd but all of sudden it stoped displaying the menu items.   I completely removed it and replaced it and setup the datasource and the items returned.   Then I updated app and it is not showing the menu items anymore.   Does anyone else have this problem and what did you do to fix it?

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

    ‎10-11-2021 04:53 AM

    Hi,

     

    I was wondering that is there way to so make this component visible by clicking another component (not using updatecontext). My goal is to make component that includes that icon-button that now brings flyoutmenu visible. Thanks!

    Message 43 of 44
    847 Views
    0 Kudos
    Reply
    johanarrenas5
    johanarrenas5
    New Member
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Report Inappropriate Content

    ‎11-10-2022 08:33 AM

    Hola buen dia, soy nuevo con power apps me gusto bastante su aplicacion. tengo una duda al darle click en el boton para que abra el menu. como hago que al abrir el menu el fondo este en gris como se vizualiza en el gif

    Message 44 of 44
    411 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