Dropdown Menu

lowcodera Dropdown Menu Component

Purpose

The lowcodera drop down menu component immediately adds professional gloss to your Power App and provides a highly effective menu solution for various application use cases. With its elegant flyout menu, the component has built-in support for icons, various styles and themes.

Variations

‌There are several variations of dropdown with different colors and configuration properties.

• Dropdown with Icons

• Dropdown with Circular radius

• Dropdown without Icons

• Dropdown with Outline

Component Properties

The properties below are the main ones which change this components appearance and behaviors.

Property	Description	Accepted Values	Required
Type	Property to define dropdown fill	Default Outline	X
IsRequired	Property to make our dropdown menu field required	Boolean	X
ShowEmptyMenuOption	Property to show first menu option as empty	Boolean	X
ShowSelectedAsTitle	Property to show selected option in a title	Boolean	X
PlaceholderText	Property to show placeholder text for dropdown when no value is selected	String	X
Default	Property to show default selected item from dropdown	Numeric	X

Examples

Dropdown Menu with Icons

Static Collection Example

In this example, a collection with static data called colldropdownwithIcon is defined in the Power App. The items property of the dropdown menu component is then bound to this collection.

ClearCollect(
    colldropdownwithIcon,
    {
        key: "1",
        text: "My profile",
        icon: "user"
    },
    {
        key: "2",
        text: "Settings",
        icon: "cog"
    },
    {
        key: "3",
        text: "Activity",
        icon: "calendar-alt"
    },
    {
        key: "4",
        text: "Support",
        icon: "phone-square"
    },
    {
        key: "5",
        text: "Logout",
        icon: "sign-out-alt"
    }
);

Property Configration

• PlaceholderText property is to set as Menu with Icons

• PlaceholderIcon is to set as archive

Event Configuration

Once we configure our textbox and we want to write some events, we need to use OnChange Event of the button

UpdateContext({Name: DropDownMenu1.CurrentText})

Output Properties

Please check the following Output properties for Lowcodera's Dropdown control.

Output Property	Purpose	Example
DropDownMenu1.CurrentText	Get Current selected item's Text from Lowcodera dropdown Component.	DropDownMenu1.CurrentText
DropDownMenu1.CurrentKey	Get Current selected item's key from Lowcodera dropdown Component.	DropDownMenu1.CurrentKey

Dropdown with circular radius

Static Collection Example

You can use the same collection used in section.

Property Configration

• Themeproperty is to set as Default

• PlaceholderText is to set as Menu with Icons

• PlaceholderIcon is to set as bars

• BorderRadius is to set as 100

Event Configuration

Once we configure our textbox and we want to write some events, we need to use OnChange Event of the button

UpdateContext({Name: DropDownMenu1.CurrentText})

Dropdown without Icons

Static Collection Example

In this example, a collection with static data called colldropdownwithoutIcon is defined in the Power App. The items property of the dropdown menu component is then bound to this collection.

ClearCollect(
    colldropdownwithoutIcon,
    {
        key: "1",
        text: "My profile"
    },
    {
        key: "2",
        text: "Settings"
    },
    {
        key: "3",
        text: "Activity"
    },
    {
        key: "4",
        text: "Support"
    },
    {
        key: "5",
        text: "Logout"
    }
);

Property Configration

• PlaceholderText property is to set as Menu without Icon

Dropdown with Outline

Static Collection Example

You can use the same collection used in section.

Property Configration

• Type property is to set as Outline

• PlaceholderText property is to set as Menu without Icon