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

[marsdendd]

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

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

[marsdendd]

@Anonymous 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.

[marsdendd]

@Anonymous 

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

[Anonymous]

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

[Anonymous]

hi @Anonymous ,

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

[ildeloge]

Hi @Edwin-Abdalian,

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

Thanks!

[Anonymous]

Hi @Anonymous - 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.   

[harperjo1]

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.

[tavanuka]

@Anonymous, @Anonymous 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!

[PhilKD]

Thank you for the component Edwin, very useful

Here are some thoughts and suggestion on the installation.
1. Create a button to show/hide the menu and set the OnSelect property of it to

    UpdateContext({locShowMenu: !locShowMenu})
    There was a missing } in the original example

2. Insert the Component and create a collection for the menu, i did this in my AppStart section as follows

//Menu 
ClearCollect( 
colMenu, 
{ 
Title: "Home", 
MenuIcon: Icon.Home, //NB, use Icon.IconName 
Screen: Home }, 
{ 
Title: "Appointments", 
MenuIcon: Icon.CalendarBlank, //NB, use Icon.IconName 
Screen: Screen2 
} );

3. Make sure the DataSource is mapped correctly as follows:

4. Set the ShowMenu property of the component to LocShowMenu

.5 Set the Visible property of the component to “Name of the Component”.ComponentVisibility. for example ‘Flyout Menu_1’.Component Visibility

6. I then resized the component so that it wouldn't cover the menu icon on my screen

(Sorry for the multiple edit, I kept getting an error when trying to post in one go ("Your post has been changed because invalid HTML was found in the message body")