Flyout menu help

[ShadowTech]

Hello,

I'm trying to build a flyout menu but having a few problems to finish it up.

Basically I want the flyout menu to launch from the right side of the screen. As of right now it launches form the left side so I need assistance with that. Also due to the timer the menu jerks when sliding out and back in. not sure how to fix that.

Suggestions?

Thanks in advance.

[iAm_ManCat]

Hey @ShadowTech,

Have you looked at using @R3dKap's Control animator component or at least taking some of the movement formulae and applying that to your component? That should make things a lot smoother and easier to manage.

Link to the component here: 

https://powerusers.microsoft.com/t5/Canvas-Apps-Components-Samples/Control-Animator/td-p/590634 

Cheers,

Sancho

[R3dKap]

Hi @ShadowTech,

@iAm_ManCat is right (thanks by the way 😉😞 my Control Animator component will help you do implement the animation of your flyout menu. Don't hesitate to reply to this thread if you encounter any problem using it.

[ShadowTech]

@R3dKap I like your solution. Can I incorporate it into what I'm doing currently? What I have is a HTML TEXT object as a panel that I want to use to slide out. Give the interface a little more pop. Images below:

At rest on left side of canvas  flyout from left to right

At rest on right side of canvas                                                      slide out from right to left

Thanks in advance.

[R3dKap]

H

@ShadowTech sure you can do that with the ControlAnimator component.

Have a look at the detailed properties of the component and at some 'how-to use it' explanations. If you find yourself stuck at some point, don't hesitate to reply to this post.

Also, may I ask why you chose to make your flyout menu using an HTML control? What couldn't you do using regular controls?

[ShadowTech]

@R3dKap I'm using HTML for shadowing as that functionality is not native to PowerApps.

[R3dKap]

Ok I see... I made a component for shadowing using SVG if needed: https://powerusers.microsoft.com/t5/Canvas-Apps-Components-Samples/Shadow-Box/m-p/434753

Have you been able to use the ControlAnimator component? It's not always easy to use it because it seems that timers inside components are not very stable and sometimes one needs to restart the Power Apps Studio to make it work again.

[ShadowTech]

@R3dKap  So yeah if you could provide a little assistance with the component that would be awesome and very much appreciative. I downloaded and imported your component. This flyout menu will have a "new form" on it that slides out. So basically that is how the menu is setup now. Just need to understand your component and having my menu slide out from the right to the left.

Thanks in advance.

[R3dKap]

Ok, let's say your menu is wrapped up in a container control called ctrFlyOutMenu placed on your screen.

Set the ControlAnimator's Start value to this:

YourScreen.Width - 30

The 30 pixels here represents the width of your NEW SUPPORT CASE control on which you click to open the menu.

Set its End value to this:

YourScreen.Width - ctrFlyOutMenu.Width

On the OnSelect property of the NEW SUPPORT CASE control put the following code:

UpdateContext(
    {
        locFlyOutMenuHidden: Not(locFlyOutMenuHidden),
        locAnimateFlyOutMenu: false
    }
);
UpdateContext({locAnimateFlyOutMenu: true})

Set the ControlAnimator's Animate property to:

locAnimateFlyOutMenu

Set its Reverse property to:

locFlyOutMenuHidden

Add this to your screen's OnVisible property:

Reset(ControlAnimator) // <- name of your ControlAnimator component here

You can the hide your ControlAnimator component...

Well, that should do the trick (just tested it on my side and it works)... 😉

[ShadowTech]

@R3dKap Question.

I have the menu created in a group right now. Can I use that instead of a container? Also setting the ControlAnimator's start value...not sure what you mean here. A separate button on the screen will open and close the menu. The menu itself is about 1260Px.