Create Dropdown Menus in Canvas Apps

Overview

This tutorial will cover how you can create a dropdown menu in Canvas Apps using icons, images, labels, buttons and a rectangle. Adding a dropdown menu to your app will help free up space, so action items are only required when needed by the user.

YouTube

Create Action Button

To display the dropdown, we will need to create an Action button that the user will select. It’s comprised of three components; a image or icon, a label, and a button that used as an overlay.

The image or icon that used will appear on the left side of the button. Sizing should be 25 x 25 pixels and the image used is up to your discretion. If out of the box icons fit your needs, you can use those. Otherwise, there are plenty of option online to download png icons that fit the bill.

The label text can be whatever you want. In this case, Action is used. It’s recommended the following properties are updated:

• Text to preferred terminology
• Font size to 10 (something smaller than the default)
• Size to height of 25 minimum and width as necessary to fit the text

The button overlay is the most important part of the Action menu button, you will need to update the following properties:

• Text – Remove the default and leave blank
• Size – Per above image and label, 75 x 25 pixels fits perfectly. If you have longer labels, you can increase the width
• Fill – Set this as RGBA(0, 0, 0, 0), which is transparent
• HoverFill – Set this as RGBA(128, 128, 128, .1), which is a slightly transparent grey
• PressedFill – Set this as RGBA(128, 128, 128, .1), same as HoverFill
• FocusedBorderThickness – Set to 0

Ensure the overlay is on top of the image/icon and label. When hovered, it should look like this:

Building Dropdown Menu

To build the dropdown menu, you will need to add a rectangle backdrop. Color selection is discretionary. In this example, the following is used (change as needed for your color scheme):

• Fill – RGBA(227, 234, 243, 1)
• BorderColor – RGBA(136, 160, 209, 1)
• BorderThickness – 1

The height and width can be adjusted once buttons are added.

Copy and Past the action menu above (image, label and button) and paste where the dropdown menu backdrop is. This will save time and will keep consistency with the sizing.

Update the image/icon and label for your first menu item. Adjust the width of the button to 130 pixel to match the width of the rectangle backdrop.

It’s also recommended that you update the following properties to 0, so the edges of the button are square:

• RadiusTopLeft
• RadiusTopRight
• RadiusBottomLeft
• RadiusBottomRight

Repeat for the remain menu items as needed

Displaying Dropdown Menu

To display the dropdown menu, the OnSelect property of the action button will need to be updated. Here we will update a variable, that will be set to true if selected. If the user selects the button again and the variable is already true, it will be set to false. This will hide the dropdown menu.

If(displayMenuDemo,
    UpdateContext({displayMenuDemo: false}),
    UpdateContext({displayMenuDemo: true})
)

Group all the dropdown menu components. This will make updating the visible property easier.

Go to the group, select the Visible property, and then input the displayMenuDemo variable in the formula bar. At this point, when you select the action menu button, it will display and hide when selected.

Menu Item OnSelect Updates

For each of the menu items, you will need to update the OnSelect property. There are two main components of the update; 1) Trigger your block of code, and 2) Hide the dropdown menu.

In the scenario below, only a variable is being set.

Aesthetics

Aesthetics of the dropdown menu is really up to your discretion. There’s a lot of flexible in canvas apps to make the changes required ex) round corner backdrop with a button control, or even a flyout menu.