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

[SighlentNite]

This is really awesome.

I just have an issue, I can't edit the gallery at all to edit or add items.
I wanted to perhaps add a HTML text as the name so that I can use another component as use external Fonts.
And then swap the icon for an image so I can use external images I have.

[Anonymous]

@Edwin-Abdalian - This is exactly the solution I was looking for!  I have one issue though and it's the icons.  For the menus DataSource property I am using the following code. Please note for the MenuIcon, I have tried it with and without "Icon." (highlighted in blue below) and the icons simply don't render (they display text - see screenshot). Any recommendations?

Table(
{ Title: "Home", MenuIcon: Icon.Home, Screen: screenHome },
{ Title: "Appointments", MenuIcon: Icon.AddToCalendar, Screen: RequestTeamsSite }
)

Also there are no examples of how to use a collection for the DataSource property. I tried using a collection and it had errors. 

Text rendered instead of icons

[Edwin-Abdalian]

Because you have bound an icon to a label control. add a new Icon control to your gallery and set Icon = MenuIcon

[Anonymous]

Thank you @Edwin-Abdalian for your response.  The component already has an icon image with the icon property already set to MenuIcon. Are you saying I need to delete the existing MenuIcon and add a new instance back?  Any recommendations are greatly appreciated.

[Edwin-Abdalian]

Never seen that issue. try to remove and re-insert it as you suggested. you can also add a brand new gallery and see if you get the icons displayed correctly in the gallery.

Edwin

[Anonymous]

Hey @Edwin-Abdalian - I ended up creating a copy of the component and it was successful.

One thing to note is that my issue with icons failing to render began occurring as I tweaked the DataSource property of the component instance that I inserted on the screen. The issue started occurring when I began to edit the icon names the DataSource property as shown below.  For example, I changed the icon name Documents to Search (which is reserved formula name).  Perhaps introducing a reserved word caused an unforeseen issue. You can see below that Search is highlighted by the formula editor.

NOTE: I have omitted the opening "Table(" and closing ")" code in the screenshot.

That is the only thing I can point to as a catalyst for introducing icon issues in the component.   

[marsdendd]

Hi @Edwin-Abdalian 

First, great component. THANKS FOR SHARING

I am having a slight issue in that the menu doesnt autocollapse when navigating to the next screen and then when returning to the previous screen it remains out meaning I have to close it to get the the gallery menu underneath.

Can you guide me on perhaps where I would need to set the variable to ensure whenever i navigate to a new screen the variable is set to ensure the flyout is set back to its default (closed) position.

THANKS

[SighlentNite]

Hi, 

first off thank you for the wonderful component. I have just had a small issue where I am unable to edit the gallery to add new components
I am currently using HTML text instead of labels as it allows me to use any font I want(using google loader component)

This means that this menu now looks quite different from the rest of the application.
Is there something I am missing.
All I want is to add an HTML text to the gallery and perhaps and image instead of an icon(so that I can use a wider array of pictures for buttons)

Thank you for your time

[Edwin-Abdalian]

Try to set UpdateContext({locShowMenu: false}) when navigating away from each screen or on the OnVisible of each screen.

[Edwin-Abdalian]

@SighlentNite  have you tried to edit the component itself? select the component tab from the tree view and you will see the gallery there.