How to Create a Slide Out Menu in Canvas Apps

Overview

In this tutorial, we will walk through how to create a slide out menu in canvas apps. This will help save on real estate and will improve the overall look and feel of your app.

YouTube

Slide Out Icon

Add an icon to your app. Icon.DockRight is a good out of the box icon to use.

Go to the icon’s OnSelect property. Update the formula to set a variable called dockDirection whenever the user selects it. Another variable called slideTimer will be set to true when selected.

If(dockDirection = "Out",
    UpdateContext({dockDirection: "In"}),
    UpdateContext({dockDirection: "Out"})
);

UpdateContext({slideTimer: true});

Go to the Icon property and update the formula to reference the appropriate icon based on the dockDirection variable’s value.

If(dockDirection = "Out",  Icon.DockLeft, Icon.DockRight)

Add Menu

To learn how to create a menu, refer to the following link: Create Dropdown Menus in Canvas Apps

The menu in itself requires it’s own tutorial.

Once the menu has been created. Identify a component of the menu that can be used as an anchor that all other components can refer to. In this case, the backdrop is going to be used. This will allow for the sliding calculation to only be required on the anchor component.

Each component used in the menu should have it’s X property set based on it’s distance from the anchor component.

Add Timer

Add a timer to the screen. Change to duration to 1000 (1 second). This can be refined once the slider is working to achieve the speed you want.

Update the AutoStart property to slideTimer

Update the OnTimerEnd property to change the slideTimer to false and reset the timer (Self)

UpdateContext({slideTimer: false});
Reset(Self);

Update Menu X Property

Update the X property of the anchor component. The following calculations will be used.

a. Direction = Out and timer is active
b. Direction = In and timer is active
c. Direction = Out and timer inactive
d. Default resting position

The YouTube video going in to detail breaking down each of these calculations and why you need buffer room

If(dockDirection = "Out" && slideTimer,
    28 - button_Backdrop_Menu2.Width + ((button_Backdrop_Menu2.Width + 3) * Timer1.Value / Timer1.Duration),
    If(dockDirection = "In" && slideTimer,
        30 - (button_Backdrop_Menu2.Width * Timer1.Value / Timer1.Duration),
        If(dockDirection = "Out" && !slideTimer,
            31,
            28 - button_Backdrop_Menu2.Width
        )
    )
)

Slide Out Menu in Action