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
    • For IT Leaders
    • Roadmap
    • Self-paced learning
    • Webinars
    • 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
    • Power Platform Integration - Better Together!
    • Power Platform Integrations
    • Power Platform and Dynamics 365 Integrations
    • Community Blog
    • Power Apps Community Blog
    • 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
    12191 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 35
    12,191 Views
    9 Kudos
    Reply
    • All posts
    • Previous Topic
    • Next Topic
    • « Previous
      • 1
      • 2
      • 3
      • 4
    • Next »
    Chrisguff12
    Chrisguff12 Resolver I
    Resolver I
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • 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 35
    207 Views
    0 Kudos
    Reply
    n1ckmuk
    n1ckmuk
    Frequent Visitor
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    3 weeks ago

    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 35
    148 Views
    0 Kudos
    Reply
    Vansyork
    Vansyork
    Frequent Visitor
    In response to n1ckmuk
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    2 weeks ago

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

    Message 33 of 35
    102 Views
    0 Kudos
    Reply
    n1ckmuk
    n1ckmuk
    Frequent Visitor
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    2 weeks ago

    Yes...

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

    Message 34 of 35
    94 Views
    1 Kudo
    Reply
    Vansyork
    Vansyork
    Frequent Visitor
    In response to n1ckmuk
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    a week ago

    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 35
    38 Views
    0 Kudos
    Reply
    Preview Exit Preview

    never-displayed

    You must be signed in to add attachments

    never-displayed

    Additional options
    You do not have permission to remove this product association.
    ย 
    • « Previous
      • 1
      • 2
      • 3
      • 4
    • 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